Каков правильный способ маркировки вещей в форме?

Question

Я видел много способов маркировки вещей в форме, например <label>, <div>, <span> и т. Д. Есть ли правильный или неправильный ответ для этого? Существуют ли какие-либо преимущества/недостатки для любого из них? Спасибо

Answer 1

этикетки лучше для доступности (табуляции, чтения с экрана и т.д.)

больше на: http://www.communitymx.com/content/article.cfm?cid=02310

Answer 2

Надлежащим образом, чтобы обеспечить метку в виде элемента является использование <label>:

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

Для элементов управления, которые имеют неявные метки, пользовательские агенты должны использовать значение атрибута value в качестве строки метки.

<label> элемент используется для задания меток для элементов управления, которые не имеют неявные метки

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

Вы не должны использовать <div> или <span> на самом деле ярлык элемент. Однако для текста вспомогательной справки они могут оказаться полезными. Но imho вы должны придерживаться семантических возможностей HTML, где это возможно и разумно. Это так, как в моих глазах.

Answer 3

Я предпочитаю это:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" /> 

Взгляните на то, что Phil Haack думает ...

Answer 4

Лучший способ это один:

<label for="anInput">This is the input</label> 
<input type="text" name="anInput" /> 

Это особенно интересно флажки. Если вы нажмете на ярлык, он отметит/снимет флажок. Если вы нажмете на метку поля ввода, он выберет его.

Тег определяет метку для входного элемента .

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

Для атрибута тега должен быть равен атрибуту id связанный элемент для привязки их .

via