意味的に正しいHTMLチェックボックスリスト

Question

次の形式で表示したいHTMLチェックボックスリストがあります：

Click all that apply:
                                 Title A      Title B

Option 1                         [  ]         [  ]
Option 2                         [  ]         [  ]
Option 3                         [  ]         [  ]

これをセマンティックにコーディングする最良の方法は何ですか？

関連の質問を見ました意味的に正しいチェックボックスを使用しますが、これはタイトルを考慮しません。

アイデアはありますか

Answer 1

ラベルの付いた行と列？これは、ほぼ間違いなく、テーブルが正しい場合です。

ユーザーが選択を行ってフォームを送信すると、ユーザーに選択項目を表示することを想像してください。収集したデータを表示するためにテーブルを使用することは明らかに正しいので、データを収集するフォームを表示するためにテーブルを使用することは正しいでしょう。

Answer 2

チェックボックスの意味は表示される行と列によって決定されるため、テーブルはこのための正しい意味構造になることをお勧めします。

この1と0のセットをどのように表示するか考えてみてください。テーブルで表示します。セルを編集可能にするだけです。

この投稿を作成し始めたときよりもさらに確信しています。テーブルはこれに適した構造です。

Answer 3

意味的には、このレイアウトはテーブルのように見えるので、本当にこのレイアウトを使用する必要がある場合は、テーブルとしてマークアップする必要があります。 （タイトルとオプションにはthを、チェックボックスを含むセルにはtdを使用します。）

ただし、結果のフォームはかなり使いにくいでしょう。個々のチェックボックスのラベルとして使用するのに適したテキストはないため、ユーザーは＆amp;チェックボックス自体の小さなアクティブ領域をクリックします。

次のように、2つのグループのオプションを使用することをお勧めします。

<fieldset><legend>Title 1</legend>
  <input type="checkbox" id="t1o1"><label for="t1o1">Option 1</label>
  <input type="checkbox" id="t1o2"><label for="t1o2">Option 2</label>
  ...
</fieldset>
<fieldset><legend>Title 2</legend>
  ...
  <input type="checkbox" id="t3o2"><label for="t2o3">Option 2</label>
  <input type="checkbox" id="t2o3"><label for="t2o3">Option 3</label>
</fieldset>

はい、これはテキストの一部を繰り返すことを意味し、ある程度の保守性を妨げます。ただし、フォームの場合、使いやすさは保守性よりも優れているはずです。

Answer 4

テーブルが最も簡単な方法ですが、私たちが知っているようにデータ用にテーブルを使用する必要があります。

だから、div構造を使用します：

+---style="width:XXXpx"--------------------------------------------------+
|+---style="width:100%"-------------------------------------------------+|
||                                                +class=opt++class=opt+||
||                                                | title a || title b |||
||                                                +---------++---------+||
|+----------------------------------------------------------------------+|
|+---style="width:100%"-------------------------------------------------+|
||+----------------------------------------------++class=opt++class=opt+||
||| Option 1                                     ||   [x]   ||   [x]   |||
||+----------------------------------------------++---------++---------+||
|+----------------------------------------------------------------------+|
| //repeat for every option                                              |
+------------------------------------------------------------------------+

すべてをCSSに入れる必要があります。 （上記の「インライン」幅の定義も）

.opt { 
  float:right; width: 10%; /*probably*/ z-index: 99; 
  /*edit2:*/ position: relative;
}

これが機能するかどうかはわかりませんが、このように試してみます。

編集：ああ、これらのボックスは＆quot; div＆quot; s、ところでです。