Du lager et registreringsskjema der brukere skal velge hvilke programmeringsspråk de kan. HTML, CSS, JavaScript, kanskje Python. Brukeren skal kunne huke av flere alternativer samtidig. Det er akkurat dette en HTML checkbox løser. Avmerkingsbokser lar brukeren slå av og på individuelle valg, uavhengig av hverandre.
Slik lager du en avmerkingsboks med input type checkbox
En checkbox er en <input> med type="checkbox". Feltet vises som en liten boks brukeren kan klikke på for å huke av. Akkurat som med tekstfelt trenger hver checkbox en <label> koblet med for- og id-attributter.
Forskjellen fra tekstfelt er at du plasserer label etter input-elementet. Da vises avmerkingsboksen til venstre og teksten til høyre, som er det brukere forventer. Setter du label først, havner teksten til venstre for boksen, noe som ser feil ut.
Koblingen mellom label og input er spesielt viktig for checkboxer. Selve boksen er liten og vanskelig å treffe med fingeren på mobil. Når label er koblet, kan brukeren klikke på teksten i stedet. Det gjør skjemaet mye enklere å bruke.
Value-attributten: hva sendes til serveren
Hver checkbox trenger en value-attributt som bestemmer verdien som sendes når brukeren har huket av. Uten value sender nettleseren bare "on" som verdi. Det er ubrukelig når du har flere avmerkingsbokser i samme gruppe.
Tenk deg tre checkboxer for interesser: HTML, CSS og JavaScript. Alle tre har name="user-interests", men ulike verdier: value="html", value="css" og value="javascript". Når brukeren huker av HTML og CSS, sender nettleseren user-interests=html&user-interests=css. Serveren mottar begge verdiene fordi name-attributten er den samme.
Det er name-attributten som grupperer checkboxene logisk. Alle avmerkingsbokser som hører sammen skal ha samme name, men hver sin unike value og id.
Forhåndsvalgte checkboxer med checked
Noen ganger vil du at en checkbox allerede er avhuket når siden lastes. Det gjør du med checked-attributten. Bare legg til ordet "checked" på input-elementet, uten noen verdi. Brukeren kan fortsatt fjerne haken.
Bruk checked med omhu. Forhåndsvalgte avmerkingsbokser kan spare brukeren tid hvis standarden er det de fleste ville valgt. Men forhåndsavhukede bokser for nyhetsbrev eller markedsføring er irriterende og kan bryte med personvernregler. Bruk det bare når det faktisk hjelper brukeren.
Fieldset og legend: grupper avmerkingsbokser visuelt
Når du har flere checkboxer som hører sammen, kan du pakke dem i et <fieldset>-element med en <legend>. Fieldset tegner en ramme rundt gruppen, og legend viser en tittel i rammen. Det gir en tydelig visuell gruppering.
Slik ser strukturen ut: fieldset som ytterste element, legend som første barn med teksten "Velg dine interesser", og deretter alle checkbox-parene med input og label. Nettleseren legger automatisk til en ramme og plasserer legend-teksten i rammen.
Fieldset er ikke bare visuelt. Skjermlesere annonserer legend-teksten før de leser opp hvert valg i gruppen. Det gir blinde brukere konteksten de trenger for å forstå hva avmerkingsboksene handler om. Uten fieldset hører de bare "HTML, checkbox" uten å vite at det dreier seg om interesser.
Disabled: hindre brukeren i å velge
disabled-attributten gjør en avmerkingsboks grå og uklikkbar. Brukeren ser valget, men kan ikke huke det av. En disabled checkbox sender heller ikke verdien sin med skjemaet.
Et vanlig bruksområde er alternativer som krever en oppgradering eller et annet valg først. For eksempel kan "Avansert JavaScript" være disabled til brukeren har huket av for "JavaScript". Denne logikken krever JavaScript for å aktivere feltet dynamisk, men selve disabled-attributten er ren HTML.
Merk at disabled og checked kan brukes samtidig. En checkbox kan være forhåndsvalgt men låst, slik at brukeren ser valget uten å kunne endre det. Verdien fra en disabled checkbox sendes likevel ikke med skjemaet, så på serversiden må du håndtere den verdien separat.
Vanlige feil med checkboxer
Den vanligste feilen er å glemme value-attributten. Alt ser riktig ut i nettleseren, men serveren mottar bare "on" for hvert avhuket felt. Med flere checkboxer som har samme name blir det umulig å vite hva brukeren faktisk valgte.
Feil nummer to er å bruke ulike name-attributter for checkboxer som hører sammen. Da behandler serveren dem som separate felt i stedet for en gruppe med flere verdier. Relaterte checkboxer skal alltid dele name.
Feil nummer tre er å glemme koblingen mellom label og input. Hver checkbox må ha en unik id, og labelen må ha en for-attributt med nøyaktig samme verdi. Sjekk at disse matcher. En skrivefeil her gjør at klikk på teksten ikke fungerer.
For en fullstendig referanse over checkbox-attributter kan du sjekke MDN Web Docs sin checkbox-dokumentasjon.
Neste steg
Checkboxer gir brukere flervalg. Trenger du i stedet at brukeren velger nøyaktig ett alternativ, er radioknapper det riktige valget. Har du mange alternativer og vil spare plass, kan en nedtrekksmeny med select fungere bedre. Og hvis du ikke har lest om grunnleggende skjemastruktur ennå, start med hvordan du lager et skjema i HTML.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset bygger du skjema med avmerkingsbokser fra bunnen av, lærer å bruke fieldset og legend for gruppering, og ser hvordan dataen ser ut når den sendes til serveren.
