○視覚的には、フォーム・コントロールとラベルを整理できる良い方法で、特に大きい複雑なフォームには向いている。
○シンプルなフォームにテーブルを使用するのは無駄に思われる。
<form action="/path/to/script" method="post">
<table>
<tr>
<th>Name:</th>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<th>Email:</th>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<th> </th>
<td><input type="submit" value="submit" /></td>
</tr>
</table>
</form>
★複雑なフォームのレイアウトを制御するのにCSSに頼れば、多くの<span>や<div>タグを追加する必要があり、テーブルを使うよりソースが肥大化する。
シンプルな場合は、テーブルを使用しない方法を選ぶほうがよい。
○シンプルなマークアップにより、テキストブラウザや小さな画面のデバイスにおいてもそれなりに表示される。
○視覚的に、<br />タグを使用するだけなので、窮屈なレイアウトになる。
<form acion="/path/to/script" method="post">
<p>
Name: <input type="text" name="name" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" value="submit" />
</p>
</form>
窮屈さを改善するために、<input>要素に多少のマージンを追加するスタイルを適用する。
input {
margin: 6px 0;
}
○シンプルなマークアップにより、テキストブラウザや小さな画面のデバイスにおいてもそれなりに表示される。
○さまざまな長さのラベルやコントロールを考慮しており、整列にまつわる問題がない。
○重要なアクセシビリティ機能がある。
デフォルトのマージンを上書きするスタイルを設定する
#thisform p {
margin: 6px 0;
}
★ラベルとフォーム･コントロールのグループが<p>タグでマークアップされており、ラベル要素の後ろで改行により項目を区切っているため、ラベルの長さが異なっていてもフォーム･コントロールが整列する。
★<label>要素について
−<label>タグを使用してラベルと対応するフォーム･コントロールを関連付ける。コントロールの種類は問わない。ここでは、「Name:」および「Email:」という見出しを、個々の情報が入力されることになるテキスト入力ボックスと対を成すよう、それぞれ<label>タグでマークアップする。
−<label>タグのfor属性値として、対応しているフォーム･コントロールのid属性値を追加することとなり、スクリーンリーダーはフォーム･コントロールに対応したラベルをレイアウトとは関係なく適切に読み上げることができるようになる。
★ラベルをフォーム･コントロールのid属性値と関連付けることで、フォームに構造を付与する。
★<label>を使用することにより、チェックボックスまたはラジオボタンのクリッカブルエリアが広がる。
<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" /></p>
<p><label for="email">#mail:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="checkbox" id="remenber" name="remenber" /><label for="remenber">Remember this info?</label></p>
<p><input type="submit" value="submit" /></p>
</form>
○構造化マークアップはテキストブラウザや小さな画面のデバイスにおいてもそれなりに表示される。
○重要なアクセシビリティ機能がある。
○ラベルとフォーム･コントロールはCSSを使用して同じ行にも別々の行にも配置できる。
★デフォルトではほとんどの視覚系ブラウザが<dd>要素を各行でインデントして表示するため、<p>または<br />タグを追加したりCSSを使うことなしに、読みやすいレイアウトでブラウジングすることができる。
<dd>要素のデフォルトインデントを取り除く
form dd {
margin: 0;
}
テーブルを使用したフォーマットの方法Aのようなレイアウトも、フォーム内の<dt>要素をフローとさせることで実現できる。
form dd {
margin: 0;
}
form dt {
float: left;
padding-right: 10px;
}
<dt>をフローとさせることで<dd>タグに含まれるフォーム･コントロールは右に整列するが、完全に揃いはしない。
・実装が極めて簡単：tabindex属性と数値を追加するだけ。
・運動障碍のユーザを支援：フォームを完全にキーボードで操作できるため。
<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<lable for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" tabindex="4" /></p>
</form>
・運動障碍のあるユーザに役立つばかりでなく、他のユーザにとっても便利。AltキーやCtrlキー（MacユーザならCommandキー）とaccesskeyで指定したキー（ここでは「9」）を同時に押す。
<form action="/path/to/script" id="thisform" method="post">
<p><label for="name" accesskey="9">Name:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<lable for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" tabindex="4" /></p>
</form>
<input type="text" id="name" name="name" tabindex="1" size="20" />
このsize="20"の20は、ピクセルではなく20字のことであるため、ブラウザのフォーム･コントロール用のデフォルト文字サイズによって、コントロールの実際の幅が異なる可能性がある。
CSSを使用すると、テキスト入力コントロールおよび他のフォーム・このトロールの幅をピクセル単位で設定できる。
すべての<input>要素を200ピクセルの幅にするには、フォームに割り当てるid（この場合はthisform）を利用する。
#thisform input {
width: 200px;
}
submitボタンも<input>要素なので、同じ値が適用されてしまうことを防ぐには、id属性を使用して「Name」および「Email」のこのトロールのみに適用されるようにする。
#name, #email {
width: 200px;
}
<label>を使用してフォントをカスタマイズ
#thisform label {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #600;
}
フォーム内のすべてのテキストに一般的なスタイルを適用し、その後で具体的にラベル固有のスタイルを適用して、フォーム･コントロールを独自にカスタマイズすることもできる。
#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}
#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #600;
}
<form action="/path/to/script" id="thisform" method="post">
<fieldset>
<legend>Sign In</legend>
<p><label for="name" accesskey="9">Name:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<lable for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" tabindex="4" /></p>
</fieldset>
</form>
#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}
#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #600;
}
#thisform fieldset {
border: 1px solid #ccc;
padding: 0 20px;
}
★fieldsetの上辺と底辺のパディングを0にしているのは、フォームラベルとコントロールが<p>タグでマークアップされているため、上辺と底辺にはすでに十分なパディングがあるからである。
3Dエフェクトのために、背景を明るいグレーに設定し、<fieldset>要素に使用したボーダーにマッチする1ピクセルのボーダーを<legend>全体の周りに追加し、影をつける効果として底辺と右辺のボーダーの色を若干暗いグレーになるようスタイルを上書きする。
#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}
#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #600;
}
#thisform fieldset {
border: 1px solid #ccc;
padding: 0 20px;
}
#thisform legend {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 90%;
color: #666;
background: #eee;
border: 1px solid #ccc;
border-bottom-color: #999;
border-right-color: #999;
padding: 4px 8px;
}