Utilizzare l'Elemento Datalist per Input di Tipo Range

Introduzione

In questo tutorial esploreremo come combinare l´elemento <datalist> con un input di tipo range per migliorare l´esperienza utente nei form HTML. L´uso di datalist consente di fornire suggerimenti dinamici agli utenti mentre selezionano un valore da un intervallo, rendendo l´interazione più intuitiva e veloce. Questo approccio è particolarmente utile quando si desidera limitare le scelte a valori specifici, ma allo stesso tempo offrire la flessibilità di un input di tipo range.

Codice completo

<form action="#" method="post">
    <label for="rangeInput">Seleziona un valore:</label>
    <input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="50" list="suggestions" oninput="updateDatalist(this.value)">
    <datalist id="suggestions">
        <option value="0">0</option>
        <option value="20">20</option>
        <option value="40">40</option>
        <option value="60">60</option>
        <option value="80">80</option>
        <option value="100">100</option>
    </datalist>
    
    <p>Valore selezionato: <span id="selectedValue">50</span></p>
    
    <button type="submit">Invia</button>
</form>

<script>
    function updateDatalist(value) {
        document.getElementById(´selectedValue´).innerText = value;
    }
</script>

Spiegazione

Analizziamo il codice fornito:

Form: Il form è definito con l´attributo action impostato su # per indicare che non verrà inviato a un server reale, e method impostato su post.
Input di tipo Range: L´input di tipo range consente all´utente di selezionare un valore tra un minimo e un massimo. In questo caso, il valore minimo è 0 e il massimo è 100, con un valore iniziale di 50.
Datalist: L´elemento datalist contiene una serie di <option> che rappresentano i valori suggeriti. Questi valori possono essere visualizzati mentre l´utente interagisce con l´input di tipo range.
Funzione JavaScript: La funzione updateDatalist aggiorna il contenuto di un elemento <span> per mostrare il valore attuale selezionato dall´input di tipo range. Questo fornisce un feedback immediato all´utente.

Best practice

Usa valori significativi: Assicurati che i valori nel datalist siano pertinenti e utili per l´utente. Ad esempio, se stai creando un form per la selezione di una temperatura, potresti voler includere valori come 0, 20, 40, ecc.
Accessibilità: Assicurati che il tuo form sia accessibile. Utilizza etichette chiare e fornisci descrizioni adeguate per gli screen reader.
Feedback visivo: Considera di aggiungere un feedback visivo per il valore selezionato, come un cambiamento di colore o un´animazione, per migliorare l´esperienza utente.
Testa su diversi browser: Verifica che il tuo form funzioni correttamente su diversi browser e dispositivi, poiché il supporto per datalist può variare.

Riepilogo

In questo tutorial abbiamo visto come utilizzare l´elemento datalist in combinazione con un input di tipo range per migliorare l´interazione dell´utente con i form HTML. Questa combinazione offre un modo efficace per fornire suggerimenti e feedback immediato, rendendo l´esperienza utente più fluida e intuitiva.

Approfondisci con risorse ufficiali

Add as preferred source on Google