Tag HTML <datalist>
Il tag HTML <datalist> crea un elenco di opzioni predefinite per <input>. Scopri come usarlo con esempi pratici.
Il tag <datalist> è uno degli elementi HTML5. Fornisce un elenco di suggerimenti predefiniti per un campo <input>, offrendo un menu a tendina in stile completamento automatico, consentendo comunque all'utente di digitare qualsiasi valore desideri. Man mano che l'utente inizia a digitare, il browser filtra i suggerimenti e mostra quelli corrispondenti.
Questo è ciò che differenzia <datalist> da un menu <select>: un <select> vincola l'utente a un insieme fisso di scelte, mentre un <datalist> si limita a suggerire valori — il campo rimane a testo libero.
Le opzioni predefinite sono racchiuse in elementi <option> annidati.
Come si collegano i tre elementi
Un datalist funzionante coinvolge sempre tre parti collegate tramite id:
- Un elemento
<input>con un attributolist. - Un elemento
<datalist>il cuiidcorrisponde al valore dilist. - Uno o più elementi
<option>all'interno del<datalist>che contengono i suggerimenti.
<input list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Vanilla"></option>
<option value="Strawberry"></option>
</datalist>Il collegamento avviene esclusivamente per nome: il valore di list sull'input ("ice-cream-flavors") deve essere identico all'id del <datalist>. Se non corrispondono esattamente, nessun suggerimento viene visualizzato. Il <datalist> stesso non è mostrato nella pagina — compaiono solo le sue opzioni, all'interno del menu a tendina dell'input.
Gli elementi figli <option>
Ogni suggerimento è un singolo elemento <option>. Esistono due modi per fornire il testo:
- Attributo
value— il testo inserito nell'input quando l'opzione viene selezionata. - Etichetta visibile — testo tra il tag di apertura e quello di chiusura, mostrato all'utente.
Se si imposta solo value, la stessa stringa viene sia mostrata che inserita:
<option value="Firefox"></option>È anche possibile abbinare un valore tecnico a una descrizione più leggibile usando l'attributo label (o il testo dell'etichetta), che alcuni browser mostrano accanto al valore:
<option value="FF" label="Firefox"></option>In questo caso l'input riceve FF, mentre il menu a tendina può mostrare il più leggibile Firefox. Il rendering delle coppie valore/etichetta separate varia da browser a browser, quindi nella maggior parte dei casi mantenere value leggibile dall'uomo è l'approccio più semplice e affidabile.
<datalist> vs. <select>
Entrambi presentano un elenco di scelte, ma risolvono problemi diversi:
<datalist> | <select> | |
|---|---|---|
| Input utente | Testo libero — può digitare qualsiasi cosa | Limitato alle opzioni elencate |
| Ruolo dell'elenco | Suggerimenti / completamento automatico | Gli unici valori consentiti |
| Digitazione per filtrare | Sì, filtra durante la digitazione | Limitato |
| Valore inviato | Qualsiasi contenuto del campo | Sempre una delle opzioni |
| Usarlo quando | Si vogliono suggerimenti ma si accettano valori personalizzati (casella di ricerca, dominio email, città) | La risposta deve essere uno di un insieme fisso (codice paese, livello di piano) |
Scegli <datalist> quando i suggerimenti aiutano ma un valore personalizzato è comunque valido; scegli <select> quando solo i valori proposti sono accettabili.
Sintassi
Il tag <datalist> viene usato in coppia. Il contenuto è scritto tra i tag di apertura (<datalist>) e chiusura (</datalist>).
Esempio del tag HTML <datalist>:
Tag HTML <datalist>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="browser">Choose browser</label>
<input list="browsers" id="browser" />
<!-- The list attribute value matches the datalist id -->
<datalist id="browsers">
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Firefox"></option>
<option value="Google Chrome"></option>
<option value="Maxthon"></option>
</datalist>
</body>
</html>Usare un vero <label> (invece di un semplice <div>) e puntare il suo attributo for all'id dell'input collega la didascalia al campo, in modo che i lettori di schermo la annuncino e il clic sull'etichetta metta a fuoco l'input.
Esempio: un selettore di paese
Un datalist funziona bene per input con molti valori noti in cui si vuole comunque permettere il testo libero — come la selezione di un paese all'interno di un modulo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="country">Your country</label>
<input list="countries" id="country" name="country" />
<datalist id="countries">
<option value="Argentina"></option>
<option value="Brazil"></option>
<option value="Canada"></option>
<option value="France"></option>
<option value="Germany"></option>
<option value="Japan"></option>
<option value="United States"></option>
</datalist>
<button type="submit">Submit</button>
</form>
</body>
</html>Supporto dei browser
<datalist> è supportato da tutti i browser desktop moderni. Attenzione alle limitazioni su mobile: il supporto su iOS Safari è storicamente stato incompleto o inconsistente tra le versioni, e alcuni browser più vecchi o meno comuni ignorano completamente l'elemento. Poiché il campo è semplicemente un normale input di testo, i browser che non mostrano i suggerimenti visualizzano semplicemente un input normale — quindi usa <datalist> come miglioramento progressivo, non come unico modo per comunicare i valori validi.
Attributi
Il tag <datalist> non ha attributi specifici dell'elemento. Tutto il suo collegamento avviene tramite l'id (abbinato dall'attributo list dell'input), e i suggerimenti risiedono negli elementi figli <option>. Supporta tuttavia gli Attributi globali e gli Attributi evento.