LU07c - Datalist

siehe auch selfhtml - Datalist

Das <datalist>-Element in HTML wird verwendet, um eine vordefinierte Liste von Optionen für ein Eingabefeld anzubieten. Es ermöglicht dem Benutzer, aus einer Liste von vorgeschlagenen Werten auszuwählen, während er weiterhin die Möglichkeit hat, einen eigenen Wert einzugeben.

<form action="#">
  <p>
    <label> Vogelart
      <input type="search" list="Voegel" />
      <datalist id="Voegel">
        <option value="Amsel">
        <option value="Buntspecht">
        <option value="Drossel">
        <option value="Eisvogel">
        <option value="Fink">
        <option value="Graugans">
        <option value="Meise">
        <option value="Spatz">
        <option value="Specht">
      </datalist>
    </label>
    <button>finden!</button>
  </p>
</form>

Das Beispiel erstellt ein Eingabefeld mit einem Label. Der Zusammenhang zwischen dem Eingabefeld und der Liste der Vorschläge wird durch die Verwendung des gleichen Bezeichners „Vögel“ im list-Attribut des <input>-Elements und im id-Attribut des <datalist>-Elements hergestellt.

Wenn der Benutzer den Text „sp“ eingibt, werden die Vorschläge automatisch gefiltert und es werden nur noch „Buntspecht“, „Spatz“ und „Specht“ als Optionen angezeigt.

Inhalte teilweise unter CC-BY-SA-3.0 von SELFHTML kopiert.

Kevin Maurizi, Marcel Suter