Het invullen van formulieren voelt soms als een omslachtige klus. Het is belangrijk om gebruikers meerkeuzevragen te geven, maar ze toch de mogelijkheid te geven om vrij te typen. Het datalist element (dat net is toegevoegd aan Chrome Canary (M20)) maakt dit een fluitje van een cent.
Met datalist kan uw app een lijst met voorgestelde resultaten definiëren waaruit gebruikers kunnen kiezen. Ze kunnen een optie uit de lijst selecteren of vrije tekst invoeren.
Opties kunnen worden gekoppeld aan een datalist door 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 breed beschikbaar in de nieuwste versies van Firefox, Opera en Internet Explorer na versie 10. U hoeft zich dus niet al te veel zorgen te maken over compatibiliteit, maar als u zeker wilt weten dat het in alle browsers werkt, kunt u het volgende proberen:
<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.