Должен ли я поместить элементы ввода внутри элемента метки?

Есть ли лучшая практика в отношении вложенности labelи inputHTML элементов?

классический способ:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

или

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

Начиная с w3: сам ярлык может располагаться до, после или вокруг соответствующего элемента управления.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

или

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

или

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

Обратите внимание, что третий метод нельзя использовать, когда для макета используется таблица с меткой в ​​одной ячейке и связанным с ней полем формы в другой ячейке.

Любой из них действителен. Мне нравится использовать первый или второй пример, так как он дает больше контроля над стилем.

я предпочитаю

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

над

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

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

Но это вопрос вкуса, я полагаю.

Если вам нужны дополнительные параметры стиля, добавьте тег span.

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

Код все еще выглядит лучше, на мой взгляд.

Если вы включите тег ввода в тег label, вам не нужно использовать атрибут «for».

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

Разница в поведении: щелчок в пространстве между меткой и вводом

Если щелкнуть пробел между меткой и входом, он активирует вход, только если метка содержит вход.

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

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

Возможность щелкать между ярлыком и полем означает, что это:

• легче нажать
• менее ясно, где все начинается и заканчивается

Чекбокс Bootstrap v3.3 примеры используют входные данные внутри: http://getbootstrap.com/css/#forms Может быть, стоит следовать им. Но они изменили свое мнение в v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios, поэтому я не знаю, что мудрее больше:

Флажки и радио используются для поддержки валидации форм на основе HTML и обеспечения кратких, доступных меток. Таким образом, наши <input>s и <label>s являются родственными элементами, а не <input>внутри a <label>. Это немного более многословно, так как вы должны указать id и атрибуты, чтобы связать <input>и <label>.

Вопрос UX, в котором подробно обсуждается этот момент: /ux/23552/should-the-space-between-the-checkbox-and-label-be-clickable

Лично мне нравится держать ярлык снаружи, как во втором примере. Вот почему есть атрибут FOR. Причина в том, что я часто применяю стили к метке, например ширину, чтобы форма выглядела хорошо (сокращение ниже):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

Делает так, чтобы я мог избежать таблиц и всего такого барахла в моих формах.

См. Http://www.w3.org/TR/html401/interact/forms.html#h-17.9 для рекомендаций W3.

Они говорят, что это может быть сделано в любом случае. Они описывают два метода как явный (используя «for» с идентификатором элемента) и неявный (встраивание элемента в метку):

Явный:

Атрибут for явно связывает метку с другим элементом управления: значение атрибута for должно совпадать со значением атрибута id соответствующего элемента управления.

Неявные:

Чтобы неявно связать метку с другим элементом управления, элемент управления должен находиться внутри содержимого элемента LABEL. В этом случае LABEL может содержать только один элемент управления.

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

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

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

Заметное значение 'gotcha' требует, чтобы вы никогда не включали более одного элемента ввода в элемент <label> с явным атрибутом "for", например:

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

Хотя это может показаться заманчивым для элементов формы, в которых пользовательское текстовое значение является вторичным по отношению к переключателю или флажку, функциональность click-focus элемента label немедленно переместит фокус на элемент, идентификатор которого явно определен в его атрибуте 'for' , что делает практически невозможным для пользователя щелкнуть в текстовом поле, чтобы ввести значение.

Лично я стараюсь избегать элементов меток с входными дочерними элементами. Семантически неуместно, когда элемент label охватывает больше, чем сам ярлык. Если вы вкладываете входные данные в метки для достижения определенной эстетики, вам следует вместо этого использовать CSS.

Как говорили большинство людей, оба способа действительно работают, но я думаю, что только первый должен. Будучи семантически строгим, метка не «содержит» входные данные. На мой взгляд, отношение содержания (родитель / ребенок) в структуре разметки должно отражать содержание в визуальном выводе . т.е. элемент, окружающий другой элемент в разметке, должен быть нарисован вокруг этого элемента в браузере . В соответствии с этим, метка должна быть родственной, а не родительской. Так что вариант номер два произвольный и запутанный. Все, кто читал Zen of Python , вероятно, согласятся (Flat лучше, чем вложенный, Sparse лучше, чем плотный, должен быть один - и желательно только один - очевидный способ сделать это ...).

Из-за решений, подобных этому от W3C и основных поставщиков браузеров (позволяющих «в зависимости от того, как вы предпочитаете это делать», а не «делайте это правильно»), Интернет сегодня настолько запутан, и нам, разработчикам, приходится иметь дело с запутанными и так разнообразный унаследованный код.

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

label input {
    vertical-align: bottom;
}

чтобы обеспечить правильное вертикальное выравнивание для радиостанций.

Обращаясь к WHATWG ( Написание пользовательского интерфейса формы ), можно ошибочно поместить поле ввода внутри метки. Это сохраняет ваш код, потому что forатрибут из labelбольше не нужен.

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

Я разработчик Javascript, и React или Angular используются для генерации компонентов, которые могут быть использованы мной или другими пользователями. Тогда будет легко дублировать идентификатор на странице, что приведет к странному поведению.

Одна вещь, которую вы должны рассмотреть, это взаимодействие флажка и радиовходов с javascript.

Используя структуру ниже:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

Когда пользователь нажимает на «Текст метки», функция controlCheckbox () запускается один раз.

Но при нажатии входного тега функция controlCheckbox () может запускаться дважды в некоторых старых браузерах. Это связано с тем, что теги input и label запускают событие onclick, прикрепленное к флажку.

Тогда у вас могут быть некоторые ошибки в вашем checkboxState.

Я столкнулся с этой проблемой в последнее время на IE11. Я не уверен, что современные браузеры имеют проблемы с этой структурой.

Основным преимуществом размещения inputвнутри labelявляется эффективность печати для людей и хранение байтов для компьютеров.

@Znarkus сказал в своем комментарии к OP,

Один из больших плюсов размещения <input />внутри <label>, это то, что вы можете опустить forи id: <label>My text <input /></label>в вашем примере. Так намного лучше!

Примечание: в коде @Znarknus была включена другая эффективность, не указанная явно в комментарии. type="text"также может быть опущен и inputбудет отображать текстовое поле по умолчанию.

Совместное сравнение нажатий клавиш и байтов [1].

31 нажатие клавиши, 31 байт

<label>My Text<input /></label>

58 нажатий клавиш, 58 байт

<label for="myinput">My Text</label><input id="myinput" />

В противном случае фрагменты визуально равны, и они предлагают тот же уровень доступности для пользователя. Пользователь может щелкнуть или коснуться метки, чтобы поместить курсор в текстовое поле.

[1] Текстовые файлы (.txt), созданные в блокноте в Windows, в байтах из свойств проводника Windows