Het invullen van formulieren voelt soms als omslachtig. Het is belangrijk om gebruikers meerdere keuzemogelijkheden te bieden en toch vrij te kunnen typen. Het datalist element (dat zojuist op Chrome Canary (M20) is geland) maakt dit een fluitje van een cent.
Door datalist te gebruiken, kan uw app een lijst met voorgestelde resultaten definiëren waaruit gebruikers moeten kiezen. Ze kunnen een optie uit de lijst selecteren of vrije tekst invoeren.
Opties kunnen worden gekoppeld aan een datalist door de id ervan op te geven in het list van een input :
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist is overal beschikbaar in de nieuwste Firefox, Opera en Internet Explorer na versie 10. U hoeft zich dus niet al te veel zorgen te maken over compatibiliteit, maar als u er zeker van wilt zijn dat het in alle browsers werkt, probeer dan het volgende:
<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" />
Als datalist beschikbaar is in uw browser, zal alles onder de datalist behalve de option elementen verborgen zijn. Als u dit fallback-mechanisme gebruikt, zorg er dan voor dat uw server zowel “fruit_sel” als “fruit” als queryparameters opvangt.