Manchmal fühlt es sich wie umständlich an, Formulare auszufüllen. Es ist wichtig, Nutzern Multiple-Choice-Optionen zu geben und ihnen gleichzeitig die Möglichkeit zu geben, freies Tippen zu ermöglichen. Mit dem datalist
-Element, das gerade auf Chrome Canary (M20) verfügbar ist, ist das ein Kinderspiel.
Mit datalist
kann deine App eine Liste mit vorgeschlagenen Ergebnissen definieren, aus denen Nutzer auswählen sollten. Sie können entweder eine Option aus der Liste auswählen oder freien Text eingeben.
Optionen können mit einem datalist
gekoppelt werden, indem die entsprechende id
im Attribut list
eines input
-Elements angegeben wird:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist
ist ab Version 10 in den aktuellen Versionen von Firefox, Opera und Internet Explorer allgemein verfügbar. Sie müssen sich also keine allzu großen Gedanken um die Kompatibilität machen, aber wenn Sie sichergehen möchten, dass die App auch in anderen Browsern funktioniert, versuchen Sie Folgendes:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
Wenn datalist
in Ihrem Browser verfügbar ist, werden alle Elemente unter datalist
mit Ausnahme der option
-Elemente ausgeblendet. Wenn Sie diesen Fallback-Mechanismus verwenden, muss Ihr Server sowohl „fruit_sel“ als auch „fruit“ als Abfrageparameter erfassen.