Елемент <label>

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

Найпростіший спосіб "привʼязати" <label> до елемента вводу - просто його вкласти в цей <label>. Браузер автоматично встановить звʼязок мітки та елементу вводу.

<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>

Іноді такий спосіб не підходить через особливості стилізації. Якщо елемент форми не вкладений в <label>, то потрібно явно звʼязати мітку та елемент введення. Роблять це за допомогою атрибута id елемента, що зв'язується, і атрибута for для мітки.

<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>