Inputfelter

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.

Felter do's and don'ts

Sådan (do)

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)

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).

Felt labels do's and don'ts

Sådan (do)

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)

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.

Varianter

Hjælpetekst

Felt med hjælpetekst do's and don'ts

Sådan (do)

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)

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.

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.

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.

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.

Feltbredde

Feltbredde do's and don'ts

Sådan (do)

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)

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

• Formular til kontaktoplysninger: Oplysninger om dig
• Trinformular til registrering: Kontaktoplysninger
• Trinformular til ansøgning: Kontaktoplysninger
• Trinformular til ansøgning: Tilføj dokumentation

Referencer

• ISO 9241-143: Forms (2012)
• Adam Silver: Form Design Patterns (2018)
• Marieke McCloskey: Form Design Quick Fix: Group Form Elements Effectively Using White Space (2013)
• Katie Sherwin: Placeholders in Form Fields Are Harmful (2014-2018)
• Jeff Johnson: Designing with the Mind in Mind, Second Edition (2014)
• Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
• Caroline Jarrett & Gerry Gaffney: Forms that Work: Designing Web Forms for Usability (2009)
• Caroline Jarrett: Designing usable forms: the three-layer model of the form (2000)
• Caroline Jarrett: Don’t Put Labels Inside Text Boxes (Unless You’re Luke W) (2013)
• Don Norman: Don Normans Principles of Design (2013)

Installation

HTML Struktur

<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.

<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

<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

<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

<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

<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

<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

<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

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.