label-over-fieldフォームをスタイルする最も良い方法は？

Question

は、あなたが、私はいくつかのコミュニティは自分自身のスタイルを有するまだ私が見つけるたびに、このためのHTML/CSSを行うための「正しい」やり方を受け入れたよりも多くはありません確信している以下のレイアウト

|-----------------------------------------------------------| 
| Street Address 1    Street Address 2 
| _____________________   _____________________ 
| |_____________________|  |_____________________| 
| 
| City    State     Zip 
| ______________ ____  _____________________ 
| |______________| |___^|  |_____________________| 
| 
|-----------------------------------------------------------| 

を持つフォームをしたいと言いますなど、私は幅でいじるんだ、それのようなもの、浮く、for=""を使用して対ネストされたラベル、

一般的に受け入れられて、良い何である（それはちょうどあなたの意見ではありませんという意味）HTMLとCSSの作成に近づき、それは意味的に意味があり、メンテナンス可能であり、ブラウザで動作するサイズ変更？

編集： もちろん、あらゆる状況で機能する1つの手法はないことがわかります。しかし、フォームの作成を開始するときには、何らかの基準（何らかのガイダンス）から始めます。これは、私が見つけられなかったことと私が探しているものです。

Answer 1

私は確信していませんが、各ラベルと入力を1組のタグで組み合わせることはできません。また、適切なCSSを使用して、必要な方法で作成できますか？

Answer 2

私は通常、divのラベル/入力を組み合わせて、それらを単一の単位として扱うことができるコンテナ（通常はフィールドセット）にグループ化します。一貫した幅、浮動小数点数、マージンなどを持たせることができます。

私は、ラベルと入力のサイズを一貫して適用する際にもクラスを使用しています（小、中、大）。

それは次のようになります。

<fieldset> 
<div class="medium"> 
<label for="street1">Street Address 1</label> 
<input id="street1" /> 
</div> 
<div class="medium"> 
<label for="street2">Street Address 2</label> 
<input id="street2" /> 
</div> 
</fieldset> 

<fieldset> 
<div class="small"> 
<label for="city">City</label> 
<input id="city" name="city /> 
... 
</fieldset> 

あなたが本当に感じてambitiuosされている場合は、時間をかけて、あなたが作成することができ、独自の「究極のパッケージ」あなたのプロジェクトをジャンプスタートするために使用することができますlike Simon Collison。

Answer 3

以下のリンクに記載されているテクニックは、クリーンでセマンティックです。

labelタグは、対応する入力要素を囲みます。

fieldsetタグは入力要素のグループを囲みます。

ulおよびliタグは、行ごとにフォーム要素を整理します。

その後、視覚的にすべてが視覚的に調整され、CSSで完成します。

http://www.slideshare.net/AaronGustafson/learning-to-love-forms-web-directions-south-07

注：スライドの一部の下部がクリップされます。プレゼンテーション全体は、何も切り取られていないOpenOfficeドキュメントとしてダウンロードすることができます。

Answer 4

Twitter Bootstrapは積み重ねられたフォームコンポーネントを持ち、developed as a style guide and toolkitでした。これはおそらくベストプラクティスの妥当な実例です（少なくとも特定のデザイナーにとっては、明らかにどこでもユースケースごとではありません）。

フォームの作成で最も一貫しているのは、ラベルと入力の両方をラベルタグに囲み、クリック可能な領域を増やしてフォームをより使いやすくすることです。