MICHELEPISANI.IT

Guida HTML5

I nuovi valori dell'attributo type ed il loro effetto sui browser compatibili

I nuovi valori dell'attributo type

Agosto 17
07:422014

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 "http://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.

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

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" />


HTML5 - Esempio di campi di input con attributo type datetime, range e color

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

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao stefy,
la tua domanda non è proprio pertinente a questo articolo... ti consiglio di dare …

stefy

salve. ho un problema sulla pagina facebook..non riesco a unirla..mi dice che è in sospeso …

Michele

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?

Antonio

Grazie michele per la velocità con cui hai risposto, comunque ho seguito la tua guida passo per …