html - tableまたはflowのフォームレイアウトのベストプラクティス？

htmlでフォームをレイアウトするベストプラクティスとは何でしょうか？具体的には、ラベル付きのフィールドセットとエラーインジケータの可能性があります。私ができることはテーブルを使うことですが、それはCSS指向のレイアウト設計ではうまくいきません。例：html - tableまたはflowのフォームレイアウトのベストプラクティス？

<table> 
    <tr> 
    <td>Name:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="NameError">*</td> 
    </tr> 
    <tr> 
    <td>Phone:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="PhoneError">*</td> 
    </tr> 
    <tr> 
    <td>Birthday:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="BirthdayError">*</td> 
    </tr> 
</table>

これはCSSとは思えませんが、この作業を正しく行うためのCSS指向のレイアウトの使い方はわかりません。

ベストプラクティスとは何でしょうか？

出典

2011-08-02 Roger Davis

@WTP - 厳密に言えば、

は、特に適切ではないので、定義リスト（それらの項目と定義のリスト）ですが、私はそれらをこのように使用しているのを見ました。 –

"ベストプラクティス"は、それが何を意味するのか（represent data）、div、spanなどの要素の組み合わせを使用して入力フォームのスタイルを設定することです。

出典

2011-08-02 16:48:02

サンプルを提供することはできますか？私はこのためにテーブルを使用することを避けようとしていますが、ここのすべてのスマートな人々は、合理的に堅牢な実用的なソリューションを考え出すことができないようです。 2番目のデータポイントとして、私が見た大規模なウェブサイトのほとんどすべてが、テーブルまたは固定幅カラムのいずれかのアプローチをとっており、どちらも理想的ではありません。 –

@Roger：フォームにdivを使用する良い例は次のとおりです。https://secure.blippy.com/signup –

@Brad Christie：例では固定幅の列を使用しています。 –

フィールドラベルに実際の<label>要素を使用します。これは使いやすさにも優れており、CSSを使用して適切にスタイルを設定します。例えば

、

<label for="name">Name</label> <input type="text" name="name">

は、その後、あなたのCSSに、あなたは LABEL、例えば、 display:blockを持つ要素とあなたの欲求の幅、および適切な clear値のスタイルを設定できます。 - tickbox /無線入力について

、それ自体が<label>要素内でなければならない入力これは、ラベル自体は、例えば、その入力を選択するためにクリック可能でなければならないことを意味する：

<label for="mycheckbox"> <input type="checkbox" name="mycheckbox"> Tick me if you dare</label>

出典

2011-08-02 16:48:27

少し具体的になりますか？私はラベルに明示的な幅を設定したくないですが、コントロールが必要なスペースを占有して、ラベルが上記のテーブルレイアウトと同じように残りのスペースを占めるようにしたい。例えば：http://jsfiddle.net/roger_davis/7h3bC/地獄のように見えます。 –

ベストプラクティス= NEVERレイアウトのためにテーブルを使用する。

青写真の960グリッドシステムのようなCSSフレームワークを試すことができます。

出典

2011-08-02 16:49:50 Cygnusx1

...表形式のデータを表示している場合を除き、構造化オプションとして

を使用することは常に適切です。レイアウトをハックするのに

タグを使用しないでください.HTMLタグを意図どおりに使っても問題ありません。

の表形式のデータを提示することは、構造とスタイルの分離に違反しません。あなたは消費者に「これは構造化された表形式のデータです！」と伝えています。 –

はい。同意する。だから私はレイアウトのために言った-----一般的なレイアウトの面で。 – Cygnusx1

私たちは同じページにいます - 私はあなたの答えを広げていただけで、それに同意していません。 –

フォームは表形式のデータであると主張することができるので、表を使用できます。 Davidが述べているように、主な問題は、適切なLABELタグを使いたいということです。

あなたの例では、CSSを使用してテーブルを使用することで何が得られるか分かりません。

出典

2011-08-02 16:50:27

