Eingabefelder mit Datenlisten

Das <datalist>-Tag stellt auf unkomplizierte Art eine Liste mit <option>-Elementen bereit, deren Werte wiederum von einem anderen Element angenommen werden können.

Bei Eingabefeldern können bspw. die vorzuschlagenden Möglichkeiten als Liste mit <datalist> bereitgestellt werden.

<label for="myColor">Gib eine Farbe ein:</label>
<input id="myColor" list="color-list" />
<datalist id="color-list">
    <option value="rot">
    <option value="grün">
    <option value="gelb">
    <option value="blau">
    <option value="pink">
</datalist>

<label for="myColor">Gib eine Farbe ein:</label>
<input id="myColor" list="color-list" />
<datalist id="color-list">
    <option value="rot">
    <option value="grün">
    <option value="gelb">
    <option value="blau">
    <option value="pink">
</datalist>

Der Nutzer bekommt mit dem Code direkt bei Klick auf das Input-Element eine klickbare Auswahl der vorhandenen Optionen…