Form Html5

• Tweet

• Tweet

Ormai tutti siamo coscienti che l’ html5 ha dato una svolta incredibile alla semantica degli elementi e sul modo di strutturare l’intero documento html. Meritano sicuramente attenzione i nuovi form, ci sono oltre una decina di nuovi tipi di input da usare, senza bisogno di trucchi o soluzioni indirette.

Testo Segnaposto

Il testo segnaposto è quel testo visibile nell’input, e rimane attivo finchè non viene compilato o attivato il campo.

Compatibile con: Firefox 3.7, Safari 4.0+, Chrome 4.0+

<input placeholder="Cerca nei bookmarks" />

Autofocus dei campi

L’attributo autofocus attiva un determinato campo input al caricamento di una pagina.

Un esempio lo trovi in google, nella homepage del noto motore di ricerca viene automaticamente attivato il campo input, in modo che si possa digitare la parola da cercare senza posizionare il cursore.

Compatibile con: Firefox 8.0, Safari 4.0+, Chrome 3.0+, Opera 10.0+, Iphone, Android

<input autofocus />

Indirizzi email

Da più di dieci anni i form sono composti dalle solite tipologie di input. L’html5 definisce alcuni nuovi tipi di campi, tra questi il campo email:

<input type="email" />

Il campo email non ha problemi di compatibilità, o meglio i browser che non leggono type=”email” lo interpretano come un semplice type=”text”, anche IE 6.

In sostanza il campo email al momento non ha un tipo di visualizzazione nei browser. La differenza puoi notarla da un iphone, ad esempio all’attivazione del campo email viene caricata la tastiera con @ e il . (punto).

Indirizzi web

Gli indirizzi web sono un’altra novità delle tipologie di input. Anche questo lo si può notare da un iphone,  in questo caso offre una tastiera contenente i tre simboli principali di un indirizzo web:  . (punto)   /  e  .com.

<input type="url" />

Intervalli di numeri

Eccoci arrivati ai numeri. Il type=”number” specifica ovviamente che si tratta di un campo numerico, ma con alcune caratteristiche:

<input type="number" min="0" max="10" step="2" value="6" />

Come puoi notare sopra, oltre alla tipologia del campo ci sono altri parametri:

min specifica il valore minimo accettabile in questo campo;
max pecifica il valore massimo accettabile in questo campo;
step definisce i numeri nell’intervallo del click;
value è il valore iniziale presente nel campo.

Compatibile con le ultime versioni di Chrome, Opera e Safari (testato sulle ultime versioni).

Cursori

Oltre alla visualizzazione a spinbox vista sopra, gli input numerici possono essere rappresentati anche sotto forma di cursori. Il markup è molto simile a quello visto poco fa, ecco come si presenta:

<input type="range" min="0" max="10" step="2" value="6" />

Compatibile con le ultime versioni di Chrome, Opera e Safari (testato sulle ultime versioni).

Selettori di data

Fino a poco tempo fa per includere un controllo di selezione date abbiamo fatto ricorso sempre a librerie esterne. Finalmente l’html5 include un controllo nativo all’interno dei form senza uso di javascript. Vediamo le diverse tipologie:

<input type="date" /> Semplice selezione di una data
<input type="datetime" /> Se oltre alla data si vuole associare l'ora
<input type="month" /> Se si vuole indicare solo il mese e l'anno
<input type="week" /> Se si vuole indicare solo una settimana
<input type="time" /> Se si vuole indicare un'ora in particolare

Compatibile con: Opera 9.0+

Caselle di ricerca

Questa è molto carina Il tipo di campo search permette la visualizzazione di una “x” alla fine dell’input. In pratica permette di cancellare in un solo click l’intero contenuto scritto nel campo.

<input type="search" />

Compatibile con: Chrome e Safari (testato sulle ultime versioni).

Selettori di colore

L’html5 permette anche di scegliere un colore e di restitiurne il corrispettivo esadecimale. Purtroppo questa tipologia di input non è ancora supportata da nessun browser, speriamo in un giorno non molto lontano.

Purtroppo tutte queste belle funzionalità possiamo goderle in alcuni dei browser moderni, sperando al più presto in una completa compatibilità. Se hai altre informazioni riguardo ai form html5 puoi scriverci nei commenti o condividerle sulla fanpage di laboratoriocss.

Per usufruire dell’utilità dei form ti consiglio di visualizzare la demo con Opera o Chrome.

Compatibile con le ultime versioni di Chrome, Opera e Safari.