:requiredСелектор псевдо - класу в CSS дозволяє авторам вибирати і стиль будь-якого узгодженого елемент з requiredатрибутом. Форми можуть легко вказати, в яких полях повинні бути дійсні дані перед поданням форми, але дозволяє користувачеві уникнути очікування, оскільки сервер є єдиним валідатором введення даних користувача.
Скажімо, у нас є вхідні дані з атрибутом type="name"і роблять його необхідним введенням, використовуючи requiredлогічний атрибут 1 :
Тепер ми можемо стилізувати це введення за допомогою :requiredселектора псевдо класу:
/* style all elements with a required attribute */ :required ( background: red; )Ми також можемо стилізувати необхідні поля форми за допомогою простих селекторів, а також об’єднавши додаткові селектори псевдокласу:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Демо
Дивіться Pen: необхідний стиль Кріса Койєра (@chriscoyier) на CodePen.
Цікаві місця
requiredАтрибут трактуються як логічне значення означає , що він не вимагає значень. Просто наявність requiredелемента дозволяє браузеру знати, що цей атрибут існує, і відповідний ввід насправді є обов’язковим полем. Хоча, згідно специфікації W3C, необхідний атрибут також працює з порожнім значенням або значенням з іменем атрибутів.
Необхідний атрибут також вимагає, щоб браузер використовував власні виноски, такі як міхур, зображений на демонстрації.
Для тих входів, які не стилізовані з використанням :required, автори можуть також налаштувати непотрібні елементи, використовуючи :optionalселектор псевдо-класу разом із :invalidі :validякі запускаються, коли задовольняються вимоги до даних форми поля.
Валідацію форми можна також доповнити разом requiredз patternатрибутом, щоб допомогти фільтрувати дані залежно від typeатрибута вводу . Шаблони можна записати як регулярний вираз або рядок. У наведеному нижче прикладі ми використовуємо регулярний вираз для узгодження синтаксису адреси електронної пошти.
:requiredАтрибут працює на радіо - кнопок. Якщо ви встановите потрібну кнопку на одну перемикач (або всі), потрібна буде саме ця група перемикачів. На прапорцях робить кожен окремий прапорець обов’язковим (для перевірки).
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Логічні атрибути . Ряд атрибутів у HTML5 є логічними атрибутами. Наявність булевого атрибута в елементі представляє справжнє значення, а відсутність атрибута - хибне значення. Якщо атрибут присутній, його значення має бути або порожнім рядком, або значенням, яке не враховує регістр канонічного імені атрибута, без пробілів, що ведуть або відстають.