Блокування елементів форми в HTML

Вивчаємо атрибут disabled для блокування елементів HTML-форми: input, button, select та textarea.

Блокування елементів форми в HTML

Для тимчасового блокування елементів форми використовується атрибут disabled. Заблокований елемент не дозволяє користувачу змінювати значення або взаємодіяти з ним.

disabled — робить елемент неактивним.
Користувач не може змінити значення заблокованого поля.
Заблоковані поля не передаються при відправці форми.
Атрибут можна використовувати для input, button, select та textarea.

Блокування input

За допомогою disabled можна заборонити введення тексту у поле.

<input type="text" value="Текст доступний">

<input type="text" value="Текст заблокований" disabled>

Блокування кнопки

Заблокована кнопка не реагує на натискання.

<button>
  Відправити
</button>

<button disabled>
  Недоступно
</button>

Блокування select

<select disabled>
  <option>Київ</option>
  <option>Львів</option>
  <option>Одеса</option>
</select>

Блокування textarea

<textarea disabled>
Цей текст не можна змінити
</textarea>

<form>

  <label>
    Ім'я:
    <input type="text">
  </label>

  <br>

  <label>
    Email:
    <input type="email" disabled>
  </label>

  <br>

  <button>
    Надіслати
  </button>

</form>

❗ Важливо:

disabled відрізняється від readonly: readonly дозволяє відправити значення форми, а disabled повністю вимикає елемент.

Практичне завдання

📌 Завдання:

№1. Створіть форму з кількома полями.
№2. Одне поле input зробіть заблокованим.
№3. Додайте кнопку, яка також буде disabled.

<!-- Початковий код -->

<form>

  <input type="text">

  <input type="text">

  <button>
    
  </button>

</form>

💡 Показати підказку

Щоб зробити елемент неактивним, достатньо додати атрибут disabled без значення.

✅ Показати відповідь

<form>

  <input type="text" value="Активне поле">

  <input type="text" value="Заблоковане поле" disabled>

  <button disabled>
    Надіслати
  </button>

</form>