Hvordan man laver en DropDownList i HTML

November 25

Rullemenuer er mest almindeligt anvendte med formularer til at give brugerne en par forskellige muligheder at vælge fra. Men du kan inkludere en rullemenu overalt på din side ved hjælp af HTML uden at bruge en formular. Din rullemenu kan være så længe du ønsker, og kan styles ved hjælp af CSS til bedre at passe ind med dit website layout og farveskema.

Instruktioner

1 Start din drop-down menu med "<vælg name =" menuname ">." Hvis du bruger drop-down menu som en del af en form, skal du sørge for, at navnet er beskrivende og relevante for din formular.

2 Indtast din første mulighed som "<option value =" option1 "> Mulighed 1 </ option>". Den indtastede tekst mellem åbning og lukning tag er, hvad dine besøgende vil se i deres drop-down menuen; det behøver ikke at være den samme som din indstillede værdi. Gentag dette for hver indstilling i din menu.

3 Udpeg en standard valgte indstilling ved at tilføje "valgt =" valgt "" til indstillingen tag, fx <option value = "option1" valgt = "valgte"> Mulighed 1 </ option> ". Hvis dette ikke er angivet, den første post på listen, vises som standard.

4 Luk din drop-down menu med "</ select>". En drop-down menu med tre valgmuligheder, med den anden mulighed er valgt som standard, vil se sådan ud:

<Vælg name = "menuname">

<Option value = "option1"> Mulighed 1 </ option>

<Option value = "option2" valgt = "valgt"> Mulighed 2 </ option>

<Option value = "Funktion3"> Alternativ 3 </ option>

</ Select>

5 Brug CSS til at style dit rullemenu, hvis du ønsker at ændre menuen udseende på din webside. For eksempel, hvis du ønsker at bruge dit websted stylesheet at gøre menuen 100 pixel bred med en sort baggrund og grå tekst, ville du tilføje:

vælge {

bredde: 100px;

baggrund: # 000000;

color: # A8A8A8;}

Du kan også tilføje denne CSS direkte til åbningen "vælg" tag ved at indtaste:

<Vælg name = "menuname" style = "width: 100px; baggrund: # 000000; color: # A8A8A8;">

TIPS

  • For at inkludere et mellemrum som første mulighed, starter din første mulighed med "<option value =" null "> </ option>".
  • Hvis du ønsker at bruge en drop-down menu som en del af din navigation ordning, skal du bruge nogle Javascript til at gøre muligheder klikbare. HTML-kode Tutorial tilbyder en grundlæggende tutorial og kode for at gøre dette: Htmlcodetutorial.com/linking/linking_famsupp_114.html
  • Stilarter kan også anvendes på individuelle valg tags.

relaterede artikler