Зміст курсу
Знайомство з HTML
Знайомство з HTML
Label для Input Елемента
Елемент <label>
використовується для зв'язування label з input на формі. Цей зв'язок допомагає користувачам зрозуміти інформацію, яка запитується в input. Коли користувач натискає на label, він автоматично фокусується на відповідному input.
Існує два способи з'єднання елементів label та input:.
Обгортання
Вкладаючи елемент форми, наприклад, поле <input/>
, в елемент <label>
, браузер автоматично встановлює зв'язок між label та input. Наприклад:
index
index
index
У цьому прикладі натискання на текст label "Name" автоматично фокусується на відповідному input.
Використання атрибуту id
Коли елемент форми не є вкладеним в елемент <label>
, ми вручну зв'язуємо їх за допомогою атрибута id
елемента input
і атрибута for
елемента label
. Значення атрибута for
і атрибута id
має бути однаковим. Наприклад:
index
index
index
У цьому випадку label пов'язаний з input за допомогою атрибута for
на label та атрибута id
на input. Клацання на тексті label "Name" також фокусуватиметься на відповідному input.
Примітка
Використовуючи ці методи, ми встановлюємо візуальний і семантичний зв'язок між
label
іinput
. Однак можуть виникнути ситуації, коли обернути елементinput
вlabel
неможливо через стильові обмеження або логіку веб-сайту. У таких випадках ми зазвичай покладаємося на зв'язки атрибутів, щоб зберегти гнучкість у застосуванні стилів і реалізації фонової логіки.
Давайте ще раз розглянемо різницю між двома підходами на прикладі коду на зображенні.
Примітка
З точки зору браузера, обраний підхід до встановлення з'єднання не має значення. Обидва методи досягають однакового результату - зв'язують label і input разом для покращення зручності та доступності.
Дякуємо за ваш відгук!