I nuovi valori dell'attributo type

Tra gli attributi utilizzabili nel campo input, abbiamo menzionato nell'articolo precedente l'attributo type=tel, che in breve visualizza un normale campo di testo ma, quando selezionato, permette ai dispositivi mobili di mostrare una tastiera personalizzata all'immissione di quei caratteri solitamenti utilizzati per i numeri di telefono, ossia i numeri stessi ed alcuni simboli come il più (+), l'asterisco (*), il cancelletto (#), ecc..., con un risultato simile all'utilizzo di type=number visibile in Fig. 1.
Ed abbiamo nominato anche l'attributo type=email che oltre ad avere un comportamento simile a quello per type=tel funziona anche da validatore.
Tra quelli non ancora presi in visione è possibile presentare l'attributo type=search che ha effetti solo a livello visivo su alcuni browser sulla grafica del campo e che spesso viene associato ad un altro attributo, autocomplete="on" (l'altro valore che può assumere può essere "off" o lasciato vuoto per ottenere il comportamento implicito di default) che abilita il completamento automatico del testo che stiamo digitando.
L'attributo type=url verifica che l'url inserito sia del tipo "https://www.michelepisani.it" inoltre su dispositivi mobili fa sì che compaia una tastiera personalizzata dove salta all'occhio il tasto ".com" che è l'estensione maggiormente utilizzata.
L'attributo type=number fa in modo che il campo sia atto per l'inserimento di valori numerici e anche i dispositivi mobili adeguano la tastiera personalizzandola all'occorrenza, Fig. 1. A questo attributo possono essere affiancati i già menzionati attributi min, max e step.

Fig. 1 - HTML5 - Esempio del risultato del focus su un campo di tipo number su dispositivi Android

Il valore range dell'attributo type permette, su browser compatibili, di selezionare un valore in un intervallo semplicemente utilizzando uno slider (Fig. 2) i cui parametri sono indicati tramite gli attributi min, max e step.

Per chi conosce Datepicker di jQuery, HTML5 mette a disposizione dei particolari valori per l'attributo type per la gestione delle date, come datetime, che si comportano alla stessa maniera del plugin e che facilitano notevolmente l'inserimento delle date da parte dell'utente (vedere esempio in Fig. 2).

Altri valori che può assumere l'attributo type per la gestione delle date, oltre a datetime, sono: date, datetime-local, time, month, week. Essi possono funzionare in concomitanza degli attributi min, max e step.

Di conseguenza, se conoscete Datepicker conoscerete anche il plugin ColorPicker di jQuery e anche per questo HTML5 offre una soluzione con l'introduzione dell'attributo type=color. Come si vede in Fig. 2 viene mostrato un elemento per il selezionamento del colore che passa ad un eventuale form un valore RGB a 6 caratteri del tipo (ED1C24).

La Fig. 2 mostra il risultato, di alcuni degli attributi citati, su browser compatibili (testato su Opera 11.64) semplicemente con l'utilizzo del seguente codice:

datetime: <input type="datetime" name="mydatetime" />
range: <input type="range" name="myrange" min="1" max="10" step="1" value="3" />
color: <input type="color" name="mybackground" />

Fig. 2 - HTML5 - Esempio di campi di input con attributo type datetime, range e color su Opera 11.64