Урок 49 із 104
47%
← Назад

Псевдоклас для неактивних елементів форм в HTML

Вивчаємо CSS-псевдоклас :disabled для стилізації заблокованих елементів форми.

Псевдоклас :disabled в HTML

Псевдоклас :disabled використовується для вибору елементів форми, які є неактивними. Такі елементи не можна змінювати або натискати.

  • :disabled працює з input, button, textarea, select та іншими елементами форми.
  • Неактивний елемент зазвичай має атрибут disabled.
  • За допомогою :disabled можна змінювати його зовнішній вигляд.

Приклад неактивного input

<input value="Звичайне поле">

<input value="Заблоковане поле" disabled>
input:disabled {
  background-color: #ddd;
  color: gray;
}

Приклад з кнопкою

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

<button disabled>
  Недоступно
</button>
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Різниця між звичайним та disabled елементом

  • Звичайний елемент реагує на дії користувача.
  • disabled елемент не приймає введення.
  • Форма не відправляє значення заблокованого поля.
❗ Важливо:

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

input:disabled {
  background-color: lightgray;
  color: gray;
}

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

📌 Завдання:
  1. №1. Створіть декілька input.
  2. №2. Один з них зробіть неактивним за допомогою disabled.
  3. №3. За допомогою :disabled змініть його колір та фон.
<!-- Початковий код -->

<input value="Ім'я">

<input value="Email">
💡 Показати підказку

Додайте атрибут disabled до поля, яке потрібно заблокувати.

✅ Показати відповідь
<input value="Ім'я">

<input value="Email" disabled>