html - 詳細ビューと CSS 準拠

Question

テーブルを使用して HTML で詳細ビューのレイアウトを作成したくないというのは、まだ苦労しています。私は人々によっていくつかのサンプルを実行し、いくつかの意見を得たい.

詳細ビューの html に何を表示したいですか? クロスブラウザのハードルが最も低いのはどれですか? 最も準拠しているのはどれですか? 右揃えの静的な幅のラベル列がある場合、どちらが見栄えがしますか?

詳細ビューとは、次の画像のようなものを意味します。

テーブル

<table>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
</table>

フィールドセット

<fieldset>
<label /><input type="textbox" /><br />
<label /><input type="textbox" /><br />
</fieldset>

分割

<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>


<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>

リスト

<ul>
<li><label /><input type="textbox" /></li>
<li><label /><input type="textbox" /></li>
</ul>

score 3 · Accepted Answer

これらのアプローチは相互に排他的ではありません。個人的には、少し混同します。

<fieldset>
  <label for="name">XXX <input type="text" id="name"/></label>
  <label for="email">XXX <input type="text" id="email"/></label>
</fieldset>

ただし、右揃えのラベルを取得するには（視覚的にスキャンするのが難しいため、個人的には避けたいことです）、入力の周りにないテキストの周りに追加の要素が必要になるため、

<fieldset>
  <div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div>
  <div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div>
</fieldset>

score 0 · Accepted Answer

実際、単純なテキストボックスのみの入力の場合は、フィールドセットオプションがうまく機能することがわかりました。

ただし、通常、単一の「行」に複数のコントロールを配置するため、div ベースのレイアウトを使用します。これにより、入力、バリデータ、およびすべてを単一の要素に配置できます。

score 0 · Accepted Answer

フォームは CSS で扱うのが最も難しいものの 1 つだと思います。なぜなら、厳密な制御が必要な場合は、多くの場合、古い学校の HTML が面倒を見てくれる CSS を追加する必要があるからです。ただし、統一された自然な処理を受け入れる場合は、コンテンツとプレゼンテーションを分離する最もクリーンな方法は次のとおりです。

form { margin: 0; padding: 0; }
fieldset { whatever treatment you want }
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ }
#details label { float: left; width: 190px; text-align: right; }
#details input { margin-left: 200px; }

<form>
  <fieldset id="details">
    <div id="item1div">
      <label for="item1">item1 label</label>
      <input type="" id="item1" />
    </div>
    <div id="item1div">
      <label for="item1">item1 label</label>
      <input type="" id="item1" />
    </div>
  </fieldset>
</form>

score 0 · Accepted Answer

CSS:

label{
  float:left;
  text-align:right;
  width:115px;
  margin-right:5px;
}
input{
  margin-bottom:5px;
}

HTML:

<label for="username">UserName:</label><input type="text" id="username" /><br />
<label for="username">UserName:</label><input type="text" id="username" /><br />

明らかに、div を追加するか、その周りにフォームを使用して、フォーム全体の背景色などを取得できます。

score 0 · Accepted Answer

私は div を含むフィールドセットを好みます。ラベルの div は float:left; です。width:20em とコンテンツ div には、たとえば 21em または 22em の固定左マージンがあります。ただし、それを機能させるには、明確な div を含めることを忘れないでください。

<fieldset>
   <div class="labels"><label for="name">Name</label></div>
   <div class="data"><input ....</div>
   <div style="clear:both"/>
// repeat for next fields
</fieldset>

score -1 · Accepted Answer

表を使用してフォームを表形式でフォーマットできますが、 CSSを使用してフォームにスタイルを追加できます。CSSの純粋主義者はおそらくそうすべきではないと言うでしょうが、現実には、多くのブラウザはCSSフォームを異なる方法でレンダリングすることが多く、アクセシビリティの問題を引き起こす可能性があります。テーブルベースのフォームは、ブラウザ間ではるかに一貫性があり、アクセスもはるかに簡単です。

html - 詳細ビューと CSS 準拠

6 に答える 6

Related

Reference