フォーム関連要素（1/4）
form要素（サブミット・フォーム）
| カテゴリ | フロー・コンテンツ |
|---|---|
| コンテンツモデル | フロー・コンテンツ。ただし、中にform要素を入れられない。 |
| 利用可能な場所 | フロー・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | accept-charset（フォーム送信に使う文字エンコーディングを指定） action（フォーム送信先のアドレスを指定） autocomplete（オートコンプリートを有効にするかどうかを指定） enctype（フォーム送信のMIMEタイプを指定） method（フォーム送信に使うHTTPメソッドを指定） name（フォームの名前を指定） novalidate（フォーム送信時に入力値のバリデートを行わないようにする） target（フォームのターゲットを表すブラウジング・コンテキスト名やキーワードを指定） |
| デフォルトスタイル | form{ display:block; } |
form要素は、サーバにユーザの入力したデータを送信するためのメカニズムを提供しています。form要素の中に、input要素やselect要素などのフォーム・コントロールを入れて使います。
form要素には、固有のコンテンツ属性が複数ありますので、それを次に紹介します。
★ accept-charsetコンテンツ属性
通常、フォームで送信されるデータは、ページの文字エンコーディングと同じになります。しかし、accept-charsetコンテンツ属性に文字エンコード名を指定すると、フォームに入力されたデータが、指定の文字エンコーディングに変換されてサーバに送信されます。
■利用例
<form action="form.cgi" method="post" accept-charset="utf-8">
<p><label>名前：<input type="text" name="namae" /></label></p>
<p><input type="submit" value="送る" /></p>
</form>
利用例では、入力されたデータはUTF-8に変換された上で、サーバに送信されます。もし、複数の文字エンコーディング名を指定したいのであれば、半角スペースで区切ります。
<form action="form.cgi" method="post" accept-charset="utf-8 shift_jis">
複数の文字エンコーディング名を指定した場合は、最初の順から見ていき、そのブラウザがサポートした文字エンコーディングがあればそれを採用して、実際のエンコーディングに使われます。
★ actionコンテンツ属性
actionコンテンツ属性は、該当のフォームを送信するサーバのURLを指定します。ただし、もし送信ボタンを表すsubmitタイプやimageタイプのinput要素や、submitタイプのbutton要素にformactionコンテンツ属性が指定されていたら、そのformactionコンテンツ属性が優先されます。
■利用例
<form action="cgi-bin/form.cgi" method="post" accept-charset="utf-8">
利用例では、フォーム内で入力されたデータは、cgi-bin/form.cgiのファイルに送られて処理されます。
★ autocompleteコンテンツ属性
autocompleteコンテンツ属性は、テキスト入力フィールドなどで、オートコンプリート機能を有効にするか、無効にするかを定義できます。
※ オートコンプリート機能とは、以前に入力したデータをブラウザが覚えておき、次回以降、同じフォームにアクセスしたら、過去に入力したデータの候補を表示して、それを選択するだけで、該当の入力フィールドに値をセットすることができるユーザ・インターフェイスをユーザに提供するものです。
このコンテンツ属性は列挙属性で、有効と指定するならon、無効と指定するならoffと指定します。デフォルト値はonです。
■利用例
<form action="form.cgi" method="post" autocomplete="on">
<p><label>名前：<input type="text" name="namae" /></label></p>
<p><input type="submit" value="送る" /></p>
</form>
利用例をブラウザ上でレンダリングすると次の図のようになります。図では、「t」と入力したら、過去に入力した中から「t」で始まる文字の候補が表示されます。
入力の内容によっては、セキュリティ上の理由からオートコンプリートは無効にしておいたほうが良いでしょう。
★ enctypeコンテンツ属性
enctypeコンテンツ属性は、フォーム・データをサーバに送信する際に、どのような形式でデータをエンコードするのかを指定します。このコンテンツ属性は列挙属性で、次の3つの値のいずれかを指定します。
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
指定がなければ、application/x-www-form-urlencodedが適用されます。通常のフォームでは、明示的に指定する必要はありませんが、ファイルを添付するフォームでは、multipart/form-dataを指定する必要があります。
★ methodコンテンツ属性
このコンテンツ属性は、フォームデータをサーバに送信する際のHTTPメソッドを指定します。methodコンテンツ属性は列挙属性で、GET、POST、PUT、DELETEのいずれかをセットします。もし、コンテンツ属性が指定されていなければ、GETがデフォルトで適用されます。
■利用例
<form action="cgi-bin/form.cgi" method="post" accept-charset="utf-8">
★ nameコンテンツ属性
nameコンテンツ属性は、form要素の名前を指定しますが、指定する場合は必ず1文字以上の名前を指定する必要があります。また、ドキュメント内に別のform要素がある場合、それらのform要素の中でnameコンテンツ属性の値が重複してはいけません。
★ novalidateコンテンツ属性
novalidateコンテンツ属性は、該当フォームに関連するコントロールの入力データのバリデートを行わないことを指定します。このコンテンツ属性は論理属性で、このコンテンツ属性が存在すれば、バリデートが無効となります。
※ バリデータを使用することにより、自動的かつ客観的に文法のエラーを発見することができ、文法の正確性の確保と作業効率の向上に役立ちます。
■利用例
<form action="form.cgi" method="post" novalidate="">
<p><label>メールアドレス<input type="email" name="email" /></label></p>
<p><input type="submit" value="送る" /></p>
</form>
利用例では、input要素のtypeコンテンツ属性に"email"がセットされていますので、このタイプに対応したブラウザであれば、メールアドレスとして適切な文字しか送信できませんが、novalidateコンテンツ属性がセットされているので、どんな文字列でも送信可能となります。
★ targetコンテンツ属性
targetコンテンツ属性は、フォーム送信後の結果を表示するブラウジング・コンテキスト名を指定します。
■利用例
<form action="form.cgi" method="post" target="_blank">
利用例では、targetコンテンツ属性に"_blank"がセットされているので、フォーム内容が送信されると、新たにブラウジング・コンテキストが用意され、結果画面がその中に表示されます。
fieldset要素（フォーム・コントロールのグループ）
| カテゴリ | フロー・コンテンツ、セクショニング・ルート |
|---|---|
| コンテンツモデル | オプションで最初に1つのlegend要素を入れ、その後にフロー・コンテンツが続きます。 |
| 利用可能な場所 | フロー・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | disabled（この要素の中にあるフォーム・コントロールをすべて無効にする） form（この要素を関連付けるフォームのform要素のid属性をセットする） name（この要素が表すフォーム・コントロールのグループの名前を指定） |
| デフォルトスタイル | fieldset { margin-left:2px;margin-right:2px; border:groove 2px ThreeDFace; padding:0.35em 0.625em 0.75em; } |
fieldset要素は、フォーム・コントロールをグループ化するために使います。この要素の最初にlegend要素を入れ、そのグループの名前をマークアップすることができます。
■利用例
<form action="form.cgi" method="post" target="_blank">
<fieldset>
<legend>自宅情報</legend>
<p><label>住所：<input type="text" name="adr_h" /></label></p>
<p><label>電話番号：<input type="text" name="tel" /></label></p>
</fieldset>
<fieldset>
<legend>会社情報</legend>
<p><label>住所：<input type="text" name="adr_c" /></label></p>
<p><label>eメール：<input type="email" name="email" /></label></p>
</fieldset>
</form>
利用例をブラウザ上でレンダリングすると次の図のようになります。
利用例では、自宅情報と会社情報をそれぞれグループ化したものです。視覚的にもボーダーで仕切られた表示になっているので、フォーム自体の内容が分かりやすくなります。
★ disabledコンテンツ属性
disabledコンテンツ属性は論理属性で、指定するとfieldset要素内にあるフォーム・コントロールをすべて無効にします。
■利用例
<form action="form.cgi" method="post" target="_blank">
<fieldset disabled="disabled">
<legend>連絡先</legend>
<p><label>住所：<input type="text" name="adr_h" /></label></p>
<p><label>電話番号：<input type="text" name="tel" /></label></p>
</fieldset>
</form>
利用例をブラウザ上でレンダリングすると次の図のようになります。
利用例は、Firefox5.0でのレンダリング結果で、入力不可の状態になりカーソルを入れることができません。ブラウザによって表示方法が異なりますので、注意してください。
★ formコンテンツ属性
formコンテンツ属性は、fieldset要素が表すフォーム・コントロールのグループを、指定のform要素と結びつけるために使います。このコンテンツ属性には、結び付けたいform要素のid属性の値を指定します。
■利用例
<fieldset form="fm">
<legend>連絡先</legend>
<p><label>住所：<input type="text" name="adr_h" /></label></p>
<p><label>電話番号：<input type="text" name="tel" /></label></p>
</fieldset>
<form action="form.cgi" method="post" id="fm">
<input type="submit" value="Send" />
</form>
利用例では、fieldset要素がform要素の外でマークアップされています。formコンテンツ属性には、form要素のid属性の値がセットされています。これによりfieldset要素の中にあるフォーム・コントロールは、form要素に関連付けられ、送信ボタンが押されるとfieldset要素内のフォーム・コントロールの値が送信されます。
★ nameコンテンツ属性
nameコンテンツ属性には、fieldset要素が表すフォーム・コントロールのグループの名前を指定します。このコンテンツ属性を指定する時は、空文字列を指定できません。
legend要素（タイトルや説明）
| カテゴリ | なし |
|---|---|
| コンテンツモデル | フレージング・コンテンツ |
| 利用可能な場所 | fieldset要素の中に、最初の要素として入れる |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | なし |
| デフォルトスタイル | legend { display:block; } |
legend要素は、fieldset要素で表されるフォーム・コントロールのグループのキャプションを表します。fieldset要素の中に最初の要素として入れます。それ以外の場所では使用できません。
label要素（フォーム・コントロールのキャプション）
| カテゴリ | フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ |
|---|---|
| コンテンツモデル | label要素を除くフレージング・コンテンツ。ただし該当のlabel要素が表すキャプションと関連がないbutton要素、input要素、keygen要素、meter要素、output要素、progress要素、textarea要素を入れてはいけない。 |
| 利用可能な場所 | フレージング・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | form（この要素を関連付けるフォームのform要素のid属性をセット） for（この要素が表すキャプションを結びつけるフォーム・コントロールのidコンテンツ属性の値を指定） |
| デフォルトスタイル | - |
label要素は、フォーム・コントロールのキャプションを表します。label要素を使って関連付けることができる要素は、button要素、input要素、keygen要素、meter要素、output要素、progress要素、select要素、textarea要素です。
■利用例
<fieldset>
<legend>セット</legend>
<label><input type="radio" name="onoff" value="1" />有効</label>
<label><input type="radio" name="onoff" value="2" />無効</label>
</fieldset>
利用例をブラウザ上でレンダリングすると次の図のようになります。
利用例のように、label要素の中にフォーム・コントロールを表すinput要素と、そのキャプションを表すテキストを入れることで、それらが関連付けられていることをセマンティクスとして表すことができます。
label要素はフォーム・コントロールのユーザビリティにも影響します。例えば、label要素を使わなければ、ユーザはラジオボタンの上にマウス・ポインターを移動させなければ選択できませんが、label要素を使うことによって、キャプションの上でも選択が可能となります。ただし、この挙動もブラウザやOSの環境の違いによって異なります。
★ forコンテンツ属性
forコンテンツ属性は、フォーム・コントロールを表す要素のid属性を指定して、label要素をそのフォーム・コントロールと関連付けるために使います。これは、label要素の中にフォーム・コントロールを表すinput要素などを入れない場合に使います。
■利用例
<fieldset>
<legend>セット</legend>
<input type="radio" name="onoff" value="1" id="onoff1" />
<label for="onoff1">有効</label>
<input type="radio" name="onoff" value="2" id="onoff2" />
<label for="onoff2">無効</label>
</fieldset>
利用例は、label要素で紹介した利用例をforコンテンツ属性を使ってマークアップしたものです。結果はまったく同じようにレンダリングされます。
★ formコンテンツ属性
formコンテンツ属性は、label要素を指定のform要素と結びつけるために使います。このコンテンツ属性には、結び付けたいform要素のid属性の値を指定します。
■利用例
<p>
<label form="fm">
ユーザ名：<input type="text" name="username" />
<label>
</p>
<form method="post" action="ss.cgi" id="fm">
<input type="submit" value="送信" />
</form>
利用例では、label要素がform要素の外にマークアップされています。label要素にformコンテンツ属性がセットされ、そのformコンテンツ属性にはform要素のid属性の値がセットされています。これにより、label要素が表すキャプションは、form要素に関連付けられます。
しかし、同じlabel要素の中にあるinput要素は対象外となるので、もし、input要素をform要素に関連付けたいのであれば、input要素にformコンテンツ属性を指定しなければなりません。
【各要素のリファレンス18】