Du trenger at brukeren velger land fra en liste med over 200 alternativer. Radioknapper ville tatt opp hele siden. En HTML nedtrekksmeny viser bare det valgte alternativet og folder ut resten når brukeren klikker. Select-elementet er det du bruker, og det krever overraskende lite kode for å få på plass.
Select og option: byggesteinene i en nedtrekksmeny
<select> er selve nedtrekksmenyen. Inni plasserer du <option>-elementer, ett for hvert valg. Teksten mellom option-taggene er det brukeren ser. Select trenger en name-attributt for at verdien skal sendes med skjemaet, og en id for å kobles til en label.
Koblingen mellom label og select fungerer på nøyaktig samme måte som med input-elementer: for-attributten på labelen matcher id-attributten på select. Når brukeren klikker på labelteksten, åpnes nedtrekksmenyen. Det er en liten detalj som gjør skjemaet mer brukervennlig.
Hver option bør ha en value-attributt. Verdien i value er det som sendes til serveren, mens teksten mellom taggene er det brukeren ser. Du kan for eksempel vise "Norge" for brukeren men sende "NO" til serveren. Uten value-attributt sender nettleseren teksten inni option-elementet som verdi.
Standardvalg og plassholdertekst
Uten noen tilpasninger viser nedtrekksmenyen det første alternativet som standard. Det er sjelden det du vil. Brukeren kan da sende skjemaet uten å ha tatt et bevisst valg, fordi det første alternativet allerede er valgt.
Løsningen er å legge til en tom option som første element. Gi den en tom value-attributt og en tekst som "Velg land" eller "Velg et alternativ". Denne fungerer som plassholdertekst. Kombiner det med required-attributten på select-elementet, og nettleseren hindrer brukeren fra å sende skjemaet uten å velge noe.
Uten required kan brukeren sende skjemaet med den tomme verdien. Med required får de en feilmelding fra nettleseren som sier at de må velge et alternativ. Ingen JavaScript nødvendig.
Optgroup: grupper alternativer med overskrifter
Lange lister blir uoversiktlige. <optgroup> lar deg dele alternativene inn i grupper med overskrifter. Attributten label på optgroup bestemmer overskriftsteksten. Inni optgroup plasserer du option-elementene som hører til den gruppen.
Tenk deg en nedtrekksmeny for å velge favorittdyr. Du kan gruppere med optgroup: "Smådyr" med alternativene hamster, kanin og marsvin, og "Store dyr" med hest, ku og elefant. Brukeren ser overskriftene i listen, men kan ikke velge dem. Bare option-elementene inni er klikkbare.
Optgroup er spesielt nyttig for lange lister der brukeren ellers må scrolle gjennom alle alternativene for å finne riktig. Grupperingen gir visuell struktur som gjør det raskere å navigere.
Size-attributten: vis flere alternativer samtidig
Normalt viser en HTML nedtrekksmeny med select bare én linje og folder ut når brukeren klikker. size-attributten endrer dette. Sett size="5", og nedtrekksmenyen viser fem alternativer samtidig som en synlig liste. Brukeren scroller i listen for å se resten.
Med size ser select-elementet mer ut som en listeboks enn en nedtrekksmeny. Det kan være nyttig når du vil at brukeren alltid ser flere alternativer uten å måtte klikke. Men for de fleste skjema er den vanlige nedtrekksmenyen (uten size) det beste valget fordi den tar minst plass.
Multiple: la brukeren velge flere
multiple-attributten på select lar brukeren velge mer enn ett alternativ. De holder inne Ctrl (Windows) eller Cmd (Mac) mens de klikker for å velge flere. Når multiple er satt, viser nettleseren automatisk en listeboks i stedet for en nedtrekksmeny.
Multiple sender alle valgte verdier til serveren med samme name, på samme måte som checkboxer: dyr=hamster&dyr=kanin. Det fungerer teknisk, men brukeropplevelsen er dårlig. De fleste brukere vet ikke at de må holde inne Ctrl eller Cmd. Hvis du trenger flervalg, er checkboxer nesten alltid et bedre alternativ fordi de er mer intuitive.
Disabled på enkeltvalg
Du kan sette disabled på individuelle option-elementer. Et disabled alternativ vises i listen (gjerne grått), men kan ikke velges. Det er nyttig for alternativer som midlertidig ikke er tilgjengelige, for eksempel et utsolgt produkt i en størrelsesvelger.
Du kan også sette disabled på hele select-elementet. Da blir hele nedtrekksmenyen uklikkbar, og ingen verdi sendes med skjemaet. Bruk dette når hele feltet skal være utilgjengelig, for eksempel før brukeren har fylt ut et annet felt.
Når du bør velge select fremfor radioknapper
Select og radioknapper løser samme problem: brukeren velger ett alternativ. Forskjellen er presentasjonen. Radioknapper viser alle alternativene synlig på siden. Select skjuler dem i en nedtrekksmeny.
- 2 til 5 alternativer: bruk radioknapper. Alle valgene er synlige, og brukeren trenger bare ett klikk.
- 6 eller flere alternativer: bruk select. Listen tar for mye plass med radioknapper.
- Veldig mange alternativer (land, byer): select er det eneste praktiske valget.
For en komplett oversikt over select-elementet og alle attributtene kan du sjekke MDN Web Docs sin select-dokumentasjon.
Neste steg
Nå kan du bygge nedtrekksmenyer med select, option og optgroup. Sammen med grunnleggende skjemastruktur, avmerkingsbokser og radioknapper har du alle verktøyene du trenger for å lage komplette HTML-skjema. Vil du forstå mer om HTML generelt, kan du utforske artiklene på HTML-oversikten.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset bygger du nedtrekksmenyer steg for steg, bruker optgroup for gruppering, og ser hvordan select fungerer sammen med resten av skjemaet i praktiske eksempler.
