A volte la compilazione dei moduli può sembrare complicata. È importante offrire agli utenti una scelta multipla, ma allo stesso tempo consentire loro di digitare liberamente. L'elemento datalist (appena rilasciato su Chrome Canary (M20)) semplifica notevolmente questa operazione.
Utilizzando datalist, la tua app può definire un elenco di risultati suggeriti tra cui gli utenti devono scegliere. Può selezionare un'opzione dall'elenco o inserire un testo libero.
Le opzioni possono essere accoppiate a un datalist specificandone il id nell'attributo list di un elemento input:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist è ampiamente disponibile nelle ultime versioni di Firefox, Opera e Internet Explorer dopo la versione 10. Quindi non devi preoccuparti troppo della compatibilità, ma se vuoi assicurarti che funzioni su tutti i browser, prova quanto segue:
<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" />
Se datalist è disponibile sul tuo browser, tutto ciò che si trova sotto datalist, tranne gli elementi option, verrà nascosto. Se utilizzi questo meccanismo di riserva, assicurati che il server recuperi sia "fruit_sel" sia "fruit" come parametri di query.