Esercizi Select HTML
Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo del tag <select>
nei moduli HTML, per creare i noti “menu a tendina”.
Esercizio 1
Crea una `select` con alcune opzioni per la scelta.
<!DOCTYPE html><html> <head> <title>Esercizio 1</title> </head> <body> <select> <option value="opzione1">Opzione 1</option> <option value="opzione2">Opzione 2</option> <option value="opzione3">Opzione 3</option> </select> </body></html>
Esercizio 2
Crea una `select` con una opzione selezionata di default.
<!DOCTYPE html><html> <head> <title>Esercizio 2</title> </head> <body> <select> <option value="opzione1">Opzione 1</option> <option value="opzione2" selected>Opzione 2 (predefinito)</option> <option value="opzione3">Opzione 3</option> </select> </body></html>
Esercizio 3
Crea una `select` con alcune opzioni disabilitate.
<!DOCTYPE html><html> <head> <title>Esercizio 3</title> </head> <body> <select> <option value="opzione1">Opzione 1</option> <option value="opzione2" disabled>Opzione 2 (disabilitato)</option> <option value="opzione3">Opzione 3</option> </select> </body></html>
Esercizio 4
Crea una `select` con gruppi di opzioni.
<!DOCTYPE html><html> <head> <title>Esercizio 4</title> </head> <body> <select> <optgroup label="Gruppo 1"> <option value="opzione1">Opzione 1</option> <option value="opzione2">Opzione 2</option> </optgroup> <optgroup label="Gruppo 2"> <option value="opzione3">Opzione 3</option> <option value="opzione4">Opzione 4</option> </optgroup> </select> </body></html>
Esercizio 5
Aggiungi attributi personalizzati alle opzioni della `select`.
<!DOCTYPE html><html> <head> <title>Esercizio 5</title> </head> <body> <select> <option value="opzione1" data-info="importante">Opzione 1</option> <option value="opzione2" data-info="normale">Opzione 2</option> <option value="opzione3" data-info="opzionale">Opzione 3</option> </select> </body></html>
Esercizio 6
Crea una `select` con un nome e un ID assegnati.
<!DOCTYPE html><html> <head> <title>Esercizio 6</title> </head> <body> <select name="scelta" id="scelta"> <option value="opzione1">Opzione 1</option> <option value="opzione2">Opzione 2</option> <option value="opzione3">Opzione 3</option> </select> </body></html>
Esercizio 7
Crea una `select` con un'etichetta associata.
<!DOCTYPE html><html> <head> <title>Esercizio 7</title> </head> <body> <label for="scelta">Seleziona una opzione:</label> <br /> <select name="scelta" id="scelta"> <option value="opzione1">Opzione 1</option> <option value="opzione2">Opzione 2</option> <option value="opzione3">Opzione 3</option> </select> </body></html>
Esercizio 8
Crea una `select` che permette la selezione multipla.
<!DOCTYPE html><html> <head> <title>Esercizio 8</title> </head> <body> <select name="scelta" id="scelta" multiple> <option value="opzione1">Opzione 1</option> <option value="opzione2">Opzione 2</option> <option value="opzione3">Opzione 3</option> </select> </body></html>
Esercizio 9
Crea una `select` con un'opzione di input personalizzato.
<!DOCTYPE html><html> <head> <title>Esercizio 9</title> </head> <body> <select> <option value="opzione1">Opzione 1</option> <option value="opzione2">Opzione 2</option> <option value="opzione3"> Altro: <input type="text" placeholder="Inserisci la tua opzione" /> </option> </select> </body></html>
Esercizio 10
Aggiungi un testo di riempimento che scompare quando l'utente seleziona una opzione.
<!DOCTYPE html><html> <head> <title>Esercizio 10</title> </head> <body> <select> <option value="" disabled selected>Scegli un'opzione</option> <option value="opzione1">Opzione 1</option> <option value="opzione2">Opzione 2</option> <option value="opzione3">Opzione 3</option> </select> </body></html>