Summary  
The chapter explains how to link text labels to form input elements by using the HTML `<label>` tag’s `for` attribute paired with the input’s `id`, improving accessibility and enabling automatic focus when the label is clicked.

General domain of usage  
Web forms


<u>Мітки (`<label>`) є важливими для зв’язування текстових підписів із елементами введення форми</u>, що підвищує доступність і зручність використання. Важливо, щоб **атрибут `for` тега** `<label>` **збігався зі значенням атрибута** `id` **відповідного елемента** `input`. <br>**Приклад**:
```html
<label for="username">Username:</label>
<input type="text" id="username" />
```
У наведеному вище прикладі:
- При натисканні на мітку `Username:` автоматично встановлюється фокус на відповідне поле введення;
- `label` і `input` пов’язані між собою за допомогою атрибутів `for` та `id` відповідно;
- Значення атрибутів `for` та `id` однакові (`username`).

Зробимо заповнення форми простішим, додавши мітки до полів введення з попереднього прикладу.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgICAgIDxsYWJlbCBmb3I9InRleHQtaW5wdXQiPkVudGVyIHlvdXIgbmFtZTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9InRleHQtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icGFzc3dvcmQtaW5wdXQiPkVudGVyIHlvdXIgcGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0ibWFpbCI+RW50ZXIgeW91ciBlbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJtYWlsIiAvPiA8YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9InBob25lIj5QaG9uZSBudW1iZXI6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRlbCIgaWQ9InBob25lIiAvPiA8YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9ImFnZSI+QWdlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIGlkPSJhZ2UiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0iY2hlY2tib3gtaW5wdXQiPkFncmVlIHdpdGggdGVybXMgYW5kIGNvbmRpdGlvbnM6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBpZD0iY2hlY2tib3gtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icmFkaW8taW5wdXQiPlNlbGVjdCB5b3VyIGdlbmRlcjo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIGlkPSJyYWRpby1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJmaWxlLWlucHV0Ij5VcGxvYWQgYSBmaWxlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJmaWxlIiBpZD0iZmlsZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJkYXRlLWlucHV0Ij5TZWxlY3QgYSBkYXRlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJkYXRlIiBpZD0iZGF0ZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJ0aW1lLWlucHV0Ij5TZWxlY3QgYSB0aW1lOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJ0aW1lIiBpZD0idGltZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJkYXRldGltZS1pbnB1dCI+TWFrZSBhbiBhcHBvaW50bWVudCBhdDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZGF0ZXRpbWUtbG9jYWwiIGlkPSJkYXRldGltZS1pbnB1dCIgLz4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

Який атрибут тега `<label>` використовується для зв'язку з певним елементом `<input>` у формі?

Який атрибут відсутній у елементі input, щоб зв'язати його з елементом label?

Створення структурованих веб-сторінок за допомогою HTML. Формування текстового контенту, посилань, списків, зображень, таблиць і форм, організація всіх елементів за допомогою семантичних тегів у повноцінну сторінку.

Маркування Полів Форми

1. Який атрибут тега `<label>` використовується для зв'язку з певним елементом `<input>` у формі?

2. Який атрибут відсутній у елементі input, щоб зв'язати його з елементом label?

Маркування Полів Форми

1. Який атрибут тега <label> використовується для зв'язку з певним елементом <input> у формі?

2. Який атрибут відсутній у елементі input, щоб зв'язати його з елементом label?

1. Який атрибут тега `<label>` використовується для зв'язку з певним елементом `<input>` у формі?