Corsi on-line

Autocompletamento degli input con datalist

Quando realizziamo un form per i contatti o un altro modulo per il feedback da integrare nelle nostre pagine Web è possibile sfruttare select, radio o checkbox per limitare il numero di scelte a disposizione degli utilizzatori; HTML 5 introduce però un elemento ancora più evoluto, datalist, che consente di definire un elenco di voci predefinite per i campi di input pur lasciando all’utente la libertà di scrivere un valore differente da quelli proposti.

datalist non ha ad oggi un comportamento uniforme su tutti i browser Web, ma in generale funziona come strumento per l’autocompletamento mostrando una sorta di drop-down formato da tutte le opzioni selezionabili; quando l’utente comincia a scrivere un valore per un parametro di input (digitando ad esempio la sottostringa “mrw”) il browser evidenzia le opzioni che corrispondono almeno parzialmente a quanto già scritto nel campo (ad esempio “mrwebmaster” o “mrwcorsi”).

Abbiamo sottolineato che datalist non viene gestito nello stesso modo sui vari browser Internet, utilizzandolo si nota per esempio come Firefox si limiti a proporre le opzioni predefinite dopo che l’utente digita un carattere in grado di generare una corrispondenza con le voci contenute nel drop-down; in Google Chrome, invece, viene visualizzata una piccola freccia sul lato destro del campo di input che permetterà all’utente di capire che è disponibile una lista dalla quale scegliere.

Un semplice esempio di utilizzo di datalist potrebbe essere il seguente:

<label for="linguaggi">Quale linguaggio utilizzi per lavorare?</label>
<input type="url" name="linguaggi" id="linguaggi" list="elenco-linguaggi"/>
<datalist id="elenco-linguaggi">
  <option value="PHP">
  <option value="Java">
  <option value="Ruby">
</datalist>

Aggiungiamo poche regole CSS per la stilizzazione:

body {
  color: black;
  font-family: Verdana,Geneva,sans-serif; 
  font-size: 15px;
}

E passiamo quindi ai test. Su Firefox visualizzeremo inizialmente quello che sembra un comune campo di input, ma digitando per esempio la lettera “p” diventerà disponibile la voce predefinita con la quale viene individuata un corrispondenza:

1

Sempre su Firefox è possibile visualizzare tutte le voci del drop-down con un doppio click sul campo di input:

2

Su Google Chrome la presenza di un elenco di opzioni di default sarà invece testimoniata da subito grazie alla piccola freccia che consente di accedere alle voci del drop-down:

3

In ogni caso, e indipendentemente dal browser corrente, il campo di input rimarrà liberamente compilabile nonostante la disponibilità delle voci predefinite.

Post correlati
I più letti del mese
Tematiche