8

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

該当するものをすべてクリックしてください。
                                 タイトルAタイトルB

オプション1 [ ] [ ]
オプション2[][]
オプション3[][]

これを意味的にコーディングするための最良の方法は何だろうか？

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

何か案は？

4

4 に答える 4

12

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

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

于 2009-10-22T16:04:26.793 に答える
5

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

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

この記事を書き始めたときよりも確信が持てました。テーブルはこれに適した構造です。

于 2009-10-22T16:04:24.780 に答える
2

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

ただし、結果のフォームはかなり使いにくいものになります。個々のチェックボックスのラベルとして使用するのに適したテキストはないため、ユーザーはチェックボックス自体の小さなアクティブ領域を見つけてクリックする必要があります。

私の提案は、次のように 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>

はい、これはテキストの一部を繰り返すことを意味し、保守性をある程度妨げます。ただし、フォームについては、使いやすさが保守性に勝ると思います。

于 2009-10-22T16:10:36.157 に答える
-3

テーブルは最も簡単な方法ですが、ご存知のようにデータにはテーブルを使用する必要があります。

したがって、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;
}

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

編集: ああ、これらのボックスは「div」です。

于 2009-10-22T15:50:38.957 に答える