Uno degli obiettivi di HTML5 è quello di ridurre la necessità di utilizzare codice JavaScript, quando una certa funzionalità può essere facilmente implementata attraverso markup o CSS.
In tal senso, il tag datalist introduce la possibilità di utilizzare un set di elementi che rappresentano opzioni predefinite per un certo campo, pur lasciando la possibilità all'utente di inserire un valore non presente, a differenza di una classica option list ottenuta con il tag select.
Il tag datalist non ha una corrispondente forma visuale, ma si appoggia ad un controllo di tipo input: per questo motivo è generalmente reso invisibile all'interno dei CSS, così da venire ignorato da browser che non dovessero supportarlo. Il tag input viene legato al datalist grazie all'attributo list, come nell'esempio che segue:
<label>La tua provincia: <input type="text" name="province" list="provinces" /> <datalist id="provinces"> <option value="AG">Agrigento</option> <option value="AL">Alessandria</option> <option value="AN">Ancona</option> ... </datalist> </label>
L'effetto che otteniamo dipende dal browser. Nella figura che segue, dall'alto in basso, possiamo notare il rendering di IE 11, Chrome 32 e FireFox 26.

Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare la parola chiave nameof per referenziare i nomi dei parametri di un metodo in C#
Linting di un Dockerfile con un workflow di GitHub
Sfruttare la local cache del browser tramite gli ETag in ASP.NET Core
Sfruttare i tag nell'output cache di ASP.NET Core 7
Sfruttare il portale Azure per creare script di automazione
Definire la durata dell'output cache in ASP.NET Core 7
Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Workflow di continuous deployment tramite pull request label in GitHub
Specificare il numero di parentesi graffe nella string interpolation in combinazione con i string literal in C#
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Eseguire attività con Azure Container Jobs
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5