В :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; )Демонстрация
Вижте писалката: задължително стилизиране от Chris Coyier (@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 са булеви атрибути. Наличието на булев атрибут върху елемент представлява истинската стойност, а отсъствието на атрибута представлява фалшивата стойност. Ако атрибутът е налице, стойността му трябва да бъде или празният низ, или стойност, която не съответства на регистъра за каноничното име на атрибута, без водещо или последващо празно пространство.