<datalist>: l'elemento "Data List"

L' elemento HTML <datalist> contiene un insieme di elementi <option> che rappresentano le opzioni consentite o consigliate disponibili tra cui scegliere all'interno di altri controlli.

Per associare l'elemento <datalist> al controllo, gli diamo un identificatore univoco idnell'attributo, quindi aggiungiamo l'attributo list all'elemento <input> con lo stesso identificatore del valore. Solo alcuni tipi di <input> supportano questo comportamento e può anche variare da browser a browser.

Esempi

Elenco dati di base

<label for="myBrowser">Scegli un browser dalla lista: </label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browser">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Data e ora

I tipi month , week , date , time e datetime-local possono mostrare un'interfaccia che consente una comoda selezione di data e ora. I valori predefiniti possono essere visualizzati lì, consentendo all'utente di riempire rapidamente il valore di controllo.

Nota: Nota: quando il tipo non è supportato, verrà invece utilizzato il tipo text per creare un campo di testo semplice. Quel campo riconoscerà correttamente i valori consigliati e li visualizzerà all'utente in un menu a discesa.

<input type="time" list="popularHours">
<datalist id="popularHours">
  <option value="12:00">
  <option value="13:00">
  <option value="14:00">
</datalist>

Intervallo

I valori consigliati nel tipo "intervallo" verranno visualizzati come serie di segni di hash che l'utente può selezionare facilmente.

<input type="range" list="tickmarks">
<datalist id="tickmarks">
  <option value="0">
  <option value="10">
  <option value="20">
  <option value="30">
</datalist>

Colore

Il tipo "colore" può mostrare colori predefiniti in un'interfaccia fornita dal browser.

<input type="color" list="redColors">
<datalist id="redColors">
  <option value="#800000">
  <option value="#8B0000">
  <option value="#A52A2A">
  <option value="#DC143C">
</datalist>

Password

La specifica consente il collegamento di <datalist> con un tipo "password", ma nessun browser lo supporta per motivi di sicurezza.

<input type="password" list="randomPassword">
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#">
</datalist>