Corsi on-line

L’elemento datalist di HTML5

Il tag datalist è un elemento introdotto nel linguaggio di markup soltanto con HTML5 ed è quindi indisponibile in HTML 4.01, esso può essere utilizzato per specificare un elenco di opzioni predefinite per l’elemento input associato ad un form; dal punto di vista sintattico non rappresenta quindi un input type, ma più propriamente un componente che consente al browser Web di suggerire dei valori per l’autocompletamento di un campo.

HTML5Integrando tale elemento in una pagina Web gli utenti vedranno in pratica una lista drop-down; input permetterà di creare un vincolo (“binding“) con tale elenco grazie all’attributo list che fungerà come una sorta di placeholder (o, se preferite, “segnalibro”); per omonimia il valore di quest’ultimo costituirà un riferimento all’id del drop-down. Ad input potranno comunque essere associati un nome, scelto arbitrariamente, e un proprio id il cui valore dovrà essere lo stesso di quello passato come argomento all’elemento label.

Il seguente esempio mostra un semplice caso di per l’utilizzo di datalist, analizzando la struttura proposta si potranno introdurre alcune ulteriori peculiarità di tale elemento:

<label for="theFamily">Digita un nome</label>
<input type="text" name="fam-name" id="theFamily" list="chName">
<datalist id="chName">
<option value="Homer">
<option value="Bart">
<option value="Lisa">
</datalist>

Come è possibile notare l’id di datalist e l’attributo list di input presentano lo stesso valore (“chName”), mentre l’id di input è uguale al valore della label che etichetta il campo (“theFamily”). Se un utilizzatore dovesse digitare la lettera “h”, il browser suggerirà la stringa “Homer” prelevata direttamente dalla lista per l’autocompletamento, o “Bart” nel caso della lettera “b”; la fase relativa ai suggerimenti lato client si esaurisce sostanzialmente in questo e potrebbe risultare molto comoda in presenza di numerosi punti elenco o di digitazioni particolarmente lunghe.

Il tag datalist rappresenta quindi un’opportunità per velocizzare la compilazione dei form, a ciò si aggiunga che nel caso in cui l’utente digiti un valore che non sia stato elencato tramite datalist, il campo funzionerà comunque perché non vincolato ai parametri indicati in lista; datalist unisce quindi la libertà dei campi di testo alla praticità propria dei menù di selezione.

Per quanto riguarda la compatibilità cross-browser, tale elemento (secondo quanto indicato nel manuale del W3C) è supportato da Internet Explorer, Mozilla Firefox, Opera Browser e Google Chrome; non disponibile il supporto in Safari che, invece, dovrebbe trattare il campo associato come un qualsiasi altro textfield.

Post correlati
I più letti del mese
Tematiche