HTML - Правильный способ кодирования флажка с меткой

Я использовал formtastic, чтобы генерировать HTML-формы в приложениях rails. Мой вопрос, однако, действительно связан с HTML.

Сегодня я обнаружил странное поведение в том, как formtastic генерирует флажки (поля типа :boolean на formtastic lingo).

Остальные поля (не-флажки) генерируются следующим образом:

<li>
  <label for="my_textbox_field">My TextBox</label>
  <input id="my_textbox_field" type="text" ... >
</li>

Флажки, однако, полностью заключены в теги <label> - вот так:

<li>
  <label for="my_boolean_field">
    <input id="my_boolean_field" type="checkbox" ... >
    This is my boolean field
  </label>
</li>

Форматическая философия, по-видимому, основана на презентации Learning to Love Forms. По сути, на слайде 36 этой презентации эта структура предлагается для флажков. Думаю, в самой презентации ведущий объяснил, почему это было сделано, но оно не написано на слайдах.

Может ли кто-нибудь сказать мне, почему включение меток внутри тега <label> может быть хорошей идеей, в отличие от размещения их снаружи, например с текстовыми полями?

Ответы

Ответ 1

Общим пользовательским интерфейсом для ввода текста является либо метка слева:

Email address: [____________________]

Или над надписью над входом:

Email address:
[___________________________________]

Однако для флажка общий UI для метки появляется после ввода, например:

[x] Accept terms and conditions

В первых двух случаях он значительно упрощает CSS, который вы должны создать, если метка находится перед входом в разметке. Можно утверждать, что ярлык может обернуться вокруг ввода все же, но важно здесь, что текст идет перед входом.

В третьем примере (флажок) текст появляется после метки, и снова CSS значительно упрощается, помещая метку в нужное место в порядке разметки (после ввода).

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

Ответ 2

Может ли кто-нибудь сказать мне, почему включение меток внутри тега <label> может быть хорошей идеей

Это может быть хорошей идеей, потому что в этом случае вы можете потерять атрибуты id и for, что упростит разметку. Когда <input> находится внутри <label>, соединение между ними неявно. (См. Раздел 17.9.1 HTML4.)

Однако на практике это не работает в IE, поэтому вы теряете это потенциальное преимущество.

Я могу только предположить в этом случае это для макета/стиля.

Ответ 3

В дополнение к причинам, упомянутым в других ответах, если <label> и <input> являются отдельными, любые пробелы между ними будут неаккумулируемыми. Вероятно, это не то, что вы хотели. Например, новая строка в этом коде приведет к отсутствию кликов:

<input id="my_boolean_field" type="checkbox" ... >    
<label for="my_boolean_field">This is my boolean field</label>

Вставка <input> внутри <label> позволяет избежать этого, поскольку пробел является частью метки.

Пример в реальном времени: http://jsfiddle.net/xKLrS/2/