この記事はHTML 4/XHTML 1での<form>要素についての解説記事です。
HTML 5での<form>要素に関する解説記事は、HTML 5 リファレンス内のHTML 5での<form>要素をご覧ください。
入力フォームである<form>要素の解説です。
<form>要素とは、入力フォームです。
<form>要素は、以下の文書型で利用出来ます。
<form>要素はソフトバンクの非パケット機では実装に制限があります(後述)。
<form>要素はフォームモジュールに属します。
<form>要素はブロックレヴェル要素です。
<form>要素の内容は<form>要素を除くブロックレヴェル要素, <fieldset>要素及び<script>要素に限られます。
<form>要素には、以下の属性が定められております。
<form>要素で使える共通属性には
があります。
HTTPメソッドを指定します。
以下に挙げる<form>要素の属性はHTML 3.2では使えません。
クライアントサイドスクリプトなどが、当該フォームを操作する際に識別子として使う名前を指定します。
堀北真希ちゃんがボシュロム社コンタクト洗浄液TVCMに出演した事に因んだ、レンズをつけている堀北真希うさぎapplication/x-www-form-urlencoded で、いわゆるURLエンコードが施されます。accept="text/html"属性となります。accept-charset="shift_jis, euc-jp"属性となります。フォームの送信ボタンが押された際に起動するクライアントサイドスクリプトを記述します。一般に入力内容が適切かどうかを判定するスクリプトやフォームを利用したスクリプトの動作などに使われます。
フォームのリセットボタンが押された際に起動するクライアントサイドスクリプトを記述します。一般にフォームデータの初期化などに使われます。
以下に挙げる<form>要素の属性はHTML 3.2, トランジッショナル文書型及びフレームセット文書型でのみ利用出来る属性です。
GETメソッドとする場合(method="get"属性を附与しているかmethod属性を与えなかった場合)、action属性値のURIにクエリが付いている場合(URIに「?」を含む場合)、ユーザエージェントによってはaction属性値のクエリが切捨てられる場合があります。
method="post"属性を附与)が使えません。action属性の値として、mailto:スキーム名に続けてメールアドレスを指定する事も出来ます。
この場合、ユーザエージェントと連携しているメールクライアントを用いてフォーム内容をメール送信します。
しかしながら、以下の点に注意して下さい。
デフォルトではURLエンコードされるため、送られたメールを読むに当たってデコーダが必要になります。
enctype="text/plain"属性にすると、クエリが生テキストで送られます。enctype="multipart/form-data"属性にすると、クエリがURLエンコードされないマルチパート形式で送られます。method="post"とします特に対応出来ない環境がある事から、このようなメールフォームはお奨め出来ません。
<form action="http://cgi.nantoka.ne.jp/cgi-bin/uso800.cgi" method="post"><fieldset><legend>お客様情報</legend><dl><dt>お名前</dt><dd><input type="text" name="name" size="32" /></dd><dt>パスワード</dt><dd><input type="password" name="passwd" size="32" /></dd><dt>性別</dt><dd><ul><li><label><input type="radio" name="sex" value="m" /> 男性</label></li><li><label><input type="radio" name="sex" value="f" /> 女性</label></li><li><label><input type="radio" name="sex" value="g" /> 団体</label></li></ul></dd><dt>ご住所</dt><dd><select name="pref"><option value="北海道">北海道</option>…<optgroup label="関東地方">…<option value="埼玉県" selected="selected">埼玉県</option><option value="東京都">東京都</option>…</optgroup>…<optgroup label="九州・琉球地方">…<option value="沖縄県">沖縄県</option></optgroup></select><br /><textarea name="addr" cols="30" rows="2"></textarea></dd><dt>ご利用の携帯電話(複数選択可)</dt><dd><label><input type="checkbox" name="keitai" value="DC" />ドコモ</label><label><input type="checkbox" name="keitai" value="AU" />AU/ツーカー</label><label><input type="checkbox" name="keitai" value="SB" />ソフトバンク</label><label><input type="checkbox" name="keitai" value="WC" />ウィルコム</label><label><input type="checkbox" name="keitai" value="OT" />その他</label><dd></dl><ul><li><label><input type="submit" value="送信"</label></li><li><label><input type="reset" value="リセット"</label></li></ul></fieldset></form>
このHTMLは視覚系のユーザエージェントなら、以下のような形でレンダリングされるでしょう。
