HTML5 si propone di offrire una esperienza totalmente nuova nella fruizione dei forms; i mezzi per assicurarla passano attraverso l’introduzione di una corposa lista di nuove tipologie di input e l’adozione di attributi espressamente pensati per implementare i controlli base sulla compilazione senza ricorrere a Javascript.
Attività molto comuni come l’assegnazione del focus od il toggle del suggerimento inserito in un campo per dare indicazioni di compilazione all’utente ora richiedono del semplice markup, senza script.
Il ventaglio di tipologie prevede campi di inserimento appositamente progettati per numeri di telefono, mail, date. Si offre in questo modo all’utente una interfaccia più chiara ed allo sviluppatore meno lavoro sulla produzione di codice Javascript, con conseguente riduzione del peso della pagina in termini di KB con relativo miglioramento delle performance di caricamento.
Un aspetto interessante risiede nel comportamento dei browser obsoleti davanti ai nuovi types: mostrano semplicemente un campo text; sarebbe quindi teoricamente possibile utilizzarli sin d’ora senza patemi, implementando personalmente i controlli custom lato client; il mio consiglio tuttavia è di attendere che l’adoption di queste nuove features da parte degli user-agents si ampli ancora.
I nuovi valori dell’attributo type di input:
- tel
- search
- url
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
Il significato di text è ben noto, per quanto riguarda search le differenze con text sono puramente stilistiche, in piattaforme che prevedano una differenza visiva tra normali campi di testo e campi di ricerca gli input di type=search potrebbero essere stilisticamente coerenti con i search inputs della piattaforma stessa.
url rappresenta un indirizzo Internet nella forma http://[www.]dominio[.estensione] qualora l’utente non dovesse inserire il protocollo (http) sarà cura dello user-agent aggiungerlo
Per email il controllo sarà formale (per quanto volutamente piuttosto lasco come indicato esplicitamente nel documento), il tipo email possiede una ulteriore features molto utile: laddove fosse indicato l’attributo multiple lo user-agent si aspetterebbe una lista di emails separate da virgola, ognuna di queste ovviamente formalmente valida.
È interessante notare come non vengano forniti per input di tipo tel particolari controlli sintattici; se è vero che in Italia i numeri telefonici sono numerici questo non vale nel resto del mondo, così che il controllo formale deve essere a carico dello sviluppatore che può associare una funzione di check attraverso il metodo setCustomValidity().
Ricca anche la scelta tra i campi in qualche modo relativi alle date, e più in generale ad un istante temporale: date rappresenta una data nella forma yyyy-mm-dd (user-agent inglese), time rappresenta un orario nella forma hh:mm; month rappresenta un anno-mese nella forma yyyy-mm; week una data nella forma yyyy-Www dove ww vale un numerico (da 01, 02 etc); per datetime-local vale il discorso di date, arricchito dalla localizzazione.
Range e color sono controlli particolari; range prevede la valorizzazione di un attributo min, un attributo max e opzionalmente di uno step e denota un intervallo numerico; color implementa un utilissimo color-chooser.
I nuovi attributi legati a form, input, textarea e select
input e textarea prevedono ora un attributo autofocus per aiutare l’utente nell’inserimento dei dati. Fino ad ora il risultato era ottenuto attraverso l’utilizzo di un linguaggio di scripting (Javascript ad esempio). Allo stesso modo gli elementi prevedono anche un attributo placeholder per suggerire all’utente la struttura del dato che dovrà inserire.
Il nuovo attributo form vale per gli elementi input, output, select, textarea, button, label, object e fieldset. Ora i campi di un form possono essere ubicati ovunque nella pagina senza necessariamente essere figli diretti del tag form a cui si riferiscono:
<p>Inserisci i tuoi dati</p>
<label>Nome</label>
<input type="email" form="contact_form" name="email" placeholder="[email protected]">
<form id="contact_form"></form>Il nuovo attributo required si applica agli input (eccetto quando type="hidden" oppure type="image" o per alcuni tipi di button come submit), alle select ed alle textarea; indica che l’utente è tenuto a valorizzare il campo affinchè il form sia inviato. Nel caso delle select la prima option deve essere un placeholder con valore stringa vuota. Ecco un esempio:
<label>Occupazione:
<select name="occupazione" required>
<option value="">Seleziona
<option>Ingegnere
<option>Avvocato
<option>Programmatore
</select></label>L’elemento textarea ha inoltre altri due nuovi attributi: maxlength e wrap, il secondo indica il comportamento per gli "a capo" del contenuto inviato.
L’elemento form acquisisce l’attributo novalidate che implica la disabilitazione di ogni controllo di validazione rendendo il form sempre inviabile.
Input e button ora prevedono formaction, formenctype, formmethod, formnovalidate e formtarget in aggiunta alla lista degli attributi disponibili; quando presenti vanno a sovrascrivere action, enctype, method, novalidate, e target dell’elemento form.
