web-dev-qa-db-ja.com

フォームにテーブルを使用することは許容されますか？それとも、divを使用する方が正しいですか？

フォームにtablesを使用してもよいかどうか疑問に思っています。

厳密に言えば、名前と値のペアは表形式のデータですよね。また、フォームは、ユーザーがカスタマイズできる名前と値のペアのセットにすぎません。それで、この場合、tablesを使用するのは正しいですか？または、CSSでスタイル設定されたdivsを使用する必要がありますか？

cssformshtmlhtml-table
33
Eric

どちらも正しいです。

いくつかの異なるレイアウトを作成できるので、いくつかのdiv/liを使用することをお勧めしますが、tablesのformsは嫌われません。

実際、デフォルトでは、Djangoはテーブル形式のフォームを提供します。

19
Esteban Küber

フィールドセットを試す

私は、フィールドを論理的な<fieldset>sに分割してそれぞれ1つの<legend>にすることを好みます。

  • コードがすっきりしています
  • デフォルトのフォーマットはユーザーフレンドリーです（特に凡例の表示方法が好きです）
  • CSSでスタイリングするのは簡単です

これがコード例です。ラベルのfor属性を使用すると、そのラベルをクリックして、指定した入力にフォーカスを移動できることに注意してください（id属性と一致します）。

<form>
  <fieldset>
    <legend>Wombat Statistics</legend>
    <ol>
      <li>
        <label for="punchstrength">Punch Strength</label>
        <input id="punchstrength" name="punchstrength" />
      </li>
      <li>
        <label for="beverage">Favorite Beverage</label>
        <input id="beverage" name="beverage" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>Questions That Are Too Personal</legend>
    <ol>
      <li>
        <label for="creditcard">What is your credit card number?</label>
        <input id="creditcard" name="creditcard" />
      </li>
      <li>
        <label for="gullibility">Did you actually fill that in?</label>
        <input id="gullibility" name="gullibility" />
      </li>
    </ol>
  </fieldset>
</form>

基本的なレイアウトの場合、次のようなものを使用できます。

label, input, textarea, select { 
  display: inline-block; vertical-align: top; width: 30%; 
}

より詳細なチュートリアルについては、 この記事 を参照してください。

27
Nathan Long

フォームは表形式のデータではありません。

CSSを使用してフォーム要素をレイアウトするのはとても簡単なので、テーブルでマークアップを難読化する価値のあるものは見当たりません。個人的には、CSSを使用したフォームのレイアウトは、現時点でテーブルを使用するよりも簡単であることがわかりました。例えば：

HTML：

<fieldset>
  <label for="FirstName">First Name</label>
  <input type="text" id="FirstName" />

  <label for="LastName">Last Name</label>
  <input type="text" id="LastName" />

  <label for="Age">Age:</label>
  <select id="Age">
    <option>18-24</option>
    <option>25-50</option>
    <option>51-old</option>
  </select>
</fieldset>

CSS：

fieldset {
  overflow: hidden;
  width: 400px;
}

label {
  clear: both;
  float: right;
  padding-right: 10px;
  width: 100px;
}

input, select {
  float: left;
}

そのテーマの単純なバリエーションを使用して、とにかくテーブルよりも実際に操作しやすい、見栄えがよく、アクセスしやすいフォームを作成できます。私はその基本的なアプローチを使用して、かなり複雑な複数列のデータ入力フォームにまで増やしました。

12
Dave Ward

テーブルを使用できます。そのような単純な。

6
Virat Kadaru

はい

はい、テーブルを使用できます。 Divは、ページレベルのレイアウトのテーブルを置き換えることになっていますが、テーブルの代わりにはなりません。問題が解決するたびに、ページ内で使用してください。

4
DigitalRoss

あなたが想像できる最大の反テーブルの人になった後、私が最終的にそれは問題ではないことに気づき始めました。最も速いものを使用してください。もちろん、テーブルをネストしている場合は問題がありますが、一般的に、フォームをレイアウトする簡単な方法は考えられません。一日の終わりに、クライアントまたは訪問者は、あなたがテーブルを使用したのかリストを使用したのかについて2つの意見を述べますか？

