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

предпочитаю

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

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

over

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

неявное:

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

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

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

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

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

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

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

label input {
    vertical-align: bottom;
}

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

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

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

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

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

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