:requiredSelectorul de clasă pseudo în CSS permite autorilor să selecteze și stilul de orice element de potrivire cu requiredatributul. Formularele pot indica cu ușurință ce câmpuri trebuie să aibă date valabile înainte ca formularul să poată fi trimis, dar permite utilizatorului să evite așteptarea suportată de faptul că serverul este singurul validator al intrării utilizatorului.
Să type="name"presupunem că avem o intrare cu un atribut de și o facem o intrare necesară folosind requiredatributul boolean 1 :
Acum putem stiliza acea intrare folosind :requiredselectorul de pseudo-clasă:
/* style all elements with a required attribute */ :required ( background: red; )De asemenea, putem stiliza câmpurile de formular necesare folosind selectoare simple, precum și înlănțuind împreună selectoare de pseudo-clasă suplimentare:
/* 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; )Demo
Vedeți stiloul: stil necesar de Chris Coyier (@chriscoyier) pe CodePen.
Puncte de interes
requiredAtributul este tratat ca un boolean ceea ce înseamnă că nu are nevoie de o valoare. Pur și simplu să aveți requiredun element îi permite browserului să știe că acest atribut există și că intrarea corespunzătoare este de fapt un câmp obligatoriu. Deși, conform specificațiilor W3C, atributul necesar funcționează și cu o valoare goală sau cu o valoare cu numele atributelor.
Atributul necesar solicită, de asemenea, ca browserul să utilizeze înștiințări native, cum ar fi mesajul cu bule descris din demonstrație.
Pentru acele intrări care nu sunt folosite în stil :required, autorii pot, de asemenea, să personalizeze elemente care nu sunt necesare folosind :optionalselectorul de pseudo-clasă împreună cu :invalidși :validcare sunt declanșate atunci când sunt îndeplinite cerințele de date ale unui câmp de formular.
Validarea formularului poate fi, de asemenea, completată împreună requiredcu patternatributul pentru a ajuta la filtrarea datelor în funcție de typeatributul intrării . Modelele pot fi scrise ca o expresie regulată sau un șir. În exemplul de mai jos folosim o expresie regulată pentru a se potrivi cu sintaxa unei adrese de e-mail.
:requiredAtributul funcționează pe butoane radio. Dacă puneți un buton radio (sau toate), va fi necesar acel grup de butoane radio. La casetele de selectare, face ca fiecare casetă de selectare să fie necesară (să fie bifată).
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Atribute booleene : o serie de atribute în HTML5 sunt atribute booleene. Prezența unui atribut boolean pe un element reprezintă valoarea adevărată, iar absența atributului reprezintă valoarea falsă. Dacă atributul este prezent, valoarea acestuia trebuie să fie fie șirul gol, fie o valoare care nu corespunde majusculelor între majuscule și minuscule pentru numele canonic al atributului, fără spațiu alb principal sau final.