La compilazione dei moduli a volte sembra un'impresa ardua. È importante offrire agli utenti una scelta multipla, pur consentendo loro di digitare liberamente. L'elemento datalist (appena trasferito su Chrome Canary (M20)) rende il tutto un gioco da ragazzi.
Se usi datalist, la tua app può definire un elenco di risultati suggeriti da cui gli utenti devono scegliere. Possono selezionare un'opzione dall'elenco o inserire testo in formato libero.
Le opzioni possono essere abbinate a un datalist specificando il relativo 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 sulle versioni più recenti di Firefox, Opera e Internet Explorer dopo la versione 10. In questo modo non dovrai preoccuparti troppo della compatibilità, ma se vuoi assicurarti che funzioni su più browser, prova a procedere nel seguente modo:
<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 nel browser, tutti gli elementi che si trovano all'interno dell'elemento datalist ad eccezione degli elementi option verranno nascosti. Se utilizzi questo meccanismo di riserva, assicurati che il tuo server catturi sia "fruit_sel" che "fruit" come parametri di query.