Come fare un HTML Drop Box

September 15

Come fare un HTML Drop Box


Durante la progettazione di una pagina web o un intero sito in HTML, potrebbe essere necessario un drop box HTML. Se non si ha già familiarità con queste scatole, sono quei piccoli campi nifty (spesso si trovano in moduli HTML) che permettono di selezionare un elemento da un elenco cliccando su una freccia, poi scorrendo verso il basso per trovare l'opzione desiderata nel lista che scende sotto quella freccia. Sia che si utilizzi un editor HTML o codice a mano, creando una casella di riepilogo HTML è semplice.

istruzione

1 Creare un modulo HTML per ospitare la tua casella di riepilogo HTML. All'interno di un modulo HTML, è possibile utilizzare un drop box HTML per tutto da permettere ad un utente di indicare le preferenze in un invio di un modulo e-mail per la creazione di un reindirizzamento automatico in base all'opzione nell'elenco che l'utente fa clic.

2 Scegliere un tag "Select" se si utilizza un editor HTML, o se si codifica a mano il codice HTML. Digitare quanto segue:

<Select>
<Option> </ option>
</ Select>

3 Utilizzando il tag "Opzioni" all'interno del tuo tag "Select". Aggiungere in tutti gli elementi che avete bisogno di apparire nella lista per la vostra casella di riepilogo. Aggiungere un valore per ogni elemento della lista, quindi lo script modulo sarà in grado di interpretare la selezione dell'utente. È possibile aggiungere il numero di tag "opzioni" di cui hai bisogno. Dopo aver completato questo passaggio, il tag HTML dovrebbe essere simile a questo:

<Select>
<Option value = "opzione1"> Opzione 1 </ option>
<Option value = "OPZIONE2"> opzione 2 </ option>
<Option value = "Option3"> opzione 3 </ option>
</ Select>

Qualunque cosa si digita tra l'apertura e la chiusura tag "Option" sarà quello che appare nella casella di riepilogo. L'attributo valore è per l'utilizzo da parte lo script modulo.

4 Lascia la tua tag "Select" un attributo name, soprattutto se si prevede di utilizzare più caselle di goccia all'interno di una forma. Lo script modulo può richiedere il tag "Seleziona" per avere un attributo nome. Il tuo tag di apertura "Select" dovrebbe essere simile a questo:

<Select name = "My Select Box">

5 Impostare un attributo size nel tag "Select", se si desidera più di una voce per essere visibile nella lista quando l'utente carica la pagina. Ad esempio, per mostrare tre elementi della pagina, cambiare il tag "Select" in questo modo:

<Select name = "My Select Box" size = "3">

6 Completare eventuali modifiche di programmazione per lo script che si intende utilizzare con il modulo, e aggiungere i riferimenti appropriati nel file HTML. I requisiti esatti variano in base a ciò che si intende fare con il modulo. Ma se si utilizza Javascript per causare un redirect con il drop box, potrebbe essere necessario aggiungere un attributo onchange al tag "Select" che punta alla posizione del vostro script. Inoltre, lo script dovrà contenere le istruzioni dire quale pagina reindirizzare a per ogni opzione nella tua casella di riepilogo.

Consigli e avvertenze

  • Se si desidera che una delle voci nel proprio elenco per essere preselezionato quando l'utente carica la pagina, aggiungere questo nel tag "Option" per l'elemento: selezionato = "selezionato"
  • Per consentire all'utente di selezionare più di un elemento nell'elenco, ad esempio in un invio di form, aggiungere il seguente nel tag "Select": multipla = "multiple"
  • E 'sempre una buona idea per testare le pagine web in più browser per assicurarsi che essi sono compatibili con diverse piattaforme.