Hopp til innhold
Gå til forsiden. Logo, Norges Blindeforbund

Skjema

Alle skjemaelementer er designet med universell utforming i fokus. Tydelige fokustilstander, god kontrast og korrekt merking gjør skjemaene våre tilgjengelige for alle.

Viktige prinsipper

  • Alltid bruk label: Alle input-felt må ha en tilknyttet label
  • Tydelig fokus: Gul bakgrunn viser hvilket felt som er aktivt
  • God kontrast: Alle elementer validerer WCAG AAA
  • Feilmeldinger: Alltid gi tydelig tilbakemelding ved feil

Tekstfelt

Standard tekstfelt

Tomt felt med placeholder. Får gul bakgrunn ved fokus.

Validert tekstfelt

Gyldig verdi med visuell bekreftelse (grønn hake).

Deaktivert felt

Brukes for forhåndsutfylt informasjon som ikke kan endres.

E-post (gyldig)

E-postfelt med gyldig formatering.

E-post med feil

E-postadressen er ikke gyldig. Sjekk om du har skrevet riktig.

Feilmeldinger vises tydelig under feltet med ikon.

Tekstområde

Brukes for lengre tekster og meldinger.

Radio buttons

Brukes når brukeren skal velge ett alternativ fra en liste.

Hvilket medlemskap ønsker du?

Radio buttons skal alltid være gruppert i en fieldset med legend.

Checkboxes

Brukes når brukeren kan velge flere alternativer fra en liste.

Hvilke interesseområder har du?

Flere valg kan være valgt samtidig. Bruk fieldset for gruppering.

Nedtrekksmeny (Select)

Brukes når brukeren skal velge fra en lengre liste med alternativer.

Komplett skjemaeksempel

Her er et fullstendig eksempel på hvordan elementene brukes sammen:

Bli medlem i Blindeforbundet

Type medlemskap *
Nyhetsbrev

* Obligatoriske felt

Beste praksis

✓ Gjør dette

  • Bruk alltid label for alle input-felt
  • Merk obligatoriske felt tydelig
  • Gi umiddelbar tilbakemelding ved feil
  • Bruk placeholder som hint, ikke som label
  • Grupper relaterte felt med fieldset
  • Test med skjermleser

✗ Ikke gjør dette

  • Bruk ikke bare placeholder som label
  • Ikke gjør feilmeldinger for tekniske
  • Ikke bruk kun farge som indikator
  • Ikke ha for mange felt på én side
  • Ikke bruk CAPTCHA uten alternativ
  • Ikke deaktiver kopiering/liming

Kodeeksempler

Tekstfelt

<label className="form__label">Navn</label>
<input
  className="form__textinput"
  placeholder="Skriv inn navn"
/>

Radio button

<input
  className="form__radio"
  name="choice"
  id="option1"
  type="radio"
/>
<label htmlFor="option1" className="checkbox__label">
  Alternativ 1
</label>

Checkbox

<input
  type="checkbox"
  className="form__checkbox"
  id="consent"
/>
<label htmlFor="consent" className="checkbox__label">
  Jeg godtar vilkårene
</label>