Loading...
In questo articolo vedremo i nuovi stati per l'attributo type ed i nuovi attributi dell'element input, introdotti in HTML5. Non sempre i browser sono in grado di interpretarli e da questo punto di vista quello che risulta essere maggiormente compatibile è il browser Opera
In questo articolo vedremo i nuovi stati per l’attributo type ed i nuovi attributi dell’element input, introdotti in HTML5. Non sempre i browser sono in grado di interpretarli e da questo punto di vista quello che risulta essere maggiormente compatibile è il browser Opera.
Iniziamo col vedere un esempio per il nuovo attributo placeholder:
<input name="nome" placeholder="Inserisci il tuo nome">
l’attributo placeholder permette di visualizzare un messaggio di “aiuto” all’interno di un input element fintanto che rimane vuoto e non ha il focus. I browser che non supportano questa funzionalità non visualizzano il messaggio ma non ne alterano la funzionalità quindi può essere usato sin da adesso.
E’ possibile aggiungere l’autofocus su qualsiasi elemento (non solo sugli input element) aggiungendo l’attributo autofocus:
<input id="focus" autofocus>
In questo modo quando si apre la pagina, il campo riceve il focus in automatico. Per i browser che non supportano questa feature viene semplicemente trascurata. In alternativa possiamo provvedere un codice JavaScipt che implementi la medesima funzionalità:
<input id="focus" autofocus>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("focus").focus();
}
</script>
Vediamo ora i nuovi stati coniati appositamente per l’element di tipo type. Il primo è lo stato email:
<input type="email">
secondo le specifiche redatte dal WHATWG il browser non è obbligato a fornire una specifica interfaccia per il campo (anche se Opera visualizza una icona di una mail vicino al campo) nè deve effettuare specifici controlli. Safari e Chrome trattano questo stato come se fosse un semplice text, mentre risulta utile su iPhone in quanto permette al device di capire che bisogna inserire una mail e mostra a video un layout della tastiera compatibile con l’input. Apple ha fatto in modo che il browser del suo device mobile riconoscesse alcuni degli elementi del nuovo HTML5 in modo che potese cambiare il layout della tastiera virtuale in base all’iinput richiesto. Nel caso dell’email la tastiera viene visualizzata in questo modo:
Il layout della tastiera dell'iPhone in caso di elemento di tipo Email
vengono cioè visualizzati come segni di punteggiatura la @ , il . e lo spazio.
Esiste poi lo stato url:
<input type="url">
per il quale valgono le stesse considerazioni fatte per lo stato precedente. In questo caso la tastiera dell’iPhone viene visualizzata secondo questo layout:
Il layout della tastiera dell'iPhone in caso di elemento di tipo Url
vengono visualizzati come segni di punteggiatura il . , lo / ed il .com.
Veniamo ora a due tipi di input che permettono di inserire un valore di tipo numerico. Il primo è il type di tipo number:
<input type="number" min="0" max="10" step="2" value="6">
questo stato ci permette di inserire un numero utilizzando come interfaccia uno spinner, come visualizzato in figura:
Un input di tipo Spinner
per questo tipo di stato possiamo inserire ulteriori attributi per specificare il numero massimo e minimo consentito (min e max) lo step dello Spinner (step), ed il valore iniziale (value).
Esiste poi uno stato per definire un numero attraverso uno slider di nome range:
Input di tipo Slider
il cui codice è il seguente:
<input type="range" min="0" max="10" step="2" value="6">
come per il precedente stato, possiamo inserire ulteriori attributi per specificare il numero massimo e minimo consentito (min e max) lo step dello Spinner (step), ed il valore iniziale (value).
E’ inoltre previsto uno stato di tipo date e datetime che presenta come interfaccia un calendario per poter inserire la data, ma tale stato è per ora supportato solo da Opera:
Interfaccia per lo stato Date
Interfaccia per lo stato Datetime
Esiste inoltre uno stato di tipo color il quale allo stato attuale non è supportato da alcun browser e richiede l’inserimento di un valore esadecimale per la scelta di un colore: probabilmente in futuro si evolverà verso forme più “amichevoli” di interazione con l’utente, visualizzando ad esempio una tavolozza di colori.
Infine vediamo l’input con stato settato a search:
<input name="ricerca" type="search">
un input con questo stato semplicemente mostra una interfaccia con lo stile uguale a quello dei campi di ricerca presenti all’interno del sistema operativo utilizzato, ad esempio con Safari su MacOs si visualizza un campo con i bordi arrotondati:
Un input con stato search su MacOs X
Su Chrome invece compare una X che permette di cancellare il testo appena immesso:
Interfaccia presentata da Chrome su S.O Windows
Possiamo vedere in azione questi nuovi attributi che abbiamo introdotto nell’articolo a questo indirizzo:
COMMENTS