L'elemento <datalist> in HTML è utilizzato per creare un elenco predefinito di opzioni per un elemento <input>. Permette all'utente di selezionare un'opzione dall'elenco, dando loro anche la possibilità di inserire un proprio valore se lo desiderano. L'elenco di valori predefiniti rimane nascosto fino a quando l'utente inizia a digitare nel campo di testo associato. Il <datalist> è associato a un attributo id, e l'<input> è collegato ad esso utilizzando l'attributo list.

In generale, l'elemento <datalist> può essere un modo utile per fornire un elenco predefinito di opzioni tra cui gli utenti possono scegliere, pur consentendo loro la flessibilità di inserire un proprio valore se necessario.

Esempio

Quando l'utente inizia a digitare nel campo di input category, il browser visualizzerà le categorie predefinite dal datalist. Se nessuna delle opzioni corrisponde all'input dell'utente, possono comunque digitare la propria categoria. Questo permette all'utente di scegliere da un elenco e inserire manualmente un valore se necessario.

• <label for="category">: etichetta il campo di input, indicando all'utente che dovrebbe selezionare o inserire una categoria di prodotto;

• <input type="text" name="category" id="category" list="categories"/>: il campo di input dove l'utente può digitare una categoria o selezionare dalle opzioni disponibili. L'attributo list="categories" collega questo input al datalist con l'ID categories;

• <datalist id="categories">: contiene un elenco di categorie di prodotto predefinite. Queste opzioni appariranno come suggerimenti quando l'utente inizia a digitare nel campo di input;

• <option value="...">: ogni option rappresenta una categoria di prodotto nell'elenco. L'utente può selezionare una di queste categorie o digitare il proprio valore se non corrisponde a nessuna delle opzioni.