Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Inputfelter

Inputfelter lader brugeren indtaste kort information.

Eksempel på inputfelt

Sådan bruges komponenten

Anvendes til

Brug til input af information i form af bogstaver og tal eller en kombination af begge.

Brug inputfelter når det er nemmere for brugeren at skrive information end at vælge den på anden vis.

Brug når brugeren skal kunne copy paste information ind i en formular.

Anvendes ikke til

Når brugeren skal vælge ud fra et prædefineret sæt af værdier (fx nogle få bestemte datoer) eller hvis der er strenge krav til datakonsistens, oftest i en løsning uden klientside validering (hvis brugerens input-format kan skabe fejl på serversiden).

Vejledning

Brug primært formularelementer, når der er behov for, at brugeren kan tilføje information, som ikke kan vælges ud fra prædefinerede værdier, eller som løsningen ikke automatisk kan forudse ud fra brugerens andre indtastninger.

Vis kun fejlmeddelelser, når brugeren har indtastet en ugyldig værdi.

Fejlmeddelelser skal være meningsfulde og hjælpsomme.

Placér fejlmeddelelser mellem label og feltet, som bliver markeret med rødt.

Inputfelter er ikke perfekte til mobile løsninger. Overvej om de er nødvendige eller om du kan tilbyde brugeren en anden form for interaktion.

Brug feltbredden til at begrænse antallet af tegn i et felt. Feltbredden angiver det forventede omfang af tegn, så brugeren får en fornemmelse af, hvad der skal indtastes. Fx bør et felt, hvor man skal angive et dansk postnummer, kun være 4 tegn bredt, mens et felt til et gadenavn bør være på minimum 27 tegn.

Brug ikke feltbredde til at validere brugerens input. Angiv i stedet krav til inputvalidering i en vejledning.

Feltets bredde skal modsvare det, du forventer at brugeren skal indtaste, så brugeren kan se alle tegn under indtastningen.

Sådan (do)

Eksempel på, hvordan inputfelter kan se ud

Sådan: Brug inputfelter, når der er mange gyldige svarmuligheder, som ikke kan opstilles på forhånd, og når mange typer svar er acceptable. (ISO, 2012, afsnit 8.5).

