Семантически правильные списки флажков 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 для ячеек, содержащих флажки.)

Однако полученную форму будет довольно сложно использовать. Ни один из текстов не подходит для использования в качестве метки для каждого отдельного флажка, поэтому пользователи будут вынуждены найти и нажать на крошечную активную область самого флажка.

Я бы предложил использовать две группы параметров, например:

<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;
}

Я не уверен, что это работает, я бы попробовал вот так.

РЕДАКТИРОВАТЬ: Ах, эти поля "div", кстати.