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

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

11 голосов
/ 27 апреля 2010

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

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

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

<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, кажется, основана на презентации For For Love Forms . По сути, на слайде 36 этой презентации эта структура предлагается для флажков. Я предполагаю, что в самой презентации докладчик объяснил, почему это было сделано, но на слайдах это не написано.

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

Ответы [ 3 ]

11 голосов
/ 27 апреля 2010

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

Email address: [____________________]

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

Email address:
[___________________________________]

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

[x] Accept terms and conditions

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

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

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

7 голосов
/ 27 апреля 2010

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

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

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

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

4 голосов
/ 01 ноября 2012

В дополнение к причинам, упомянутым в других ответах, если <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/

...