Чи слід вводити вхідні елементи всередині елемента мітки?

Чи є найкраща практика щодо вкладання labelта inputелементів HTML?

класичний спосіб:

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

або

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

Від 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>

Зауважте, що третю техніку не можна використовувати, коли використовується таблиця для компонування, з міткою в одній комірці та пов'язаним з нею полем форми в іншій комірці.

Або один дійсний. Мені подобається використовувати або перший, або другий приклад, оскільки це дає більше контролю над стилем.

я віддаю перевагу

<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>s і <label>s є родинні елементи , на відміну від в <input>межах <label>. Це трохи більше багатослівним , як ви повинні вказати ідентифікатор і атрибути співвідносити <input>і <label>.

Питання щодо UX, яке детально обговорює цей момент: /ux/23552/should-the-space-bet 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 асоціює мітку з іншим елементом управління: значення атрибута має бути таким же, як значення атрибута id асоційованого елемента управління.

неявні:

Щоб неявно пов'язати мітку з іншим елементом управління, елемент керування повинен міститись у вмісті елемента LABEL. В цьому випадку мітка може містити тільки один елемент управління.

Обидва є правильними, але введення інформації всередині етикетки робить її набагато менш гнучкою під час стилізації за допомогою CSS.

По-перше, a <label>обмежується в тому, які елементи він може містити . Наприклад, ви можете ставити <div>між <input>текстом та текстом мітки лише у тому випадку, якщо значення знака <input>не знаходиться всередині <label>.

По-друге, хоча існують обхідні шляхи для полегшення стилізації, як, наприклад, загортання внутрішнього тексту мітки прольотом, деякі стилі будуть успадковані від батьківських елементів, що може ускладнити стилізацію.

Помітний "gotcha" наказує, що ви ніколи не повинні включати більше одного вхідного елемента всередині елемента <label> з явним атрибутом "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>

Хоча це може бути привабливим для функцій форми, в яких спеціальне текстове значення є вторинним для перемикача або прапорець, функціональна функція фокусування клацання елемента мітки негайно кине фокус на елемент, ідентифікатор якого чітко визначений в атрибуті "для" , завдяки чому користувач майже не може натиснути на текстове поле, що міститься, щоб ввести значення.

Особисто я намагаюся уникати елементів етикетки із введеннями дітей. Здається, що семантично неправильно елемент мітки містити більше, ніж сам ярлик. Якщо ви вкладаєте вкладиші в мітки, щоб досягти певної естетичності, вам слід використовувати CSS.

Як сказала більшість людей, обидва способи дійсно працюють, але я думаю, що тільки перший повинен. Будучи семантично суворим, мітка не "містить" введення. На мій погляд, стримування (батько / дитина) відносини в структурі розмітки повинні відображати локалізації в візуальному виході . тобто елемент, що оточує інший в розмітці, повинен бути намальований навколо цього в браузері . У відповідності з цим, мітка повинна бути спорідненою на вхід, а не його батьки. Отже варіант номер два довільний і заплутаний. Кожен, хто прочитав дзен Python , напевно, погодиться (Flat краще, ніж вкладений, Sparse краще, ніж щільний. Там повинен бути один - і бажано лише один - очевидний спосіб зробити це ...).

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

Я зазвичай йду з першими двома варіантами. Я бачив сценарій, коли був використаний третій варіант, коли вибір радіо, де вбудований в мітках і CSS містив щось на кшталт

label input {
    vertical-align: bottom;
}

для того, щоб забезпечити правильне вертикальне вирівнювання для радіостанцій.

Посилаючись на WHATWG ( Написання користувальницького інтерфейсу форми ), неправильно ставити поле введення всередині етикетки. Це економить ваш код, оскільки forатрибут з labelфайлу більше не потрібен.

Я дуже вважаю за краще загортати елементи всередині себе, <label>тому що мені не потрібно генерувати ідентифікатори.

Я розробник Javascript, і Реагувати або Кутові використовуються для створення компонентів , які можуть бути повторно використані мною або іншими. Тоді було б легко дублювати ідентифікатор на сторінці, що веде до дивної поведінки.

Одне, що вам потрібно врахувати, - це взаємодія прапорців і радіо входів з javascript.

Використовуючи структуру нижче:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

Коли користувач натисне "Текст мітки", функція controlCheckbox () буде запущена один раз.

Але при натисканні на тег введення функція controlCheckbox () може бути запущена двічі у деяких старих браузерах. Це тому, що і теги вводу, і мітки викликають події onclick, приєднані до прапорця.

Тоді у вашому прапорець-станції можуть виникнути помилки.

Я нещодавно зіткнувся з цим питанням на IE11. Я не впевнений, що якщо сучасні браузери мають проблеми з цією структурою.

Основною перевагою розміщення inputвсередині labelє введення ефективності для людей та зберігання байтів для комп'ютерів.

@Znarkus сказав у коментарі до ОП,

Один з великих плюсів введення <input />всередину <label>, це те, що ви можете опускати forі id: <label>My text <input /></label>у своєму прикладі. Настільки приємніше!

Примітка. У коді @Znarknus інша ефективність була включена, явно не вказана в коментарі. type="text"також може бути пропущено, і inputза замовчуванням буде показано текстове поле

Побічне порівняння натискань клавіш і байтів [1].

31 натискання клавіш, 31 байт

<label>My Text<input /></label>

58 натискань клавіш, 58 байт

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

В іншому випадку, фрагменти візуально рівні, і вони пропонують один і той же рівень користувача доступності. Користувач може натиснути або торкнутись мітки, щоб розмістити курсор у текстовому полі.

[1] Текстові файли (.txt), створені в Блокноті в Windows, байти із властивостей Windows File Explorer