<form> フォーム

フォームのタグと属性

<form></form>

フォームの基本タグで、各パーツはこのタグの内側に記述します。
HTML5では、このタグは省略できるようになります。

name	フォームの名前
action	フォームを送信する宛先としてURLを指定する
method	"get"…URLを利用してフォームの内容をテキスト文字列で送信します。 "post"…大量のデータを送るのに向いており、URLにもデータが表示されない。
enctype	メール送信で文字化け（エンコード）しないように"text/plain"としたり、画像などアップロードするときには"multipart/form-data"として、送信データの形式を指定します。
target	window名を指定。任意の他、"_blank" "_parent" "_self" "_top"がある。

<form action="form_recieve.cgi" method="post"></form>

<input type="submit">

送信ボタンを表示します。
属性は以下の<input>タグで共通です。

name	項目の名前。データを送信するときに、項目名として必ず送信されます。
id	項目のid名。
type	タイプの指定によって項目の入力形式そのものが変わります。以後の項目で詳しく紹介しています。 "text" "password" "radio" "check" "button" "submit" "reset" "hidden" "file" "image"
value	その項目に既存の入力値として表示するデータを指定します。
size	横幅を数値で指定します。
readonly	表示のみで入力・編集ができない。値不要
disabled	使用できないようにグレー表示にしてしまいます。値不要

<input type="submit" value="送信">

HTML5

HTML5では<form>タグが省略可能となり、下記の属性が利用できるようになります。

formmethod
formaction	これらの属性は<form>タグと同じ役割をボタン毎に割り当てることを可能にします。これにより複数の送信ボタンを送信先別に使い分けることが可能になります。
formenctype
formtarget

<input type="reset">

リセットボタンを表示します。

<input type="reset" value="リセット">

<input type="text">

テキスト入力フィールドを表示します。

<input type="text" name="textfield" value="入力データ">

上記のフォームを送信した場合、「textfield=入力データ」となります。

HTML5

HTML5で新たに使える属性があります。

autofocus	ページ読込後、入力可能な状態になる。値不要
min	入力を許可する最小値
max	入力を許可する最大値
placeholder	指定したテキストをデフォルトでグレー表示する。入力開始時に消える
list	<datalist>と組み合わせて使用する。入力内容をリストから選ぶことが可能になる
required	入力必須項目。未入力の場合、送信できない

<input type="text" name="html5-1" placeholder="入力データ">
<input type="text" name="html5-2" value="500" min="10" max="1000" required>

<input type="password">

入力したテキストが見えないようにマスク処理されます。

<input type="password" name="secretcode" value="12345">

上記のフォームを送信した場合、「secretcode=12345」となります。

<input type="hidden">

入力項目が表示されません。表示が不要で、送信が必要なデータをデフォルトで用意したり、JavaScriptで書き換えます。

<input name="setting" type="hidden" value="today">

上記のフォームを送信した場合、「setting=today」となります。

<input type="radio">

ラジオボタンを表示します。
複数のラジオボタンを一組にして、その中の１つだけにチェックマークを付けることができます。
属性には下記の注意点があります。

name	一組になるように同じ名前を付けます。
checked	事前にチェックマークを付けることができます。値不要
value	フォームから送信されるデータであり、表示はされない。

<input type="radio" name="rb1" value="m" checked>男性
<input type="radio" name="rb1" value="f">女性

男性女性

上記のフォームを送信した場合、「rb=m」というデータが送信されます。

<label></label>タグで囲うと、表記の部分もクリックできるようになります。

<label><input type="radio" name="rb2" value="m" checked>男性</label>
<label><input type="radio" name="rb2" value="f">女性</label>

男性女性

<input type="checkbox">

チェックボックスを表示します。
複数のチェックボックスを一組として扱います。属性はラジオボタンと同じです。

<input type="checkbox" name="cb" value="25" checked>滋賀県
<input type="checkbox" name="cb" value="26">京都府
<input type="checkbox" name="cb" value="27">大阪府

滋賀県京都府大阪府

<input type="button">

汎用ボタンを表示します。
JavaScriptを呼び出して任意の動作を実行させます。

<input type="button" value="押す" onClick="alert('OK')">

<textarea></textarea>

複数行必要なテキスト入力フィールドを作ります。
開始タグと終了タグの間にテキストを入れるとデフォルトの入力文字列となります。

cols	表示の横幅を指定
rows	表示の行数を指定
wrap	"off"…フィールド端で自動改行しない "soft"…自動改行して表示するが、送信時は改行しない "hard"…自動改行して表示し、送信時には改行を入れる

<textarea name="textarea" cols="50" rows="5" id="textarea" wrap="off">入力してください</textarea>

入力してください

<select></select>

選択メニューを配置します。押すとメニューが開くタイプと、複数行表示から選択するタイプがあります。
各項目は<option>タグで設定します。開始と終了タグの間に表示の項目を記述し、value属性で送信データを指定します。

size	表示行数。未指定の場合、プルダウンメニュー。指定するとリストボックスとなる
multiple	複数行を選択可能にする。値不要

<option>タグの属性

value	画面には表示されないが、フォームの送信時に引き渡す値
selected	初期選択の項目となる。値不要

プルダウンメニュー

<select name="smenu1">
<option value="25" selected>滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
</select>

「滋賀県」を選択した場合、送信されるデータは「smenu=25」です。

リストボックス

<select name="smenu2" size="3" multiple>
<option value="25" selected>滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
</select>

Windowsでは、Ctrl+クリックで選択追加。Shift+クリックで範囲選択。
MacOSでは、option+クリックで選択追加。

<label></label>

ラジオボタンやチェックボックスと組み合わせて使用します。
タグで囲った部分をクリックしてチェックが入るようになります。

for	<input>タグのidと同じ名称を使用し、対になる部分を指定します

ラベルにボタンを含ませる

この場合、for属性は省略できます。

<label><input type="checkbox" name="cb" value="25">滋賀県</label>

滋賀県

ラベルとボタンを独立させる

ボタンとラベルが離れていても使用できます。

<input type="checkbox" name="cb" value="25" id="p25">・・・<label for="p25">滋賀県</label>

・・・滋賀県

HTML5で追加されたタグ

HTML5で追加されるタグや、属性は使用できるブラウザの確認が必要になります。

<datalist></datalist>

HTML5で追加されるタグ。テキストフィールドと組み合わせてプルダウンメニュー（コンボボックス）を構成する。項目は<option>タグで指定する。

id	<input>タグのlist属性と同じ名称を指定し、対にします

<input type="text" list="pmenu">
<datalist id="pmenu">
<option value="滋賀県"></option>
<option value="京都府"></option>
<option value="大阪府"></option>
</datalist>

そのまま入力することもできますが、テキストフィールド内を2度クリックするとメニューが表示されます。オートコンプリート機能もあるので、入力途中でも選択肢が表示されます。

フォームの練習サンプル

フォームの送受信テスト
form_test1.html	CGIへ送信(POST)
form_test2.html	CGIへ送信(GET)
form_test3.html	HTMLへ送信
form_test4.html	メールへ送信（非対応ブラウザあり）

戻る