Ikke sådan (don't)

Eksempel på, hvordan inputfelter ikke bør se ud

Ikke sådan: Undlad at bruge inputfelter til information, som lettere kan vælges ud fra prædefinerede værdier (ISO 9241-143, afsnit 8.5), og som brugerne let indtaster forkert (Miller & Jarrett, 2001).

Sådan (do)

Eksempel på, hvordan labels på felter kan se ud

Sådan: Placér labels over formularens felter – tættere på de felter, de hører til, end på andre felter (Silver, 2018, s. 31-32). Placeringen over felterne gør formularen hurtigere at skanne, fordi øjet ikke behøver at bevæge sig frem og tilbage mellem label og indtastningsfelt, som det skulle, hvis labelen var placeret til venstre for feltet (McCloskey, 2013).

Ikke sådan (don't)

Eksempel på, hvordan labels på felter ikke bør se ud

Ikke sådan: Undlad at placere labels inde i formularens felter. Formularens labels er afsenderens anmodninger eller spørgsmål, mens felterne bør være forbeholdt brugernes svar (Jarrett, 2013). En label inde i felt kan medføre, at brugerne fejlfortolker labelen som autoudfyldt data, og at feltet slet ikke ligner et indtastningsfelt (Sherwin, 2014-2018).

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Eksempel på tekstfelt med fejlmeddelelse
Fejl: Skriv dit fulde navn, og adskil for- og efternavne med mellemrum, fx Anders Andersen

Varianter

Hjælpetekst

Eksempel på inputfelt med hjælpetekst
Fx 12345678

Sådan (do)

Eksempel på, hvordan hjælpetekster kan se ud

Sådan: Placér indlejret hjælpetekst sammen med labelen (Sherwin, 2014-2018). På grund af menneskets svage perifere syn, kan brugerne kun se skarpt i en diameter på 2-4 cm ved en computerskærm (Johnson, 2014, s. 54). Hvis hjælpeteksten ikke står tæt på labelen, vil brugerne derfor måske ikke opdage den.

Ikke sådan (don't)

Eksempel på, hvordan hjælpetekster ikke bør se ud

Ikke sådan: Undlad at placere hjælpetekster under felter, hvor de er svære at få øje på. Undgå også at placere dem inde i indtastningsfelterne, hvor de forsvinder, når brugerne begynder at taste (Sherwin, 2014-2018).

Obligatoriske og frivillige inputfelter

Undgå frivillige inputfelter så vidt muligt. Hvis et felt er frivilligt, så overvej altid, om det er nødvendigt at have med i formularen.

Hvis en formular indeholder frivillige inputfelter, som vil have en betydelig positiv effekt for brugeren, kan dette forklares i en hjælpetekst. Det kan f.eks. være tilfældet med inputfelter, der forkorter tiden for en sagsbehandling betragteligt, hvis de bliver udfyldt.

Når der er flest obligatoriske inputfelter

I de fleste tilfælde bør der være flere obligatoriske end frivillige inputfelter. Marker da de frivillige felter i formularen.

Eksempel på formular med flest obligatoriske inputfelter

Når der er flest frivillige inputfelter

Hvis en formular indeholder flere frivillige end obligatoriske inputfelter, fremhæves de obligatoriske felter i stedet for de frivillige.

Eksempel på formular med flest frivillige inputfelter

Read-only

Deaktiveret

Bemærk, at deaktiverede elementer er usynlige for hjælpeteknologier som fx skærmlæsere, og derved vil brugere af disse værktøjer ikke få oplyst om elementernes tilstedeværelse. Det anbefales derfor, at man i stedet undlader feltet eller gør brug af read-only.

Prefix og suffix

Prefix og suffix kan bruges til at tydeliggøre, hvordan brugeren skal angive bestemte data såsom beløb, antal m.m.

Et suffix må aldrig være den eneste indikator for, hvordan et felt skal udfyldes, eftersom det ikke læses højt af skærmlæsere. Feltets label eller en hjælpetekst kan bruges til også at indikere dette.

Eksempel på felter med prefix og suffix

Karakterbegrænsning

Karakterbegrænsning sætter et maksimalt antal af tegn, som brugeren kan indtaste i et felt. Karakterbegrænsning indikerer løbende overfor brugeren, hvor mange tegn der er tilbage, og hvor mange tegn de evt. har overskredet med.

Vis altid antallet af tegn, der er til rådighed i inputfeltet, inden brugeren begynder at skrive.

Stop ikke indtastningen, når brugeren overskrider antallet af tegn. Vis i stedet løbende med rød tekst under feltet, hvor mange tegn der er overskredet med.

Eksempel på felt med karakterbegrænsning
Du kan indtaste op til 20 tegn Du har 20 tegn tilbage

Feltbredde

Eksempel på felter med forskellig bredde
Input bredde med rem
Input bredde med tegn

Sådan (do)

Eksempel på, hvordan inputfeltbredde kan se ud

Sådan: Afstem længden af feltet til det, der skal indtastes (Jarrett, 2000). Når et design er intuitivt, signalerer de forskellige elementer, hvordan de skal bruges (Norman, 2013). Et felt til e-mailadresser bør derfor være længere end et felt til telefonnumre. Et felt til postnumre bør være kortere end andre felter (Silver, 2018, s. 81).

Ikke sådan (don't)

Eksempel på, hvordan inputfeltbredde ikke bør se ud

Ikke sådan: Undgå felter, der er så korte, at brugernes indtastninger ikke kan ses. Det virker, som at afbryde én, der taler. Undgå også felter, der er meget længere end det input, der forventes. For meget plads kan få brugeren til at tro, at han har misforstået spørgsmålet (Jarrett, 2000; Silver, 2018, s. 82).

Se komponenten i eksempelløsninger

Referencer

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="input-text">Inputfelt med label</label>

    <input type="text" id="input-text" name="input-text" class="form-input" required>
</div>

Brug attributten “autocomplete”

Brug autocomplete på inputfelter for at gøre det hurtigere for brugeren at udfylde formularen samt for at overholde reglerne for tilgængelighed (W3C (WCAG 2.1): Understanding SC 1.3.5: Identify Input Purpose (Level AA)).

Brug autocomplete på inputfelter til fx navn (autocomplete='name'), postnummer (autocomplete='postal-code'), telefonnummer (autocomplete='tel') og e-mailadresse (autocomplete='email'), hvis en bruger skal indtaste disse oplysninger om sig selv i din formular.

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="postnr">Postnummer</label>

    <input type="text" id="postnr" name="postnr" class="form-input input-char-4" required
        autocomplete="postal-code">
</div>

Hjælpetekst

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="input-type-help-text">Inputfelt med label og
        hjælpetekst</label>

    <span class="form-hint" id="input-type-help-text-hint">Fx 12345678</span>

    <input type="text" id="input-type-help-text" name="input-type-help-text"
        class="form-input" aria-describedby="input-type-help-text-hint " required>
</div>

Obligatoriske og frivillige inputfelter

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="input-optional1">Label</label>

    <input type="text" id="input-optional1" name="input-optional1" class="form-input">
</div>

<div class="form-group">
    <label class="form-label" for="input-mandatory">Label<span class="weight-normal"> (*skal
            udfyldes)</span></label>

    <input type="text" id="input-mandatory" name="input-mandatory" class="form-input"
        required>
</div>

<div class="form-group">
    <label class="form-label" for="input-optional2">Label</label>

    <input type="text" id="input-optional2" name="input-optional2" class="form-input">
</div>

<div class="form-group">
    <label class="form-label" for="input-optional3">Label</label>

    <input type="text" id="input-optional3" name="input-optional3" class="form-input">
</div>

Hvis de fleste felter i en selvbetjeningsløsning er påkrævede, noterer man “(frivilligt)” ved de få felter, der ikke er påkrævede. Hvis de fleste felter er frivillige i en løsning, noterer man “(*skal udfyldes)” ved de få felter, der er påkrævede.

Read-only

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="input-readonly">Inputfelt som er readonly</label>

    <input type="text" id="input-readonly" name="input-readonly" class="form-input"
        value="012345-6789" readonly>
</div>

Deaktiveret

Kodeeksempel
<div class="form-group">
    <label class="form-label  disabled" for="input-disabled">Inputfelt som er låst</label>

    <input type="text" id="input-disabled" name="input-disabled" class="form-input"
        value="Låst indhold" disabled="disabled">
</div>

Prefix og suffix

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="input-antal">Antal styk</label>

    <div class="form-input-wrapper form-input-wrapper--suffix">

        <input type="number" id="input-antal" name="input-antal"
            class="form-input input-char-8" value="56" required>
        <div class="form-input-suffix" aria-hidden="true">stk.</div>
    </div>
</div>

<div class="form-group">
    <label class="form-label" for="input-pris">Pris i 1000 kr.</label>

    <div class="form-input-wrapper form-input-wrapper--suffix">

        <input type="number" id="input-pris" name="input-pris"
            class="form-input input-char-11" value="123" required>
        <div class="form-input-suffix" aria-hidden="true">000 kr.</div>
    </div>
</div>

<div class="form-group">
    <label class="form-label" for="input-beloeb">Beløb i €</label>

    <div class="form-input-wrapper form-input-wrapper--prefix">
        <div class="form-input-prefix" aria-hidden="true">€</div>
        <input type="number" id="input-beloeb" name="input-beloeb"
            class="form-input input-width-xs" value="1.234" required>
    </div>
</div>

Karakterbegrænsning

Kodeeksempel
<div class="form-group form-limit" data-maxlength="20">
    <label class="form-label" for="input-type-text-limit">Inputfelt med
        karakterbegrænsning</label>

    <input type="text" id="input-type-text-limit" name="input-type-text-limit"
        class="form-input" aria-describedby="input-type-text-limit-limit-message" required>
    <span id="input-type-text-limit-limit-message" class="sr-only">Du kan indtaste op til 20
        tegn</span>
    <span class="form-hint character-limit" aria-hidden="true">Du har 20 tegn tilbage</span>
    <span class="character-limit-sr-only sr-only" aria-live="polite">Du har 20 tegn
        tilbage</span>
</div>

Husk at medtage de to beskeder skjult med klassen sr-only. Disse anvendes af skærmlæsere til at give info og status på indtastningen til brugeren.

JavaScript

Karakterbegrænsning kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med init().

Funktioner

Funktion Beskrivelse
init() Sørger for at beskederne med antal tegn tilbage opdateres.
charactersLeft() Returnerer det antal tegn, der lige nu kan indtastes i inputfeltet. Tallet er negativt, hvis antallet af tegn er overskredet.
updateMessages() Fremtvinger en opdatering af beskederne med antal tegn tilbage. Dette kan være nyttigt, hvis eksempelvis værdien i inputfeltet ændres programmatisk.

Eksempel på anvendelse:

const form_limit = new DKFDS.CharacterLimit(document.getElementsByClassName('form-limit')[0]);
form_limit.init();
form_limit.charactersLeft();

Sprog

Hvis du ønsker at anvende et andet sprog end dansk i JavaScript-koden til karakterbegrænsning, skal du selv give din oversættelse med og derefter initiere komponenten manuelt. Husk at opdatere værdien i attributten “lang” i din sides html-tag. Indholdet i krøllede parenteser {...} nedenunder skal ikke oversættes eller ændres.

new DKFDS.CharacterLimit(document.getElementById('FORM-LIMIT-ID'), {
  "character_remaining": "Du har {value} tegn tilbage",
  "characters_remaining": "Du har {value} tegn tilbage",
  "character_too_many": "Du har {value} tegn for meget",
  "characters_too_many": "Du har {value} tegn for meget"
}).init();

Feltbredde

Inputfelter har en standard bredde på 32rem. For at ændre bredden bruges nedenstående klasser:

  • input-width-xxs har en bredde på 8rem
  • input-width-xs har en bredde på 16rem
  • input-width-s har en bredde på 24rem
  • input-width-m har en bredde på 32rem
  • input-width-l har en bredde på 40rem
  • input-width-xl har en bredde på 48rem

Bredde med tegn

For at styre bredden på inputfelter efter tegn, skal der i stedet bruges nedenstående klasser:

  • input-char-4 har en bredde der passer til 4 tegn
  • input-char-8 har en bredde der passer til 8 tegn
  • input-char-11 har en bredde der passer til 11 tegn
  • input-char-27 har en bredde der passer til 27 tegn

For at tilføje flere inputbredder, der er styret af tegn, skal der tilføjes klassen input-char-X, hvor det nye tal skal erstattes med X.