[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
フォームのラベルとフィールドをテーブルを使わずに整列させる
フォームのラベルと入力フィールドを整列させるには、テーブルダグを使用するのが一般的ですが、スタイルシート（ＣＳＳ）でも実現可能です。
完成例
以下のサンプルは、ラベルとテキスト入力フォームから成るシンプルなフォームです。
ＨＴＭＬソースコードサンプル
ラジオボックス、チェックボックス、プルダウン等の他の入力フォームにも同様に整列させることが可能ですが、ここでは理解のために単純なフォームのサンプルを使用しています。
<form>
<label for="name">お名前</label>
<input id="name" name="name"><br />
<label for="address">住所</label>
<input id="address" name="address"><br />
<label for="phone">電話番号</label>
<input id="phone" name="phone"><br />
</form>
スタイルシートサンプル
ラベルと入力項目は前後に改行が入らないインラインレベル要素なので、ＣＳＳのディスプレイプロパティでブロックレベル要素と同様の表示に変更した上で、フロートプロパティで左に回り込ませます。1行毎にフロートを解除するため、クリアプロパティを設定した<BR>タグを各入力フィールドの最後に追加します。
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
padding-right: 15px;
}
br { clear: left; }
