Come sappiamo l’HTML5 ci da la possibilità di rivoluzionare il modo di interagire con gli utenti, ad esempio ci permette di utilizzare alcune funzionalità che altrimenti potevamo utilizzare solo un buono codice in Javascript. Vediamo quindi quali sono le nuove funzionalità del tag input.
Sostanzialmente ci sono 12 nuovi tipi di input da dichiarare come type nel tag, Ecco un elenco:
Vediamole assieme una alla volta:
Supporto: Chrome, Safari
<input type="search">
Con questo tipo di input è dedicato, appunto, alla ricerca. Il vantaggio di questo del tipo search è di poter scrivere dentro la casella di ricerca e di cancellare con un semplice click quello che abbiamo scritto.
DEMO
Supporto: Internet Explorer, Firefox, Chrome, Opera
<input type="email">
Usato generalmente per la registrazione a un sito o a una newsletter, il tipo email richiede in input un indirizzo email e non ci permette di proseguire senza averla inserita e confermata dandoci un errore sotto forma di fumetto.
DEMO
Supporto: Internet Explorer, Firefox, Chrome, Opera
<input type="url">
Il tipo URL richiede in input un indirizzo internet valido, non ci permette di lanciare il form e ci da un errore sottoforma di fumetto come per il tipo email.
DEMO
Supporto: IOS, Android
<input type="tel">
“tel” ci permette solamente, nei dispositivi touch, di far apparire la tastiera numerica. Non possiamo godere di nessun tipo di controllo.
DEMO
Supporto: Internet Explorer, Chrome, Safari, Opera
<input type="number" min="50" max="120" step="0.5" >
Questo tipo è speciale, ci permettere solamente di inserire numeri tramite digitazione o tramite 2 pulsanti che compaiono all’interno della casella. Possiamo anche decidere un minimo e un massimo e lo “step“, ossia il valore da aggiungere o sottrarre alla pressione dei pulsanti di controllo.
DEMO
Supporto: Internet Explorer, Chrome, Safari, Opera
<input type="range">
Produce uno slider composto da una barra e un pontatore, in base allo spostamento del puntatore si ottiene un valore.
DEMO
Supporto: Chrome, Safari, Opera
<input type="date">
Produce un calendario che ci permette, attraverso lo scorrimento di mesi e anni, il facilmente inserimento di una data precisa.
DEMO
Supporto: Chrome, Safari, Opera
<input type="time">
Il tipo time permette il facile inserimento di ore e minuti.
DEMO
Supporto: Chrome, Safari, Opera
<input type="week">
Come per il tipo date, il tipo week produce un calendario ma ci permette di scegliere una settimana intera di un anno preciso.
DEMO
Supporto: Chrome, Safari, Opera
<input type="month">
Attraverso il solito calendario ci permette di scegliere un mese.
DEMO
Supporto: Chrome, Opera
<input type="color">
L’effetto varia tra i vari browser e i vari sistemi operativi, ci permette di scegliere di visualizzare e scegliere un colore.
DEMO
Supporto: Internet Explorer, Firefox, Chrome, Opera
<input type="datalist" list="lista" >
<datalist id="lista">
<option value="Suggerimento">Suggerimento</option>
<option value="Suggerimento-1">Suggerimento 1</option>
<option value="Suggerimento-2">Suggerimento 2</option>
</datalist>
Permette l’inserimento di un valore a scelta e mostra dei suggerimenti di inserimento.
DEMO
Tengo a precisare che queste funzionalità non sono ancora pienamente supportate da tutti i browser, sopratutto in quelli datati nei quali vedremo solamente un input di tipo testo. La strada è stata comunque tracciata e ben presto tutti gli standard designati da HTML5 saranno rispettati!
A presto!
