Come creare un menu a discesa orizzontale in HTML

In HTML, i menu a discesa sono una funzione dei moduli. Offrono alla persona che compila il modulo diverse opzioni predefinite, senza occupare molto spazio. L’HTML per un menu a discesa è semplice e deve essere incluso tra il tag di apertura e quello di chiusura per funzionare all’interno del modulo di posta. Puoi modellare ulteriormente il tuo menu a discesa con CSS per renderlo più uniforme e adatto al design della tua pagina.

1

Scrivi il tag di apertura per il tuo menu a discesa, che è. Avere un nome per il menu aiuta il gestore del modulo a identificare ed etichettare l’output di conseguenza. Ciò varierà, tuttavia, a seconda di come hai impostato il tuo sito web per gestire i moduli.

2

Aggiungi le opzioni che desideri per il menu a discesa con il tag delle opzioni. Potrebbe assomigliare a questo:

Alice Bob

Puoi averne quante ne vuoi, anche se creare troppe opzioni potrebbe non essere pratico per un menu a discesa, soprattutto se rischi di superare l’altezza della finestra. Se hai più di una dozzina di opzioni a discesa, potresti prendere in considerazione l’utilizzo di pulsanti e colonne di opzione per le tue opzioni.

3

Chiudi il tag una volta terminato con i tag, ad esempio

Alice Bob Charlie Dane Edward Frances

4

Se desideri iniziare con un’opzione specifica selezionata, puoi aggiungere ‘selected = “selected”‘ a un’opzione, ad esempio

Alice Bob Charlie Dane Edward Frances

Se non utilizzi questo tag, il menu a discesa utilizzerà la tua prima opzione come opzione selezionata predefinita.

5

Modifica lo stile predefinito del menu a discesa specificando il tag di selezione nel foglio di stile, ad esempio:

seleziona {font-size: 14px; sfondo: # 8CCCC8; colore: #FFFFFF; bordo: 1px solido # 000000; larghezza: 75px; }

Puoi farlo anche con “opzione” se vuoi cambiare l’aspetto delle opzioni. Ad esempio, potresti volere che l’opzione selezionata abbia testo bianco, con le altre opzioni in testo nero quando l’utente fa clic sulla freccia per visualizzarle.