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, wordt alles onder de datalist
behalve de option
elementen verborgen. Als u dit fallback-mechanisme gebruikt, zorg er dan voor dat uw server zowel “fruit_sel” als “fruit” als queryparameters opvangt.