22

divタグはタグではなく、レイアウトの目的で使用する必要があると聞き続けていtableます。それで、それはフォームレイアウトにも当てはまりますか？フォームレイアウトはまだレイアウトであることは知っていますが、sを使用してフォームレイアウトを作成するには、さらに多くのとdivが必要なようです。それを念頭に置いて、フォームレイアウトは代わりにタグを使用する必要がありますか？htmlcssdiv

4

12 に答える 12

23

はい、フォーム レイアウトには適用されます。フォームに構造を追加するために特別に存在する FIELDSET や LABEL などのタグもあるため、DIV を使用するだけの問題ではないことに注意してください。非常に最小限の HTML でフォームをマークアップし、残りの作業は CSS に任せることができるはずです。例えば：

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>
于 2008-09-20T21:41:21.160 に答える
13

フォームを適切なHTMLとCSSでうまくレイアウトするのは「難しい」というのは神話だと思います。CSSがレイアウトに対して提供する制御のレベルは、これまでの不格好なテーブルベースのレイアウトをはるかに超えています。2006年にさかのぼるこのSmashingMagazineの記事が示すように、これは新しいアイデアではありません。

私はフォームで次のマークアップのバリエーションを使用する傾向があります。CSSに一般的な.formスタイルがあり、テキスト入力、チェックボックス、選択、textareasなどのバリアントがあります。

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}
<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

テーブルは悪ではありません。表形式のデータを表示する必要がある場合は、これらが断然最良のオプションです。フォームIMHOは表形式のデータではなく、フォームであり、CSSは、フォームを好きなようにレイアウトするのに十分なツールを提供します。

于 2008-09-20T21:50:21.717 に答える
5

単純な行列グリップタイプのレイアウトが必要な場合は、テーブルを使用しても罪悪感を感じることはありません。CSSではないという理由だけで、誰もがその「悪いデザイン」と呼ぶことができるのかわかりません。私は多くの悪いCSSベースのデザインを見てきました。私はCSSが大好きで、従来のネストされたテーブルレイアウトよりも多くの点ではるかに優れていると思いますが、最も効果的で、保守が最も簡単で、より重要で影響力のある決定に進むことができます。

于 2008-09-20T21:40:32.940 に答える
3

フォームを可能な限りアクセス可能にし、意味的に正しいものにするために、次の形式を使用します。

<fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
</fieldset>
于 2008-09-20T22:08:10.380 に答える
3

一般的な原則は、意図するセマンティック コンテンツを最もよく伝える HTML 要素を使用し、そのセマンティック コンテンツを視覚的に表現するために css に依存するということです。この原則に従うことで、サイト全体の視覚的な変更が容易になり、検索エンジンの最適化、マルチデバイス レイアウト、アクセシビリティなど、多くの本質的なメリットが得られます。

簡単に言えば、やりたいことは何でもできますが、ベスト プラクティスとしては、表形式のデータを表すためにのみテーブル タグを使用し、代わりに、表現しようとしているものを最もよく伝える html タグを使用することをお勧めします。最初は少し難しいかもしれませんが、このアイデアに慣れると、なぜ他の方法をとったのか不思議に思うでしょう。

フォームで何をしようとしているかにもよりますが、特に css のカスケード プロパティに依存している場合は、セマンティック マークアップと css を使用するのにそれほど多くのマークアップは必要ありません。また、サイト内の多くのページに同じフォームがいくつかある場合、セマンティック アプローチは、コーディングと保守の両方ではるかに効率的です。

于 2008-09-20T21:41:55.807 に答える
3

CSSがドラッグになるまで、私は主にCSSを使用します。たとえば、css よりもテーブルを使用して 3 つ以上の列 (3 セットのラベル + フォーム フィールド) のフォームを作成する方がはるかに簡単です。純粋な css を使用してすべての主要なブラウザーでレイアウトを適切に表示することができず、それを機能させるのに多くの時間を費やしていました。だから私はそれをねじ込み、テーブルを使って簡単にやりました。テーブルは悪くありません。

于 2009-02-16T20:29:32.177 に答える
2

灰色の領域です。マークアップのすべてが明確に定義された境界を持っているわけではありません。これは、個人的な好みを使用して判断を下すことができる1つのケースです。データを整理するという考え方には完全には適合しませんが、セルは複数の軸にまたがって関連付けられています。これが、何かがテーブルに収まるかどうかを判断するために使用する経験則です。

于 2008-09-20T21:40:33.457 に答える
1

これらのフォームレイアウトの質問であまり説明されていないことが1つあります。フォームをレイアウトするためにテーブルを選択した場合（回答の1つに記載されているように、左側にラベルがあり、右側にフィールドがあります）、そのレイアウトは次のようになります。修繕。職場では、最近、アラビア語でWebアプリの「概念実証」をすばやく行う必要がありました。フォームのレイアウトにテーブルを使用していたアプリは基本的にスタックしていましたが、CSSファイルの約10行を変更することで、すべてのページのすべてのフォームフィールドとラベルの順序を逆にすることができました。

于 2008-09-20T23:18:27.120 に答える
1

divよりもtableを使用してテーブルをレイアウトする方が確かに簡単ですが、テーブルは何かを意味することになっていることに注意してください。テーブルは、特定の順序で画面にボックスを配置するよりも、ユーザーが見ることができるように通常の方法でデータを表示します。 。一般的に、フォームレイアウトでは、フォーム要素の表示方法を決定するためにdivを使用する必要があると思います。

于 2008-09-20T21:32:42.150 に答える
0

フォームは「プレゼンテーション」ではありません。データを要求します。通常、データは提示しません。表形式のデータでは、多くのインライン編集を使用しています。明らかに、私はデータセルを使用します-プレゼンテーションから入力に切り替えるときの入力要素のホルダーとしてtd。

于 2008-09-20T21:54:45.513 に答える
0

私がここで見た答えのほとんどは適切に思えます。私が追加する唯一のことは、特に無関心者またはマット氏に使用すること<dl>/<dt>/<dd>です。これらは意味的にリストを表していると思います。

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

これらのスタイルを変更したいかもしれませんが、これは意味的に何が起こっているかを示しています。つまり、「用語」( <dt>) と「定義」( <dd>) のリストがあり、用語はラベルであり、定義はユーザーが入力した値です。 .

于 2008-09-21T03:51:49.383 に答える
0

フォームが表形式 (たとえば、左側にラベル、右側にフィールド) でレイアウトされている場合は、テーブル タグを使用してください。

于 2008-09-20T21:45:20.590 に答える