HTML/Formulare/Datenlisten

Aus SELFHTML-Wiki
< HTML | Formulare(Weitergeleitet von Datalist)
Wechseln zu: Navigation, Suche

Dieser Artikel beschreibt, wie Sie in einem Eingabefeld die Eingabe durch Vorschläge aus einer Liste unterstützen können. Der Anwender kann diese Vorschläge annehmen, aber auch einen beliebigen anderen Text eingeben.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Leer
  • HTML5

Details: caniuse.com

Dem input-Element wird über das Attribut list ein datalist-Element zugeordnet, welches wiederum option-Elemente enthält, in deren value-Attributen die eigentlichen Optionen definiert sind. Die Zuordnung zwischen input- und datalist-Element erfolgt über den Inhalt des list-Attributs von input, der dem Wert des id-Attributs von datalist entsprechen muss.

Beispiel ansehen …
<form action="#">
  <p>
    <label>
      Vogelart
      <input type="search" list="Vögel">
      <datalist id="Vögel">
        <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>
Hier ist ein Eingabefeld vom Typ search zu sehen, welches als Eingabemöglichkeiten verschiedene Vogelnamen vorschlägt. Der Zusammenhang zwischen dem Eingabefeld und der Liste an Vorschlägen wird dadurch hergestellt, dass der Bezeichner Vögel sowohl im list-Attribut des input-Elements, als auch im id-Attribut des datalist-Elements steht.


[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML