I nuovi tipi di input per i form HTML5

Una delle tante e più piacevoli novità di HTML5 è la creazione di una nuova serie di "tipi" di input per i campi dei nostri form. In aggiunta ai tradizionali "text", "password", "checkbox" e "radio" HTML5 indica queste altre tipologie:

  • <input type="search"> per box di ricerca
  • <input type="number"> per caselle numeriche
  • <input type="range"> per sliders
  • <input type="color"> per la scelta di colori
  • <input type="tel"> per i numeri di telefono
  • <input type="url"> per le URL
  • <input type="email"> per gli indirizzi email
  • <input type="date"> per date e calendari
  • <input type="month"> per i mesi
  • <input type="week"> per le settimane
  • <input type="time"> per timesta,p
  • <input type="datetime"> per date (giorno + ora)
  • <input type="datetime-local"> per date (nel nostro fuso orario)

L'elenco completo di tutte le tipologie di nuovi input con i rispettivi attributi e opzioni lo trovato all'indirizzo http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html

Come si usano questi tipi di input? Molto semplicemente, basta inserirli come "type" del nostro campo <input>. Una codice come il seguente, ad esempio:

Quanti anni hai? <input type="number" name="numero" min="0">

produrra un campo come il seguente (questa è un immagine, il tipo in questione funziona su Chrome, Safari e Opera):

Come potete vedere viene creato un campo con le due freccette per andare su e giù e un valore minimo di "0" (non possono cioè essere inseriti numeri negativi). Simpatica come cosa, vero? 😉

Il problema – come per quasi tutte le novità di HTML5 – è che sono troppo belle per essere vere. Non tutti i browser le supportano e non è facile capire quali sono le tipologie supportate e quali non lo sono. Vediamo allora due tecniche per capire se il browser che sta visitando la nostra pagina "capisce" il tipo di input che vogliamo usare, e cosa fare se non lo capisce.

Controllo "manuale"

Un metodo veloce è sfruttare il fatto che i browser, se incontrano in campo di input con un tipo che non riconoscono, lo trasformano in "text". In questo caso possiamo avere una funzione JavaScript così:

function controllaTipo(tipo) {<br />        var i = document.createElement("input");<br />        i.setAttribute("type", tipo);<br />        return i.type !== "text";<br />    }

Il meccanismo è semplice: creiamo un campo di input e gi assegnamo il tipo che abbiamo scelto. Controlliamo poi che il tipo sia rimasto quello che abbiamo indicato – se il browser lo ha trasformato in "text" vuol dire che non supporta quel tipo.

La funzione la possiamo richiamare così:

if (controllaTipo("number")) {<br />        // il campo di input "number" è supportato<br />    } else {<br />        // il campo di input "number" non è supportato<br />    }

Modernizr

Abbiamo già parlato di Modernizr, una libreria JavaScript molto efficace che ci consente di scoprire al volo quali novità HTML5 e CSS3 sono supportate dal browser. In questo caso Modernizr ci viene in aiuto perchè ci mette a disposizione un array chiamato

Modernizr.inputtypes

che possiamo utilizzare per controllare tutti i tipi di input possibili, così:

if (Modernizr.inputtypes.number) {<br />        // il campo di input "number" è supportato<br />    } else {<br />        // il campo di input "number" non è supportato<br />    }

Conclusioni

Abbiamo visto due modalità per capire al volo se e come i nuovi campi di input sono supportati dal browser che sta visualizzando le nostre pagine. Una volte che abbiamo scoperto il livello di supporto possiamo agire di conseguenza – ad esempio, se il campo

data

non è supportato possiamo usare una soluzione tipo jQuery Datepicker, mentre se è supportato siamo liberi di usare l'implementazione "nativa" (e dunque più sicura e standard) del browser.

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis