Одна з речей, яку я завжди недолюблював у веброзробці — це робота з формами. Формові елементи складно стилізувати через відмінності між браузерами та ОС, а валідація часто перетворюється на справжній головний біль. На щастя, сучасні HTML API значно покращили ситуацію з валідацією.
Проблема: min
та max
не показують помилку
Якщо у тебе є <input type="number">
, ти можеш обмежити його значення атрибутами min
та max
:
<input type="number" min="1" max="10">
Проте якщо користувач введе невірне число, браузер не покаже помилку.
Саме тут нам на допомогу приходить :out-of-range
! 🚀
Як працює :out-of-range
Цей псевдоклас активується, якщо значення input[type=number]
виходить за межі min
і max
:
/* Змінює стиль, якщо число поза допустимим діапазоном */
input[type="number"]:out-of-range {
border-color: red;
}
Як це працює?
- Якщо користувач введе число менше за
min
або більше заmax
, браузер автоматично застосує цей стиль. - Це працює без JavaScript! 🎉
⚠️ Але пам’ятай про серверну перевірку
CSS та HTML-валидація чудові, але вони не є захистом від некоректних даних.
Навіть якщо у тебе є :out-of-range
, користувач може:
- Відключити CSS у браузері.
- Надіслати запит напряму через DevTools або Postman.
🔐 Тому завжди перевіряй введені дані на сервері!
🏁 Висновок
:out-of-range
дозволяє легко стилізувати невалідніinput[type=number]
.- Це працює без JS та покращує UX.
- Але не замінює серверну перевірку.
Тож додавай :out-of-range
у свої стилі та покращуй взаємодію з формами! 🚀