Form con HTML5: i nuovi elementi input

22 luglio 2013

Pur non essendo ancora in versione stabile, le novità introdotte dalle specifice dell’HTML5 prendono piede all’interno di progetti reali. Son sempre più i dispositivi e i browser moderni che iniziano a supportare le nuove feature e, di conseguenza, migliorare l’esperienza utente.

Tra le tante novità introdotte, una delle più importanti è sicuramente caratterizzata dai nuovi elementi di tipo input. Sono infatti molti i nuovi tipi di input, tra cui:

Nuove tipologie di input HTML5
colordatedatetimedatetime-localemailmonthnumber
rangesearchteltimeurlweek

Gli attributi required e pattern

Prima di analizzare in dettaglio le funzionalita dei nuovi elementi di input è doveroso introdurre due nuovi attributi molto importanti:

  • required
  • pattern

Questi due attributi ci consentono di simulare due aspetti molto importanti da tenere in considerazione quando si progetta una form: la validazione dei dati.

L’attributo required

L’attributo required, come ci suggerisce il nome, ci consente di impedire l’invio del modulo se i campi obbligatori non sono stati compilati. Il suo funzionamento è davvero molto semplice:

<input type="text" name="username" required />

L’attributo pattern

L’attributo pattern può essere utilizzato in combinazione con l’attributo required appena visto. Esso, infatti, consente di definire delle espressioni regolari (nel formato supportato da JavaScript) per validare i dati dei moduli.

Un esempio molto semplice:

<input type="text" name="url" required pattern="https?://.+" />

Questo campo di input accetterà al suo interno solo valori che iniziano per http:// oppure https://.

Personalizzare lo stile dei campi validi/non validi

Una tecnica interessantissima che possiamo sfruttare per segnalare all’utente la validità o l’errore nella compilazione dei form consiste nel definire regole CSS ad hoc sfruttando gli pseudo-selettori :required, :valid, :invalid.

Con CSS3, infatti, viene introdotto anche il supporto a questi nuovi pseudo-selettori, grazie ai quali non abbiamo più bisogno di Javascript per assegnare nuove classi agli elementi in base ai dati da esso contenuti.

Facciamo un esempio pratico utilizzando uno sprite per mostrare quali tra i campi inseriti sono validi o presentano errori:

Figura 1 – Sprite per validazione

Sprite per validazione

Definiamo anche le due regole CSS:

input:required:invalid,
input:focus:invalid 
{
  background-image: url(/images/form_validation.png);
  background-position: right bottom;
  background-repeat: no-repeat;
}

input:required:valid
{
  background-image: url(/images/form_validation.png);
  background-position: right top;
  background-repeat: no-repeat;
}

Come tipico per gli sprite, modifichiamo la posizione dell’immagine di background del campo di input a seconda della sua validità.

Ecco l’esempio in azione:

Se vuoi aggiornamenti su Form con HTML5: i nuovi elementi input inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Form con HTML5: i nuovi elementi input

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy