Должен ли я помещать теги ввода в тег метки?

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

Лично мне нравится держать ярлык снаружи, как в вашем втором примере. Вот почему атрибут 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" />

Делает это, поэтому я могу избежать таблиц и всего этого мусора в моих формах.

Ответ 6

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

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

Явно:

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

Неявный:

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

Ответ 7

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

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

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

Ответ 8

Заметный "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 вместо этого.

Ответ 9

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

label input {
    vertical-align: bottom;
}

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

Ответ 10

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

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

Ответ 11

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

Ответ 12

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

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