3
John Everden

エリック、フォームデータは表形式のデータであり、意味的にはテーブル内に存在できることに同意します。

これは、私が単純なデータ入力画面に使用する方法です。

私は通常divを使用しませんが、おそらく順序付きリストを使用します

<ol>...</ol>

フォームはアイテムの順序付きリストでもあるため。ただし、この方法のスタイルを設定するのは非常に難しいと思います。

あなたはおそらく答えで50/50の分割を得るでしょう....

1
RR.

はい、いいえと言う人もいます。

決定する方法は次のとおりです。表形式のデータが本当に含まれている場合は、少なくともWCAGによれば、summary属性が必要です。 summary属性は、スクリーンリーダーユーザーの利益のためにテーブルの目的と構造を説明する必要があります。そのような属性を書けますか？もしそうなら、あなたはそうするべきであり、あなたのテーブルにそれを含めるべきです。できない場合は、おそらく実際にはテーブルではないので、フォームをレイアウトする別の方法を探す必要があります。

1
Alohci

スクリーンリーダーには（使いやすさのために）「for」属性のラベルを使用することが重要です。

それが私がフィールドセットを使用する理由です

0
Dan dot net

「csspurity」を探している場合は、次のようなものを使用する必要があります。

<form action="http://localhost/Zoleris/" method="post" accept-charset="utf-8">
    <ul class="form">
      <li>
        <label for="username">Username</label>
        <input type="text" id="username" name="username">
      </li>

      <li>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
      </li>

      <li>
        <input type="checkbox" id="remember_me" name="remember_me" >
        <label class="checkbox" for="remember_me">Remember my username</label>
      </li>

      <li>
        <a href="forgot.php">Forgot your password?</a>
      </li>

      <li>
        <button type="submit" id="btnLogin" name="btnLogin" class="button positive" style="float:right"><img src="tick.png">Login</button>
        <button type="submit" id="btnRegister" name="btnRegister" style="float: left"><img src="cross.png">I need an account!</button>
      </li>
    </ul>
</form>
0
ryeguy

定義リストがより意味的に適切であると思われるのに、なぜフォームに順序付きリストまたは順序なしリストを使用するのか理解できませんでした。

<fieldset>
  <dl>
    <dt><label for="definition">Definition:</label></dt>
    <dd><input type="text" name="definition" /></dd>
  </dl>
</fieldset>

それらはフォーマットに関して少し扱いに​​くいかもしれませんが、大多数のフォームのリストやテーブルよりも常に私にははるかに理にかなっています。

そうは言っても、テーブルは編集可能な表形式のデータには不適切ではないようです。

0
Shabbyrobe

好きなものを使用できます。これは、htmlフォームのレイアウトを作成するための新しい標準であり、デザインにテーブルタグを使用しないルールのようなものですが、データのテーブルを表示するためにテーブルを使用しても問題ありません。 （グリッド）

0
Omu

フォームは表形式であるか、表形式であると感じることができますが、表はセマンティクスとともに「プレゼンテーション」を意味します。テーブル内のフォームをマークアップすると、デザインが2つのフィールド/入力レイアウトにロックされる傾向があります（テーブルのCSSのオーバーライドに時間を費やしたくない場合）。さらに、携帯電話などの小さな画面を考慮しようとしている場合は、スタイルをオーバーライドする必要がありますする必要があります。

さらに、スクリーンリーダーは、このフォームを単純にではなく、"行1、列1、ラベル、 '名前'、列2、入力、 '名前' ..."でオーバーアナウンスします。 "入力、 '名前' ..."

私の推奨事項は、DIV、FIELDSET、またはUL/LIを使用することです。これにより、プレゼンテーションはCSSの手に委ねられ、正確にその場所に配置されます。

0
Jason T Featheringham