Hvordan legge til utvalg bokser i HTML

July 19

Form elementer som inneholder den grå "ned" piltasten til høyre kalles "utvalg bokser" i HTML. Bruk valgboksene for å gi brukerne en lang liste av endelige valg, for eksempel år eller stater. Ved hjelp av bare HTML, kan du gruppere alternativer under overskrifter og sette ett alternativ som standard. For å opprette et utvalg boks, trenger du minst et par av "<Velg>" tags innpakning rundt en liste over alternativer, og hvert alternativ må innpakning "<alternativ>" tags. Behandling og styling valgboksen og alternativene krever programmering og Cascading Style Sheets (CSS) kode.

Bruksanvisning

1 Skriv inn et par "<Velg>" koder i HTML-filen der du vil at valgboksen skal vises. Gi åpningen "<Velg>" tagge et "navn" attributtet slik at du kan ta tak i brukerens valg når du skriver skriptet til å håndtere skjemaet. Sett ID-attributtet til en unik og meningsfylt navn slik at du kan style esken med CSS. Her er kodene:

</ Velge>

2 Skriv en liste over alternativer mellom "<Velg>" koder, sette hvert alternativ på en egen linje. Pakk hvert alternativ med "<alternativ>" tags som dette:

<Alternativ> første alternativet </ option>

<Alternativ> andre alternativet </ option>

</ Velge>

3 Gi hvert alternativ en "verdi" attributtet og sette verdien til innholdet i valget, som dette:

<Option value = "First Option"> første alternativet </ option>

4 Tilsett "valgt" attributt til et alternativ du vil angi som standard. Sett "valgt" til "valgt" som så:

<Option value = "First Option" selected = "selected"> første alternativet </ option>

Når en besøkende laster siden, vil de se at alternativet allerede valgt i valgboksen.

5 Lag grupper av alternativene ved å pakke "<alternativ>" tags med "<OPTGROUP>" tags. Still "label" egenskap av "<OPTGROUP>" til navnet du ønsker å gi muligheten til gruppen. Dette navnet vises i fet skrift i valgboksen. Nettlesere rykke alternativene under opsjons grupper. Her er et eksempel på en alternativ gruppe kode:

<Alternativ> første alternativet </ option>

<Alternativ> andre alternativet </ option>

</ OPTGROUP>

Hint

Bruk Javascript for å validere skjemaet og sende informasjonen til en annen webside eller e-postkontoen.
Bruk CSS til å style din valgboksen. Du kan endre farger, grenser og fonter. Siden hver nettleser stiler utvalg bokser i en litt annen måte, sette grenser og skrifter for å få et design som fungerer på samme måte i alle nettlesere.
Sikkerhetskopiere HTML og CSS-filer før du redigerer dem.