Du bygger et bestillingsskjema der kunden skal velge leveringsmetode: henting i butikk, hjemlevering eller henting på postkontor. Kunden kan bare velge ett alternativ. En checkbox hadde latt dem velge alle tre, og det gir ikke mening. HTML radioknapper er laget for akkurat dette: en gruppe valg der bare ett kan være aktivt om gangen.
Input type radio: slik fungerer det
En radioknapp er en <input> med type="radio". Visuelt vises den som en sirkel brukeren kan klikke på. Når den er valgt, fylles sirkelen med en prikk. Akkurat som med checkboxer kobler du en <label> til input-elementet med for- og id-attributter.
Plasser label etter input-elementet. Da vises sirkelen til venstre og teksten til høyre. Koblingen mellom label og input gjør at brukeren kan klikke på teksten for å velge alternativet, ikke bare på den lille sirkelen. Det er spesielt viktig på mobil der presisjon er vanskelig.
Name-attributten grupperer radioknapper
Det som gjør radioknapper til en gruppe er name-attributten. Alle radioknapper med samme name tilhører samme gruppe, og nettleseren sørger for at bare én i gruppen kan være valgt. Velger brukeren et nytt alternativ, fjernes valget fra det forrige automatisk.
Her skiller HTML radioknapper seg fra checkboxer. Checkboxer med samme name lar brukeren velge flere. Radioknapper med samme name tillater kun én. Det er name-attributten som styrer denne oppførselen, ikke noe annet.
Hvis du ved et uhell gir to radioknapper ulike name-verdier, behandler nettleseren dem som separate grupper. Da kan brukeren velge begge, og du har mistet hele poenget med radioknapper. Dobbeltsjekk alltid at name er identisk for alle valg som hører sammen.
Value: verdien som sendes til serveren
Hver radioknapp trenger en unik value-attributt. Når skjemaet sendes, pakker nettleseren det valgte alternativet som et nøkkel-verdi-par: name er nøkkelen, value er verdien. Har du tre radioknapper med name="leveringsmetode" og verdiene "butikk", "hjemlevering" og "postkontor", sender nettleseren for eksempel leveringsmetode=hjemlevering.
Bare den valgte radioknappen sendes. De andre ignoreres helt. Det gjør dataen enkel å jobbe med på serversiden, i motsetning til checkboxer der du kan få flere verdier for samme name.
Forhåndsvalgt alternativ med checked
checked-attributten forhåndsvelger en radioknapp når siden lastes. Legg attributten på den input-en du vil ha som standard. Brukeren kan fortsatt velge et annet alternativ.
For radioknapper er et forhåndsvalg ofte lurt. Uten det kan brukeren sende skjemaet uten å ha valgt noe som helst, og serveren får ingen verdi for det feltet. Med et forhåndsvalg sikrer du at det alltid er et valg. Velg den mest vanlige verdien som standard. I et leveringsvalg kan "Hjemlevering" være et godt standardvalg fordi det er det flest velger.
Du kan bare sette checked på én radioknapp i gruppen. Setter du det på flere, bruker nettleseren den siste. Det er ikke en feilmelding du får, bare uventet oppførsel. Derfor bør du alltid dobbeltsjekke at bare ett alternativ har checked-attributten.
Fieldset og legend for visuell gruppering
Radioknapper hører alltid sammen i en gruppe, og <fieldset> med <legend> er den beste måten å vise det på. Fieldset tegner en ramme rundt gruppen, og legend gir den en overskrift, for eksempel "Leveringsmetode".
Strukturen er enkel: fieldset ytterst, legend som første element med gruppetittelen, og deretter alle radioknapp-parene med input og label. Nettleseren rendrer dette med en ramme og tittelen plassert i rammen.
For tilgjengelighet er fieldset og legend ekstra viktig for radioknapper. En skjermleser annonserer legend-teksten før den leser opp alternativene. Uten fieldset hører brukeren bare "Henting i butikk, radio button" uten å vite hva spørsmålet er. Med fieldset hører de "Leveringsmetode, Henting i butikk, radio button". Konteksten gjør hele forskjellen.
Forskjellen mellom radioknapper og checkboxer
Radioknapper og checkboxer ser like ut i koden, men oppfører seg helt ulikt. Forskjellen koker ned til ett spørsmål: skal brukeren velge ett eller flere alternativer?
- Radioknapper (type="radio"): brukeren velger nøyaktig ett alternativ i gruppen. Velger de et nytt, fjernes det forrige.
- Checkboxer (type="checkbox"): brukeren kan velge så mange de vil, uavhengig av hverandre.
Bruk radioknapper for ting som leveringsmetode, betalingsmåte, kjønn og ja/nei-spørsmål. Bruk checkboxer for interesser, preferanser og alt der flere valg gir mening. Velger du feil type, forvirrer du brukeren fordi skjemaet oppfører seg annerledes enn forventet.
En tommelfingerregel: hvis du kan formulere spørsmålet som "Velg én", bruk radioknapper. Hvis det er "Velg alle som gjelder", bruk checkboxer. Du kan lese mer om radioknapper i MDN Web Docs sin radio-dokumentasjon.
Neste steg
Radioknapper fungerer best når du har 2 til 5 alternativer. Har du mange flere, tar listen mye plass på siden. Da er en nedtrekksmeny med select og option et bedre alternativ. Vil du lære mer om checkboxer for flervalg, les artikkelen om avmerkingsbokser i HTML. For en oversikt over alle skjemaelementer, se skjema-oversikten.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset lærer du å sette opp radioknapper i praksis, sammenligner dem med checkboxer, og bygger komplette skjema der du kombinerer ulike inputtyper.
