La validazione dei form e i nuovi attributi

L'HTML5 rivoluziona in modo notevole la gestione dei form, soprattutto introduce delle innovative agevolazioni per quanto riguarda la validazione dei campi dopo il submit da parte dell'utente. Essa non sarà più gestita separatamente, dallo sviluppatore, con il Javascript ma sarà nativa del browser che interpreta gli attributi assegnati ai campi del form (l'attributo type può assumere nuovi valori oltre a text, password ed image) e valida oltre che per l'obbligatorietà del campo anche per il formato in cui il contenuto dello stesso è stato scritto. Ad esempio un campo di input può essere type="email" (invece che semplicemente type="text") e una volta cliccato sull'invio del form il browser effettua direttamente un controllo sul valore di quel campo restituendo eventualmente un'etichetta con un messaggio che invita a controllare l'indirizzo email inserito qualora non rispettasse il formato corretto, liberando così lo sviluppatore dal dover creare una funzione ad hoc o una regexp per il controllo della validazione di un indirizzo email, e lo stesso vale per altri tipi di campo come ad esempio per l'inserimento di una data (type="date"). Ma l'HTML5 non si ferma qui e pensa anche alle interazioni con i dispositivi mobili per cui, ad esempio, per un campo che richiede l'inserimento di un numero di telefono c'è la possibilità di assegnare l'attributo tel (type="tel") che non guarda alla validazione ma fa si che al focus sul campo si apra, su uno smartphone o un tablet, la tastiera personalizzata all'inserimento di numeri e simboli solitamente usati per i numeri di telefono, questo vale anche per lo stesso type=email (dove uno dei simboli che saranno mostrati nella tastiera sarà sicuramente la "@") ed altri che comunque verranno ripresi successivamente.

Non solo l'HTM5 rivoluziona il valore di alcuni attributi, come anticipato per l'attributo type, ma ne introduce di nuovi e tra questi a mio avviso quello che ha maggior rilevanza, non a caso è molto utilizzato (anche perchè è supportato praticamente da tutti i browser da tempo), è placeholder, esso aiuta l'utente a completare il campo in quanto il suo valore, venendo visualizzato nei campi di input o textarea vuoti o che non hanno il focus, suggerisce cosa inserire o il modo in cui l'informazione deve essere inserita.
Nell'immagine di esempio, Fig. 1, che mostra il form per la registrazione alla newsletter (presente dal vivo nella colonna destra di questo blog) è possibile notare l'effetto che l'attributo placeholder ha sui campi di tipo text.

Fig. 1 - HTML5 - Esempio del risultato dell'utilizzo dell'attributo placeholder nei campi di testo

Il codice del form (modificato per adattarlo alla discussione in oggetto) è qualcosa simile a questo:

<form action="#" method="post" novalidate="false">
  <p>
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome" value="" placeholder="Il tuo nome" tabindex="1" autofocus="true" />
  </p>
  <p>
    <label for="cognome">Cognome:</label>
    <input type="text" name="cognome" id="cognome" value="" placeholder="Il tuo cognome" tabindex="2" pattern="[a-zA-Z ]{2,50}" title="il cognome deve essere composto da 2 a 50 caratteri, formato di sole lettere maiuscole e minuscole ed eventualmente da spazi" />
  </p>
  <p>
    <label for="email">E-mail:*</label>
    <input type="email" name="email" id="email" value="" placeholder="es. email@mail.me" required tabindex="3" />
  </p>
  [...]
</form>

Oltre alla presenza dell'attributo type="email" e del placeholder è possibile notare, nel codice di cui sopra, un altro nuovo attributo inserito nel primo campo di input, ossia autofocus. Esso se impostato su true fa si che al caricamento della pagina il focus sia posizionato su quel determinato campo, va da se che ne può esistere solo uno su un solo campo in un'intera pagina.
Nel campo email ho inserito un altro attributo, required, nella sua forma sintetica per ricordare che per alcuni attributi la sola presenza fornisce implicitamente il suo valore. Come intuibile questo attributo rende il campo obbligatorio per poter effettuare il submit del form.
Nel secondo campo ho inserito un pattern per validare (con una regular expression) in maniera più restrittiva il campo, da notare l'aggiunta di un title descrittivo per evitare che venga eventualmente fornito un errore generico fuorviante per gli utenti.
Nel tag form ho inserito un attributo chiamato novalidate, l'ho impostato a false e quindi non ha effetto (in questo caso infatti la sua presenza è obsoleta ma è inserito solo a scopo illustrativo) ma se fosse settato su true disattiverebbe in automatico tutte le validazioni dei campi al suo interno.
Esistono altri attributi non mostrati nell'esempio di codice ma che sono comunque degni di nota, tra di essi, abbiamo già menzionato nell'articolo precedente gli attributi min e max ma non l'attributo step che indica in determinati tipi di campo la distanza minima tra un valore ed il valore successivo o precedente che il campo può assumere.

Nel prossimo articolo saranno approfonditi i tipi di valore che può assumere l'attributo type nei campi di input e l'effetto che essi hanno dal punto di vista funzionale e visivo.