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.