# Елемент \<label>

Елемент <mark style="background-color:red;">\<label></mark> використовують для зв'язування текстового опису з елементом вводу (наприклад, полем вводу тексту або вибору). Це допомагає покращити доступність та користувацький досвід, оскільки користувачі можуть натискати на текст мітки, щоб активувати пов'язане поле вводу.

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FRPb6wevg0Q87HHjkYvz4%2FHTML-label-Explained-3.gif?alt=media&#x26;token=39b23ff7-4b7d-4f11-8c11-04c90a05f55f" alt=""><figcaption></figcaption></figure>

Найпростіший спосіб "привʼязати" <mark style="background-color:red;">\<label></mark> до елемента вводу - просто його вкласти в цей <mark style="background-color:red;">\<label></mark>. Браузер автоматично встановить звʼязок мітки та елементу вводу.

```html
<form name="login_form" autocomplete="on" novalidate>
  <label>
  Login:
    <input type="text" name="username" required>
  </label>
  
  <label for="password">
  Password:
    <input type="password" name="password" required>
  </label>
  
   <button type="submit">Submit</button>
</form>
```

Іноді такий спосіб не підходить через особливості стилізації.  Якщо елемент форми не вкладений в <mark style="background-color:red;">\<label></mark>, то потрібно явно звʼязати мітку та елемент введення. Роблять це за допомогою атрибута <mark style="background-color:red;">id</mark> елемента, що зв'язується, і атрибута <mark style="background-color:red;">for</mark> для мітки.

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FrqAlbvPoMxFgYKYZQBiZ%2Flabel-element-for-attribute-313489.64666d97.png?alt=media&#x26;token=c3ac1b4c-22c0-46c7-97c8-bd639711e647" alt="" width="375"><figcaption></figcaption></figure>

```html
<form name="login_form" autocomplete="on" novalidate>
  <label for="username">Login:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  
   <button type="submit">Submit</button>
</form>
```