HTMLでフォームを表示する際にtableタグを使うのは仕様が悪いのでしょうか？

StackOverflow https://stackoverflow.com/questions/109488

  •  01-07-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

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

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

他のヒント

優れた HTML と CSS を使用してフォームを適切にレイアウトするのは「難しい」というのは迷信だと思います。CSS によってレイアウトを制御できるレベルは、これまでの不格好なテーブルベースのレイアウトをはるかに超えています。これは新しいアイデアではありませんが、 このスマッシングマガジンの記事 はるか昔の2006年のショーから。

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

.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>

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

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

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

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

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

フォームをできるだけアクセスしやすく、意味的に正しくするために、次の形式を使用します。

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

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

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

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

これらのフォーム レイアウトの質問で議論されているのをあまり見かけないことの 1 つは、フォームをレイアウトするテーブルを選択した場合 (回答の 1 つで述べられているように、左側にラベル、右側にフィールドがある)、そのレイアウトは次のとおりです。修理済み。最近、職場で Web アプリの簡単な「概念実証」をアラビア語で行う必要がありました。フォーム レイアウトにテーブルを使用していたアプリは基本的に動かなくなりましたが、CSS ファイルの約 10 行を変更することで、すべてのページのすべてのフォーム フィールドとラベルの順序を逆にすることができました。

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

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

ここで見た答えのほとんどは適切だと思われます。特に無関心な人やミスターに付け加えたいことはただ一つ。マットが使うのは <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>)、用語はラベル、定義はユーザーが入力した値です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top