フォームの使い方
2014年5月21日:HTML
IDとかパスワードを扱う際に、フォームを使用します。
フォームにより、ユーザーとのやりとりが可能となります。
ここでは、フォームの種類や使い方を解説します。
フォームの定義
フォームをつくるにはまず、フォームの送信先や形式を指定します。
以下の構文により、フォームの送信先と送信形式を指定できます。
<form action="送信先" method="送信形式"> フォームオブジェクト </form>
送信先にはデータを送信するURLを指定します。例えば、
http://test.com/index.php
とかです。送信したデータはPHPやCGIにより解析されて利用されます。メールアドレスに送信したい場合はURLでなく
mailto:XXX@YYY
というようにmailto:のあとにメールアドレスを指定します。複数のメールアドレスに送りたい場合は
mailto:XXX1@YYY1 XXX2@YYY2
というようにスペースをいれてメールアドレスを記述します。
methodには「get」か「post」を指定します。
getだと、URL経由により情報を伝えます。例えば、
http://test.com/index.php?id=12&pass=11
というように「?」以降に情報をのせて送信するのがgetという方法です。この場合だと、
- 変数idは値12
- 変数passは値11
という情報を送信しています。
postではURL経由しないで情報を伝える方法です。
getと比べて多くの情報を送れ、URLに情報がのらないことから、基本的にpostを使用するのがふつうです。
フォームのオブジェクト
では、フォームに使うテキストフィールドやボタンなどのオブジェクトの設置方法を紹介します。
テキスト入力と送信・クリアボタン
以下のプログラムは、IDとパスワードを記入してpost形式でhttp://test.com/index.phpへ送信できるようになっています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>サンプル</title> </head> <form method="post" action="http://test.com/index.php"> <p>ID:<input type="text" name="id" value="ID" size="10" /></p> <p>パスワード:<input type="password" name="password" value="123" size="10" /></p> <input type="submit" value="送ります" /> <input type="reset" value="リセットします" /> </form> <body> </body> </html>
まず、テキストフィールドは
<input type="text" name="id" value="ID" size="10" />
により表示できます。typeの部分にtextを入れれば、テキストを入力できます。もし、passwordにすれば、パスワード専門のテキストフィールドになります。
そして、nameには、送信する際の変数を指定します。ここでは、idを指定しています。
valueでは、初期状態に記入される値が入ります。
sizeには、テキストフィールドの最大文字数を指定します。
ボタンに関しては、
<input type="submit" value="送ります" />
により作成します。typeにsubmitを入れれば、送信用のボタンになります。このボタンを押すと、テキストフィールドの値などが送信されます。もし、typeがresetなら、ボタンを押すとデフォルトの状態になります。
また、typeがfileなら、ファイル選択用のボタンとなります。例えば、
<input type="file" name="selectfile" value="xxx" />
のように使用します。
このHTMLを実行すると
のようになります。初期状態ではIDと123がそれぞれ、IDとパスワードに記入されています。
「送ります」を押すと、IDとパスワードがhttp://test.com/index.phpへpost形式で送信されます。
そして、「リセットします」を押すと、IDとパスワードがデフォルト「ID」「123」へリセットされます。
チェックボックスとラジオボタン
以下のようにHTMLファイルを作れば、チェックボックスやラジオボタンを作れます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>サンプル</title> </head> <form method="post" action="http://test.com/index.php"> <p>好きなモノはどれ?</p> <p> <input type="checkbox" name="like" value="apple" checked />りんご <input type="checkbox" name="like" value="orange" />オレンジ <input type="checkbox" name="like" value="meat" />肉 </p> <p>睡眠時間は?</p> <p> <input type="radio" name="suimin" value="1h" checked />1時間 <input type="radio" name="suimin" value="2h" />2時間 <input type="radio" name="suimin" value="3h" />3時間 </p> <input type="submit" value="送ります" /> <input type="reset" value="リセットします" /> </form> <body> </body> </html>
これを表示すると以下のようになります。
チェックボックスを作成するには
<input type="checkbox" name="like" value="apple" checked />
のようにinputのtypeにcheckboxを指定します。nameが変数名で、valueがその値となります。
そして、 checkedがあれば、はじめの状態でチェックされた状態になります。
ラジオボタンは
<input type="radio" name="suimin" value="1h" checked />
により作成できます。typeにradioを指定すれば、作成できます。nameが変数で、valueが値となります。
ラジオボタンとチェックボックスの違いですが、
ラジオボタンではひとつだけ選択でき、チェックボックスは複数チェックできるという違いがあります。
回答選択メニュー
複数の選択肢をメニュー形式で選ばせることもできます。
例えば、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>サンプル</title> </head> <form method="post" action="http://test.com/index.php"> <p>仕事はなにしてる?</p> <select name="work" size="2"> <option value="cook">料理人</option> <option value="teacher" selected>教師</option> <option value="neat">ニート</option> </select> <br /> <input type="submit" value="送ります" /> <input type="reset" value="リセットします" /> </form> <body> </body> </html>
とすれば
のように表示されます。料理人、教師、ニートの中から選択できるようになります。
<select name="work" size="2">
のnameが変数名で、valueが値となります。sizeはメニューに表示する数になります。ここでは、2なので2つだけ表示されます。
表示されないものはスクロールすることで選択することができます。
<option value="teacher" selected>教師</option>
のようにoptionタグで囲んだ部分が表示されます。そして、valueが送信する値です。もし、selectedが記入されていると、その値が最初に選ばれます。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー