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