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

Tekstområde (Textarea)

Tekstområder lader brugeren indtaste en længere tekst på flere linjer.

Eksempel på tekstområde

Sådan bruges komponenten

Anvendes til

Brug tekstområder til sammenhængende (mere end 2 linjer) men ustruktureret tekst og sætninger, der har karakter af prosa. Fx en baggrundsfortælling.

Anvendes når der er behov for yderligere sammenhængende information, hvis karakter brugeren ikke kan vælge ud fra et prædefineret sæt værdier.

Anvendes når løsningen stiller et spørgsmål, der ikke kan besvares i et felt.

Anvendes ikke til

Brug ikke tekstområder til struktureret information, hvor datakonsistens har betydning.

Vejledning

Angiv tekstområdets højde, så det modsvarer den tekstmængde, du forventer, at brugeren skal indtaste.

Overvej at begrænse antallet af tegn, hvis det giver mening.

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 felt, og markér feltet med rødt.

Sådan (do)

Eksempel på, hvordan et tekstområde kan se ud

Sådan: Tilpas højde og bredde af tekstområdet, så brugerne komfortabelt kan indtaste kommentarer eller redegøre for handlingsforløb. Teksten skal ombryde, så enkeltord ikke bliver delt (ISO, 2012, afsnit 9.1.3). Lad områdets størrelse indikere mængden af indhold, der forventeligt skal skrives i tekstområdet.

Ikke sådan (don't)

Eksempel på, hvordan et tekstområde ikke bør se ud

Ikke sådan: Gør ikke tekstområder så små, at brugerne bliver nødt til at scrolle for at kontrollere almindelige mængder tekst. Undgå helt horisontal scroll.

Fejlmeddelelse

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

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

Eksempel på tekstområde med fejlmeddelelse
Fejl: Hjælpsom fejlmeddelelse

Varianter

Karakterbegrænsning

Karakterbegrænsning sætter et maksimalt antal af tegn, som brugeren kan indtaste i et tekstområde. 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 tekstområdet, 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å tekstområde med karakterbegrænsning
Du kan indtaste op til 60 tegn Du har 60 tegn tilbage

Se komponenten i eksempelløsninger

Trinformular til ansøgning: Ansøgningens type

Referencer

ISO 9241-143: Forms (2012)

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="input-textarea">Tekstområde med label</label>

    <textarea class="form-input" id="input-textarea" name="input-textarea" rows="5" required></textarea>

</div>

Sørg for at rette værdierne i følgende attributter, så de svarer til din løsning:

  • for
  • id
  • name
  • rows

Sæt højden på et tekstområde ved brug af rows attributten. Sæt højden, så det svarer til den mængde tekst, der forventes indtastet.

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og fejlmeddelelser’s implementering med tekstområde.

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

Karakterbegrænsning

Kodeeksempel
<div class="form-group form-limit" data-maxlength="60">
    <label class="form-label" for="textarea-limit">Tekstområde med karakterbegrænsning</label>

    <textarea class="form-input" id="textarea-limit" name="textarea-limit" rows="5" required aria-describedby="textarea-limit-limit-message"></textarea>
    <span id="textarea-limit-limit-message" class="sr-only">Du kan indtaste op til 60
        tegn</span>
    <span class="form-hint character-limit" aria-hidden="true">Du har 60 tegn tilbage</span>
    <span class="character-limit-sr-only sr-only" aria-live="polite">Du har 60 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();