Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Label для Input Елемента | Форми
Знайомство з HTML
course content

Зміст курсу

Знайомство з HTML

Знайомство з HTML

1. Веб Розробка
3. Структура Документа
4. Медіа та Таблиці
5. Форми

bookLabel для Input Елемента

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

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

Обгортання

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

html

index

css

index

js

index

copy

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

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

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

html

index

css

index

js

index

copy

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

Примітка

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

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

Примітка

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

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 3
some-alt