Должен ли я помещать входные теги внутри тега 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> внутри <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", e.g:

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

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

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

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

label input {
    vertical-align: bottom;
}

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

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

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

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

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

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