Il :requiredselettore di pseudo classi in CSS consente agli autori di selezionare e definire qualsiasi elemento corrispondente con l' requiredattributo. I moduli possono facilmente indicare quali campi devono avere dati validi prima che il modulo possa essere inviato, ma consente all'utente di evitare l'attesa sostenuta facendo in modo che il server sia l'unico validatore dell'input dell'utente.
Supponiamo di avere un input con un attributo di type="name"e di renderlo un input obbligatorio utilizzando l' requiredattributo booleano 1 :
Ora possiamo modellare quell'input usando il :requiredselettore di pseudo classe:
/* style all elements with a required attribute */ :required ( background: red; )Possiamo anche definire lo stile dei campi modulo richiesti utilizzando selettori semplici e concatenando selettori di pseudo classi aggiuntivi:
/* 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
Vedi la penna: Styling richiesto da Chris Coyier (@chriscoyier) su CodePen.
Punti di interesse
L' requiredattributo è trattato come booleano, il che significa che non richiede un valore. Il semplice fatto di avere requiredsu un elemento consente al browser di sapere che questo attributo esiste e l'input corrispondente è in effetti un campo obbligatorio. Sebbene, secondo le specifiche W3C, l'attributo richiesto funzioni anche con un valore vuoto o un valore con il nome dell'attributo.
L'attributo richiesto richiede inoltre che il browser utilizzi callout nativi come il messaggio a bolle rappresentato dalla demo.
Per quegli input non in stile utilizzando :required, gli autori possono anche personalizzare gli elementi non richiesti utilizzando il :optionalselettore di pseudo classi insieme a :invalide :validche vengono attivati quando vengono soddisfatti i requisiti dei dati di un campo modulo.
Validazione dei form può anche essere complimentato a fianco requiredcon l' patternattributo per i dati di aiuto di filtro a seconda dell'ingresso typeattributo. I modelli possono essere scritti come un'espressione regolare o una stringa. Nell'esempio seguente stiamo usando un'espressione regolare per abbinare la sintassi di un indirizzo e-mail.
L' :requiredattributo funziona sui pulsanti di opzione. Se metti richiesto su un pulsante di opzione (o su tutti), quel particolare gruppo di pulsanti di opzione sarà richiesto. Nelle caselle di controllo, rende ogni singola casella di controllo obbligatoria (da spuntare).
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Attributi booleani : un certo numero di attributi in HTML5 sono attributi booleani. La presenza di un attributo booleano su un elemento rappresenta il valore vero e l'assenza dell'attributo rappresenta il valore falso. Se l'attributo è presente, il suo valore deve essere una stringa vuota o un valore che non fa distinzione tra maiuscole e minuscole per il nome canonico dell'attributo, senza spazi iniziali o finali.