Hoe maak je een Drop Down met categorieën met behulp van HTML

HTML staat webontwikkelaars om formulieren te maken voor webpagina's die van eenvoudige tot complexe variëren. Hoewel HTML op zichzelf niet een volledig functionerende formulier kunt maken, kunt u het voor het maken van de basis elementen--invoervelden, tekstvakken en selecteer vakken--op uw Web-pagina. Wanneer u maken van vervolgkeuzelijsten wilt zodat gebruikers om te selecteren uit een groot aantal opties, zal de "< optgroup >" tag laten u de opties in categorieën met koppen organiseren. Deze tags gebruiken om te selecteren uit de drop-downs gemakkelijker en sneller voor bezoekers van uw site.

Instructies

1

Ga naar "Start", en "Kladblok" Voer in het zoekvak. Open het HTML-bestand van de webpagina waar u wilt toevoegen van de drop-down box. Zoek het gedeelte van de pagina waar u wilt toevoegen van het vak, en een paar lege regels toe te voegen, en plaats de cursor in het midden van de nieuwe witte ruimte.

2

"< Select >" tags toevoegen aan uw code te maken van de drop-down box. Het HTML-element hierdoor staat bekend als een "select box" of "selection box":

< naam selecteren = "dropdown" >

< / select >

Geef het vak selecteren een naam die u gebruikt wanneer u een script om te werken met het formulier later maken.

3

Een lijst met opties tussen de "< select >" tags toevoegen, en elke optie in "< optie >" codes plaatsen:

< naam selecteren = "dropdown" >

< optie waarde = "Eerste" > eerste optie < / optie >

< optie waarde = "Tweede" > tweede optie < / optie >

< / select >

Stel het kenmerk "waarde" van elke optie op een unieke naam die u gebruiken kunt bij het uitvoeren van scripts.

4

Elke groep van opties in "< optgroup >" codes te organiseren uw opties in categorieën plaatsen. Stel vervolgens het kernmerk "label" van elke openen "< optgroup >" tag te geven elk van uw opties categorieën een rubriek:

< naam selecteren = "dropdown" >

< optgroup label = "Sommige opties" >

&lt;option value="First">First Option&lt;/option>

&lt;option value="Second">Second Option&lt;/option>

< / optgroup >

< / select >