:requiredСелектор Псеудо класа у ЦСС омогућава ауторима да изаберете и стил било упарених елемент са 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; )Демо
Погледајте оловку: обавезан стил Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.
Тачке од интереса
requiredАтрибут се третира као Боолеан што значи да не захтева вредност. Једноставно requiredкоришћење елемента омогућава прегледачу да зна да тај атрибут постоји и да је одговарајући унос обавезно поље. Иако, према спецификацији В3Ц, тражени атрибут такође ради са празном вредношћу или вредношћу са именом атрибута.
Обавезни атрибут такође захтева да прегледач користи изворне додатне описе као што је облачић порука приказана у демонстрацији.
За оне уносе који нису стилизовани помоћу :required, аутори такође могу да прилагоде непотребне елементе користећи :optionalселектор псеудо класе заједно са :invalidи :validкоји се покрећу када су испуњени захтеви за подацима поља обрасца.
Валидација обрасца такође се може похвалити заједно requiredса patternатрибутом како би се помогло филтрирање података у зависности од typeатрибута уноса . Обрасци се могу написати као регуларни израз или низ. У доњем примеру користимо регуларни израз да бисмо подударали синтаксу адресе е-поште.
:requiredАтрибут ради на радио дугмићима. Ако на један радио тастер (или све) ставите обавезно, биће потребна та одређена група радио дугмади. На пољима за потврду означава сваки појединачни оквир за потврду обавезним (који ће бити означен).
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Логички атрибути : Бројни атрибути у ХТМЛ5 су логички атрибути. Присуство логичког атрибута на елементу представља праву вредност, а одсуство атрибута представља лажну вредност. Ако је атрибут присутан, његова вредност мора бити празан низ или вредност која се не подудара са малим и малим словима за канонско име атрибута, без размака на почетку или на крају.