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

book
Label для Input Елемента

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

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

Обгортання

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

html

index.html

copy
<form onsubmit="return false">
<label>
Name
<input type="text" name="name" />
</label>

<button type="submit">Submit</button>
</form>

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

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

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

html

index.html

copy
<form onsubmit="return false">
<label for="name"> Name </label>
<input type="text" name="name" id="name" />

<button type="submit">Submit</button>
</form>

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

Примітка

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

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

Примітка

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

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

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

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

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