フォームの使い方

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 />１時間
<input type="radio" name="suimin" value="2h" />２時間
<input type="radio" name="suimin" value="3h" />３時間
</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はメニューに表示する数になります。ここでは、２なので２つだけ表示されます。

表示されないものはスクロールすることで選択することができます。

<option value="teacher" selected>教師</option>

のようにoptionタグで囲んだ部分が表示されます。そして、valueが送信する値です。もし、selectedが記入されていると、その値が最初に選ばれます。

著者：安井真人(やすい　まさと)
@yasui_masatoさんをフォロー