Menu a discesa
Fa parte della sezione Fondamenti del percorso HTML di Coddy. Lezione 43 di 60.
In HTML, un menu a discesa è un elenco di elementi che appare quando un utente fa clic su un elemento o ci passa sopra con il cursore. I menu a discesa sono comunemente usati per presentare un elenco di opzioni in modo compatto. Per creare un menu a discesa, si usa il tag <select> insieme ai tag <option> per i singoli elementi.
Ecco la sintassi di base per creare un menu a discesa in HTML:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: Il tag che definisce il menu a discesa.
name: un attributo che assegna un nome al menu a discesa, utilizzato per identificare il valore selezionato quando il modulo viene inviato.
<option>: Un tag che definisce un elemento nell’elenco a discesa.
value: Un attributo che specifica il valore associato all'opzione. Questo valore viene inviato al server quando il modulo viene inviato.
Option text: Il testo visibile che appare nell’elenco a discesa per ciascuna opzione.
Ecco un esempio di come creare un menu a discesa con tre opzioni:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>In questo esempio, abbiamo un menu a discesa con il nome "colors" e tre opzioni: Rosso, Verde e Blu.
Sfida
FacileCrea un documento HTML che includa un modulo con un menu a discesa. Il modulo deve avere i seguenti elementi:
- Un menu a discesa con il nome "fruits".
- Il menu a discesa deve avere quattro opzioni con i seguenti valori e testi:
- Valore: "apple", Testo: "Apple"
- Valore: "banana", Testo: "Banana"
- Valore: "orange", Testo: "Orange"
- Valore: "grape", Testo: "Grape"
Provalo tu
<!DOCTYPE html>
<html>
<body>
<!-- Scrivi il codice qui -->
</body>
</html>Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Fondamenti di HTML
Che cos’è HTML?Struttura di base di un documento HTMLTag ed elementiAnnidamento e tag di chiusuraCommenti in HTML7Pagina del profilo personale
Panoramica del progettoSezione intestazione2Testo e formattazione
IntestazioniParagrafiInterruzioni di rigaTesto in grassetto e corsivoAncora grassetto e corsivoRiepilogo - formattazione5Aggiungere contenuti
Attributi HTMLCollegamentiCollegamenti a nuove pagineImmaginiAttributi delle immagini8Moduli e campi di input - Parte 1
Nozioni di base sui moduliCampi di testoAttributi degli inputCampo passwordEtichette per gli inputRiepilogo - modulo di base11Pagina di registrazione all'evento
Panoramica del progettoSezione intestazione9Moduli e input - Parte 2
Pulsanti di opzioneCaselle di controlloMenu a discesaPulsantiPulsanti nei moduliRiepilogo - Moduli #1Riepilogo - Moduli #2Esercitati da solo: Playground Web