Hvordan lage en HTML Drop Box

Hvordan lage en HTML Drop Box


Når du utformer en nettside eller et helt nettsted i HTML, kan du trenger en HTML-drop-boksen. Hvis du ikke allerede er kjent med disse boksene, de er de fiffige små felt (ofte finnes i HTML-skjemaer) som lar deg velge et element fra en liste ved å klikke på en pil, og deretter bla nedover for å finne det du vil ha i listen som faller ned under at pilen. Enten du bruker en HTML-editor eller koding for hånd, noe som skaper en HTML-drop-boksen er enkel.

Bruksanvisning

1 Opprette et HTML-skjema for å huse HTML drop-boksen. Innenfor et HTML-skjema, kan du bruke en HTML dråpe boks til alt fra å la en bruker for å indikere preferanser i en form epost innsending til å skape en automatisk viderekobling basert på alternativet i listen som brukeren klikker.

2 Velg en "Select" tag hvis du bruker en HTML-editor, eller hvis du er hånd-koding HTML. Skriv inn følgende:

<Velg>
<Option> </ option>
</ Velge>

3 Bruke "Option" tag i din "Select" tag. Legg i alle de elementene du trenger for å vises i listen for drop-boksen. Legg en verdi for hvert element i listen, slik at skjemaet skriptet vil være i stand til å tolke brukerens valg. Du kan legge til så mange "Option" koder som du trenger. Når du har fullført dette trinnet, bør HTML-koden se omtrent slik ut:

<Velg>
<Option value = "Alternativ 1"> Alternativ 1 </ option>
<Option value = "Alternativ 2"> Alternativ 2 </ option>
<Option value = "Alternativ 3"> Alternativ 3 </ option>
</ Velge>

Uansett hva du skriver mellom åpning og lukking "Option" kodene vil være det vises i rulleboksen. Verdien attributtet er for bruk av skjemaet script.

4 Gi "Velg" tag et navn attributt, spesielt hvis du skal bruke flere slippbokser i løpet av ett skjema. Skjemaet script kan kreve "Select" tag å ha et navn attributt. Din åpning "Select" tag bør se omtrent slik ut:

<Velg name = "My Velg Box">

5 Sett en størrelse attributtet i "Select" tag hvis du ønsker mer enn ett element for å være synlig i listen når brukeren laster siden. For eksempel, for å vise tre elementer på siden, endre "Velg" tag som dette:

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

6 Fullfør eventuelle programmerings tilpasninger til skriptet du har tenkt å bruke sammen med skjemaet, og legge de riktige referansene i HTML-filen. De eksakte kravene vil variere basert på hva du har tenkt å gjøre med din form. Men hvis du bruker Javascript for å forårsake en side omdirigere med drop-boksen, må du kanskje legge en OnChange attributt til "Velg" tag som peker til plasseringen av skriptet. Dessuten vil skriptet må inneholde instruksjoner som forteller hvilken side som skal viderekoble til for hvert alternativ i drop-boksen.

Hint

  • Hvis du ønsker en av elementene i listen for å være forhåndsvalgt når brukeren laster siden, legger dette inn i "Option" tag for dette elementet: selected = "selected"
  • Hvis du vil tillate brukeren å velge mer enn ett element i listen, for eksempel i et skjema for innsending, legge følgende inn i "Select" tag: multiple = "flere"
  • Det er alltid en god idé å teste websider i flere nettlesere for å sørge for at de er kompatible med ulike plattformer.