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

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

Обгортання

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

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

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

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

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

Примітка

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

Давайте ще раз розглянемо різницю між двома підходами на прикладі коду на зображенні.

Примітка

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