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

Question

Я использовал 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> 

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

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

Answer 1

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

Email address: [____________________] 

или этикетки над входом:

Email address: 
[___________________________________] 

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

[x] Accept terms and conditions 

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

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

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

Answer 2

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

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

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

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

Answer 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/