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.