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

Question

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

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

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

или

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

Answer 1

Начиная с 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>

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

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

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

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

Answer 3

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

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

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

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

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

Флажок 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

Answer 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" />

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

Answer 6

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

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

Явный:

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

Неявный:

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

Answer 7

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

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

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

Answer 8

Примечательный «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>

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

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

Answer 9

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

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

Answer 10

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

label input {
    vertical-align: bottom;
}

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