Nwlapcug.com


Come fare un controllo DropDownList in HTML

Drop-down menu utilizzati più frequentemente con le forme per dare agli utenti un paio di diverso opzioni per selezionare da. Tuttavia, è possibile includere un menu a discesa in un punto qualsiasi nella pagina utilizzando HTML senza l'utilizzo di un modulo. Il menu a discesa è possibile fintanto che si desidera e può essere stile usando i CSS per meglio adattarsi con combinazione di colori e layout del tuo sito Web.

Istruzioni

1

Avviare il menu a discesa con "< select nome ="nomemenu">." Se si utilizza il menu a discesa come parte di un modulo, assicurarsi che il nome sia descrittivo e pertinenti al form.

2

Inserisci la tua prima opzione come "< valore opzione ="Val1"> opzione 1 < / option >". Il testo inserito tra l'apertura e il tag di chiusura è ciò che il visitatore vedrà nel loro menu a discesa; non è necessario essere lo stesso come il valore impostato. Ripetere questa operazione per ogni opzione nel menu.

3

Designare un'opzione predefinita selezionata aggiungendo "selezionato ="selected"" al tag di opzione, ad esempio < valore opzione = "Val1" selezionato = "selected" > opzione 1 < / option >. " Se questo non è impostato, il primo elemento nell'elenco verrà visualizzato per impostazione predefinita.

4

Chiudere il menu a discesa con "< / Seleziona >". Un menu a discesa con tre opzioni, con la seconda opzione, selezionata per impostazione predefinita, sarebbe simile a questa:

< select nome = "nomemenu" >

< valore opzione = "Val1" > opzione 1 < / option >

< valore opzione = "opzione2" selezionato = "selected" > opzione 2 < / option >

< valore opzione = "option3" > opzione 3 < / option >

< / selezionare >

5

Utilizzare CSS per lo stile il vostro menu a discesa, se si voleva cambiare l'aspetto del menu sulla tua pagina Web. Per esempio, se si desidera utilizzare il foglio di stile del tuo sito Web per rendere il menu 100 pixel di larghezza con uno sfondo nero e testo grigio, è necessario aggiungere:

Selezionare {

Larghezza: 100px;

sfondo: #000000;

colore: #A8A8A8;}

Si potrebbe anche aggiungere questo CSS direttamente all'apertura "selezionare" tag inserendo:

< select nome = "nomemenu" style = "width: 100px; background: #000000; color: #A8A8A8;" >

Consigli & Avvertenze

  • Per includere uno spazio vuoto come prima opzione, avviare la tua prima opzione con "< option value ="null">< / option >".
  • Se si desidera utilizzare un menu a discesa come parte del vostro sistema di navigazione, avrai bisogno di utilizzare alcuni Javascript per rendere le opzioni selezionabili. Corso codice HTML offre un tutorial di base e il codice per eseguire questa operazione: Htmlcodetutorial.com/linking/linking_famsupp_114.html
  • Gli stili possono essere applicati anche ai tag di opzione individuale.