2012-05-10 10 views
0

私はASP.NETを使用しています。これまで私はいつもテーブルを使って入力を行い、すごくよく見ていました。しかし、しばらく前に、私はそれがテーブルではないことを読んだ。だから、私は知っている、私のWebFormsに入力フィールドを配置する適切な方法は何ですか、しかし、彼らは素敵な、つまり、左揃えのコントロールの横にリジッドアライメントされたラベル、次の行、ラベル、およびコントロールは、前のコントロールに揃えられています。HTMLを使用してデータを入力する適切な方法

私は考えることができる唯一のことは、ラベル/コントロールごとに1つのdivのですが、それは奇妙な感じ...

また、私のコントロールが<form>タグ内にすべきですか?私は決してそれらを使用していない。

答えて

2

意味のある表を使用してください。ラベルの列と入力の列を持つフォームは理にかなっています。

正直言って、「テーブルレスレイアウト」全体の動きは、他のものよりももっと流行していると思います。私は人々が "テーブルを使わなかった"というよりも、HTMLタグの異なるテーブル構造を作り直すために無数の時間を費やしているのを見ました。それはちょうど愚かなものです、なぜ、すでに完璧に動作しているものを再現するのですか?

テーブルを使用したときの問題は、テーブルを使用してページをレイアウトするときに発生します。たとえば:

フォームを構築するためのテーブルを使用して、この

<body> 
    <table> 
     <tr class="header"><td><!-- header content --></td></tr> 
     <tr class="content"><td><!-- page content, possibly with a two column table for sidebar --></td></tr> 
     <tr class="footer"><td><!-- footer content --></td></tr> 
    </table> 
</body> 

をしないでください、しかし、完璧な理にかなっています。

はい、フォームに関連するすべてのコントロールは、formタグ内にある必要があります。

+0

フォームタグの使い方は?単に「ここに入力が来る」と言っているのでしょうか、それともブラウザ/サーバは何かをしていますか? –

+1

'form'タグは、ブラウザが入力要素を送信する場所(' action')、送信する要素を入力する( '含まれた入力')、およびそれらの要素をどのように送るか( 'method')をブラウザが判断するのに役立ちます。 'submit'または' image'入力が押されると、ブラウザは親フォーム要素を調べて何をすべきかを把握します。 'form'タグは、jQueryの' serialize'関数を使うときにも便利です。 – jeremysawesome

1

テーブルを使用してアイテムを配置する際に問題はありません。また、CSSを使用して配置することもできますが、ブラウザ間のサポートに対処する必要があります。個人的には、私はこの種のもののためにテーブルを使用します。

0

あなたが書いていることは、semantic HTMLと関連していると思います。 <TABLE>タグはもともとは表形式データのレンダリングを意図していましたが、一般的なレイアウトで使用するように選択されています。これは、HTMLとCSSが以来、レイアウトの選択肢が増えてきたにもかかわらず、今日まで持続しています。

テーブルは固定グリッドレイアウトでわかりやすくあります。浮動小数点数は理解するためにもう少し作業が必要です。

意味のあるHTMLを書くために多くの人が入力の周囲に<ul><li>というタグを使用します。フォーム入力はある意味でリストとして見ることができるためです。

<FORM>タグの使用に関しては、AJAX GETSとPOSTSの普及が今では必ずしも必要ではありませんが、私は通常、より意味のあるコードを作成する手段と開発者の明快さを向上させる手段それに続くコンテナとして使用するので、jQuery(またはあなたの選択したライブラリ)セレクタを使用する必要があるときに、子の入力に対応することができます。

+0

なぜdownvoteですか? – RedFilter

0

表は、Webページに表形式のデータを表示する場合にのみ使用してください。それらはレイアウトに使用すべきではありません。

代わりに、divタグを使用してページのさまざまな要素をレイアウトする必要があります。例えば:

<div class="Labels"> 
    <label for="FullName">Name: *</label> 
</div> 
<div class="Fields"> 
    <input class="text" type="text" name="FullName" id="FullName" /> 
</div> 
あなたは、あなたがページ上でそれらをしたい様々な要素を配置するページレイアウトのためのCSSを使用する必要があり、およびCSSのfloatを使っへ

ルックなどお互い一緒に要素を配置する

レイアウトにCSSを使用するのが初めての方にお勧めです。

関連する問題