1 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
HTML 
⼊入⼒力力欄の作成
2 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
処理理の流流れ(登録) 
1情報を⼊入⼒力力する23 
HTML 
HTMLから情報をもらう 
&SQLを実⾏行行する 
 
情報を登録する 
PHPSQL
3 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
⼊入⼒力力欄の作成(1/3) 
l ウェブサイトには左図のように 
ユーザーが情報を送信するために 
使⽤用するフォームという機能が 
あります。 
- これをHTMLで実現するのが 
HTMLフォームです。 
l 会員情報の登録欄や、検索索条件の⼊入⼒力力欄など、フォームの利利 
⽤用範囲は⾮非常に多岐にわたります。 
- たとえば、会員登録ページ、じゃらんの検索索ページ、 
Twitterの投稿 / 検索索ページ なども全てHTMLフォームを 
使⽤用しています。
4 
HTMLフォームを構成するフォーム部 
品は、その記述の⽅方法により、⾒見見栄え 
や機能が⼤大きく異異なります。 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
⼊入⼒力力欄の作成(2/3) 
テキストボックス型 
input type=”text” name=”shimei” size=”40” 
ラジオボックス型 
input type=”radio” name=”gender” value=”male”男 
input type=”radio” name=”gender” value=”female”女 
プルダウン型 
select name=”blood” 
option value=”A”A型/option 
option value=”B”B型/option 
option value=”O”O型/option 
option value=”AB”AB型/option 
/select 
テキストエリア型 
 textarea name=”kanso” rows=”4” cols=”40” 
/textarea 
ボタン型 
input type=”submit” value=”送信” 
input type=”reset” value=”リセット”
HTML 
5 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
⼊入⼒力力欄の作成(3/3) 
l メールアドレスを⼊入⼒力力してもらおう! 
 
html 
head 
meta charset=utf-8 
titleメール送信/title 
/head 
body 
メールアドレスを入力して下さい。 
form action=”send_mail.php” method=”GET” 
input type=text” name=”email”  br 
input type=”submit” value=”メール送信” 
/form 
/body/html 
HTMLからPHPにデータを渡す時は 
formタグを⽤用いる。 
actionに次に実⾏行行したいPHPファイル名 
methodにはGET、またはPOSTと書く 
JavaScriptの時はID指定だった 
が、PHPへはname指定となる
6 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
お疲れ様でした!!

FormCreate

  • 1.
    1 Copyright (c)株式会社HEART QUAKE All rights reserved . HTML ⼊入⼒力力欄の作成
  • 2.
    2 Copyright (c)株式会社HEART QUAKE All rights reserved . 処理理の流流れ(登録) 1情報を⼊入⼒力力する23 HTML HTMLから情報をもらう &SQLを実⾏行行する 情報を登録する PHPSQL
  • 3.
    3 Copyright (c)株式会社HEART QUAKE All rights reserved . ⼊入⼒力力欄の作成(1/3) l ウェブサイトには左図のように ユーザーが情報を送信するために 使⽤用するフォームという機能が あります。 - これをHTMLで実現するのが HTMLフォームです。 l 会員情報の登録欄や、検索索条件の⼊入⼒力力欄など、フォームの利利 ⽤用範囲は⾮非常に多岐にわたります。 - たとえば、会員登録ページ、じゃらんの検索索ページ、 Twitterの投稿 / 検索索ページ なども全てHTMLフォームを 使⽤用しています。
  • 4.
    4 HTMLフォームを構成するフォーム部 品は、その記述の⽅方法により、⾒見見栄え や機能が⼤大きく異異なります。 Copyright (c) 株式会社HEART QUAKE All rights reserved . ⼊入⼒力力欄の作成(2/3) テキストボックス型 input type=”text” name=”shimei” size=”40” ラジオボックス型 input type=”radio” name=”gender” value=”male”男 input type=”radio” name=”gender” value=”female”女 プルダウン型 select name=”blood” option value=”A”A型/option option value=”B”B型/option option value=”O”O型/option option value=”AB”AB型/option /select テキストエリア型 textarea name=”kanso” rows=”4” cols=”40” /textarea ボタン型 input type=”submit” value=”送信” input type=”reset” value=”リセット”
  • 5.
    HTML 5 Copyright(c) 株式会社HEART QUAKE All rights reserved . ⼊入⼒力力欄の作成(3/3) l メールアドレスを⼊入⼒力力してもらおう! html head meta charset=utf-8 titleメール送信/title /head body メールアドレスを入力して下さい。 form action=”send_mail.php” method=”GET” input type=text” name=”email” br input type=”submit” value=”メール送信” /form /body/html HTMLからPHPにデータを渡す時は formタグを⽤用いる。 actionに次に実⾏行行したいPHPファイル名 methodにはGET、またはPOSTと書く JavaScriptの時はID指定だった が、PHPへはname指定となる
  • 6.
    6 Copyright (c)株式会社HEART QUAKE All rights reserved . お疲れ様でした!!