悪魔の主張者は、CSSの代わりにテーブルを使うことで、同じマークアップを複数のウェブサイトに配備するという点でより強固なレイアウトを得ていると言います。 divや浮動小数点数を使用すると、同じ種類の堅牢な非テーブルレイアウトが必要な場合は、指定された幅を指定する必要があります....私はいつも、特定のサイトに合うようにCSSを調整します。一般的な "one size fits all"悲しいことに... – Funka

ha ... oops。私は "あなたがテーブル上でCSSを使うことで何が得られるか分からない"と言っていました。少なくとも与えられた例では、テーブルが最も理にかなっていると思います。 –

あなたのフォローアップの質問に私の答えを投稿すると、ここで重複してしまう可能性があります。

私はこの上のブラウザのサポートは、FF4で、テストされてどのように良いかわからない：http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm"> 
    <div class="tableRow"> 
     <div class="tableCell"> 
      <label for="mycheckbox"> Tick me if you dare</label> 
     </div> 
     <div class="tableCell"> 
      <input type="checkbox" name="mycheckbox" id="mycheckbox"> 
     </div> 
    </div> 
    <div class="tableRow"> 
     <div class="tableCell"> 
      <label for="mytext"> Give me some text test test</label> 
     </div> 
     <div class="tableCell"> 
      <input type="text" name="mytext" id="mytext"> 
     </div> 
    </div> 
</div> 


div#tableForm { 
display:table; 
} 
div.tableRow { 
    display:table-row; 
} 
div.tableCell { 
    display:table-cell; 
    width:inherit; 
}

はい、私は知っている、私はdivを使用してテーブルを作成しました。しかし、これはきれいにアクセス可能であり、意味的に適切であるということです。

編集：は固定幅が唯一の方法であるIE7では悲惨に失敗しますが、8と9はOKと思われます。

Edit2：ラベル/フィールドを切り替え、右揃えを設定します。http://jsfiddle.net/shanethehat/7h3bC/12/。この時点で、マークアップは少し重いクラスになっています。 :first-childは、leftクラスを使用する代わりに、IE8を犠牲にして行われます。

出典

2011-08-03 00:03:23 shanethehat

私は皆さんについて知りませんが、フォームレイアウトにはあまり使われません。ここで

はここ形式の簡単なログ（なしレイアウトマークアップすなわちdivタグ、テーブルなど）

<form method="post"> 
    <label>Username</label> 
    <input type="text" name="username" /> 

    <label>Password</label> 
    <input type="password" name="password" /> 

    <input type="submit" name="Log In" /> 
</form>

ためのマークアップは、CSSは、フォームここ

label,input{float:left} 
label,input[type="submit"]{clear:left}

ためです結果である

The rendered result of the above HTML and CSS

驚くべきことは次のとおりです。

CSS
のマークアップ
不足の欠如柔軟性

あなたはCSSを見れば、label要素は左クリア（および左浮かべ）されています。ラベルがその仲間inputと浮動することを意味します。ただし、すべてlabelは新しい行になります。

これで余分な入力を非常に簡単にできます。入力

後でも検証メッセージは、我々はそれが本当にシンプル:)

ある

The rendered result of the above HTML and CSS

を取得し、このCSSを用いて、実施例

<form method="post"> 
    <label>Name</label> 
    <input type="text" name="username" /> 

    <label>Password</label> 
    <input type="password" name="password" /> 

    <label><abbr title="Date of Birth">D.O.B.</abbr></label> 
    <input type="text" name="dob_day" /> 
    <input type="text" name="dob_month" /> 
    <input type="text" name="dob_year" /> 

    <input type="submit" name="Log In" /> 
</form>

ため

label,input{float:left} 
label,input[type="submit"]{clear:left} 
input[name^="dob_"]{width:44px;margin:2px} 
label{width:70px}

をこの形を取ります

このコンセプトを使用すると、膨大な数の可能性が生まれ、レイアウト用にテーブルを使用する必要はありません。

出典

2013-11-26 15:36:36

html - tableまたはflowのフォームレイアウトのベストプラクティス？

答えて

関連する問題