Використання міток для покращення доступності форм

Елемент <label> використовується для зв'язування підпису з полем введення у формі. Такий зв'язок допомагає користувачам зрозуміти, яку інформацію потрібно ввести у відповідне поле. Коли користувач натискає на підпис, фокус автоматично переходить до відповідного поля введення.

Існує два способи зв'язати елементи label та input:

Обгортання

Якщо розмістити елемент форми, наприклад поле <input/>, всередині елемента <label>, браузер автоматично встановлює зв'язок між підписом і полем введення. Наприклад:

У цьому прикладі натискання на текст мітки "Name" автоматично переводить фокус на відповідне поле введення.

Використання атрибута id

Коли елемент форми не вкладений у елемент <label>, їх можна пов'язати вручну за допомогою атрибута id елемента input та атрибута for елемента label. Значення атрибутів for і id повинні збігатися. Наприклад:

У цьому випадку мітка асоціюється з полем введення за допомогою атрибута for у мітці та атрибута id у полі введення. Натискання на текст мітки "Name" також переводить фокус на відповідне поле введення.

Примітка

Використовуючи ці методи, ви встановлюєте візуальний і семантичний зв'язок між label та полем input. Однак можуть бути ситуації, коли обгорнути елемент input у label неможливо через обмеження стилізації або логіку сайту. У таких випадках зазвичай використовують зв'язок через атрибути, щоб зберегти гнучкість у застосуванні стилів і реалізації фонової логіки.

Розгляньмо різницю між двома підходами, проаналізувавши код на зображенні.

Примітка

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