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

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

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

Код по-прежнему выглядит лучше, на мой взгляд.

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

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

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

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

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

<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> и <label> являются элементами-братьями, а не <input> внутри <label>. Это немного более подробно, так как вы должны указывать id и атрибуты для связи <input> и <label>.

Вопрос UX, который подробно обсуждает этот вопрос: https://ux.stackexchange.com/questions/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 должно быть таким же, как и значение атрибута id связанного элемента управления.

Неявный:

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

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

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

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

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

<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 элемента метки сразу же бросает фокус на элемент, чей идентификатор явно определен в его " для ', что делает невозможным для пользователя щелкнуть в текстовое поле, чтобы ввести значение.

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

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

label input {
    vertical-align: bottom;
}

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

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

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

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

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

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