Використання міток для покращення доступності форм
Свайпніть щоб показати меню
Елемент <label> використовується для зв’язування підпису з полем введення у формі. Такий зв’язок допомагає користувачам зрозуміти, яку інформацію потрібно ввести у відповідне поле. Коли користувач натискає на підпис, фокус автоматично переходить до відповідного поля введення.
Існує два способи зв’язати елементи label та input:
Обгортання
Можна вкладати <input> всередину <label>, і браузер автоматично зв’яже їх між собою.
index.html
Натискання на "Name" фокусує поле введення.
Використання атрибута id
Якщо поле введення не можна розмістити всередині мітки, з'єднайте їх вручну:
index.html
Тут мітка використовує for="name", а поле введення — id="name". Збіг значень створює зв'язок.
Використовуючи ці методи, ви встановлюєте візуальний і семантичний зв'язок між полем label та полем input. Однак можуть виникнути ситуації, коли обгорнути елемент input у label неможливо через обмеження стилізації або логіку сайту. У таких випадках зазвичай використовують зв'язок через атрибути, щоб зберегти гнучкість у застосуванні стилів і реалізації фонової логіки.
Розгляньмо різницю між двома підходами, проаналізувавши код на зображенні.
З точки зору браузера, обраний спосіб встановлення зв'язку не має значення. Обидва методи досягають однакового результату — поєднання мітки та поля введення для покращення зручності та доступності.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
