フォームのタグ

フォームとは、Webページの閲覧者が入力したデータなどをサーバへ送信する仕組みです。サーバへ送信されたデータは受け取ったプログラムにより、メールを送信したり、データベースを操作（検索・挿入・編集・削除）をしたりして、処理の結果を表示するWebページを生成し、閲覧者に送り返します。

【構文】

<form action=”送信先プログラムのパス” method=”送信方法”>
： （送信するデータ）
<input type=”submit” value=”ボタンのキャプション”>
</form>

フォームを作成するときは、送信したい内容を formタグで囲みます。formタグには action属性でデータを処理するプログラムを、method属性で送信の仕方を指定します。

【属性】

属性	属性値	意味
action	[例] ../folder/program.php	データの送信先は、program.php（PHPファイル）
method	GETまたはPOST	GET：データをURLの一部として送信 POST：データを見えないようにして送信
name	[例] enquete-form	フォームを識別するための名前をつける

テキストを入力する

【構文】

<input type=”text” name=”名前”> （１行テキスト入力欄）

<textarea name=”名前”>初期値</textarea> （複数行テキスト入力欄）

inputタグは、さまざまなフォーム部品を表しますが、type属性がtextとなると、１行テキスト入力欄となります。またすべてのフォーム部品はname属性で名前をつけなければなりません。

textareaタグは、複数行テキスト入力欄を表します。かつては1行の文字数をcols属性で、行数をrows属性で設定していましたが、現在はCSSでサイズ指定をします。開始タグと終了タグの間に挟まれた文字は、初期値としてテキストエリア内に表示されます。

See the Pen
1-13_1 by Koji Seto (@yseseto)
on CodePen.

複数の中から選択する

【構文】

<input type=”radio” name=”名前”> （ラジオボタン）

<input type=”checkbox” name=”名前”> （チェックボックス）

<select name=”名前” name=”名前”>
<option value=”送信される値”>表示される値</option>
：
</select> （単一セレクトボックス）

<select name=”名前” name=”名前” multiple>
<option value=”送信される値”>表示される値</option>
：
</select> （複数セレクトボックス）

選択でよく使われるのがラジオボタンとチェックボックスです。丸い形をしたラジオボタンは、性別など複数の中から1つを選択するときに使用されます。また四角い形をしたチェックボックスは、趣味など複数選択の可能性がある場合に使用されます。

selectタグとoptionタグで作成されるセレクトボックスは、通常は1行で、展開すると複数のリストから1つを選択できます。multiple属性を設定すると複数行表示され、複数選択が可能となります。

【属性】

属性	属性値	意味
checked	checkedまたは省略	あらかじめ選択状態にする
selected	selectedまたは省略	あらかじめ選択状態にする
multiple	multipleまたは省略	リストを複数行表示にする

See the Pen
1-13_2 by Koji Seto (@yseseto)
on CodePen.

ボタンを作成する

【構文】

<input type=”submit” value=”ボタンキャプション”> （送信ボタン）

<input type=”reset” value=”ボタンキャプション”> （リセットボタン）

<input type=”image” src=”画像ファイルのパス”> （画像送信ボタン）

<input type=”file” name=”名前” value=”ボタンのキャプション”> （ファイル選択ボタンとテキストボックス）

<input type=”button” value=”ボタンキャプション”> （汎用ボタン）

inputタグのtype属性にsubmitを指定すると、フォームの内容を送信するボタンとなります。value属性はボタンに表示するキャプションを指定できます。

type属性resetは、リセットボタンといい、フォームの内容をすべて初期値に戻します。

type属性imageは、画像を使用した送信ボタンを表示します。src属性で画像のパスを指定します。

type属性fileは、ファイル選択用のボタンで、ボタンをクリックするとファイル選択ダイアログが開き、ファイルを選択するとダイアログが閉じ、ファイル名がテキストボックスに表示されます。

See the Pen
1-13_3 by Koji Seto (@yseseto)
on CodePen.

ラベルをつける

labelタグは、フォーム部品のid属性とテキストのラベルを結びつけるときに使用します。すると、ラベル部分をクリック／タップしたときに、該当するテキストボックスが入力状態になったり、ラジオボタンが選択されたりします。

See the Pen
1-13_4 by Koji Seto (@yseseto)
on CodePen.