Tekstområde (Textarea)

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 tekstområde, og markér tekstområdet med rødt.

Sådan (do)

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)

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.

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 tekstområdet, hvor mange tegn der er overskredet med.

Deaktiveret

Bemærk, at deaktiverede tekstområder hverken har kontrastkrav eller kan få fokus og dermed kan være svære at opdage, fx når man anvender en skærmlæser. Det anbefales derfor, at man helt undlader tekstområdet i stedet for at deaktivere det.

Se komponenten i eksempelløsninger

Trinformular til ansøgning: Ansøgningens type

Referencer

ISO 9241-143: Forms (2012)

Installation

HTML Struktur

<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

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

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();

Deaktiveret

<div class="form-group">
    <label class="form-label  disabled" for="textarea-disabled">Deaktiveret
        tekstområde</label>

    <textarea class="form-input" id="textarea-disabled" name="textarea-disabled" rows="5" disabled>Låst indhold</textarea>

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

Web Component-koden er i beta

Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.

<fds-textarea>
    <label>Label</label>
    <textarea id="input-textarea-example" name="input-textarea" rows="5"></textarea>
</fds-textarea>

<fds-textarea>
    <label for="input-textarea-example">Label</label>
    <textarea id="input-textarea-example" name="input-textarea" rows="5"></textarea>
</fds-textarea>

Om denne komponent

Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.

Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.

Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.

Varianter

Fejl

<fds-textarea>
    <label>Tekstområde med fejl</label>
    <textarea id="input-textarea-error" name="input-textarea" rows="5"></textarea>
    <fds-error-message id="error77d50f3d">Dette er en fejl</fds-error-message>
</fds-textarea>

<fds-textarea>
    <label for="input-textarea-error">Tekstområde med fejl</label>
    <textarea id="input-textarea-error" name="input-textarea" rows="5" aria-describedby="error77d50f3d" aria-invalid="true"></textarea>
    <fds-error-message id="error77d50f3d">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Dette er en fejl</span>
    </fds-error-message>
</fds-textarea>

Hjælpetekst

<fds-textarea>
    <label>Tekstområde med hjælpetekst</label>
    <fds-help-text id="helpTextIdefew3">Fx 12345678</fds-help-text>
    <textarea id="input-textarea-help" name="input-textarea" rows="5"></textarea>
</fds-textarea>

<fds-textarea>
    <label for="input-textarea-help">Tekstområde med hjælpetekst</label>
    <fds-help-text id="helpTextIdefew3" class="help-text">Fx 12345678</fds-help-text>
    <textarea id="input-textarea-help" name="input-textarea" rows="5" aria-describedby="helpTextIdefew3"></textarea>
</fds-textarea>

Karakterbegrænsning

<fds-textarea>
    <label>Tekstområde med karakterbegrænsning</label>
    <textarea id="input-textarea-limit" name="input-textarea" rows="5"></textarea>
    <fds-character-limit limit="40" limit-id="lim9ef8bf53v6"></fds-character-limit>
</fds-textarea>

<fds-textarea>
    <label for="input-textarea-limit">Tekstområde med karakterbegrænsning</label>
    <textarea id="input-textarea-limit" name="input-textarea" rows="5"></textarea>
    <fds-character-limit limit="40" limit-id="lim9ef8bf53v6">
        <span class="sr-only" id="lim9ef8bf53v6">Du kan indtaste op til 40 tegn</span>
        <span class="sr-only" aria-hidden="true" aria-live="polite"></span>
        <span class="visual-message" aria-hidden="false">Du har 40 tegn tilbage</span>
    </fds-character-limit>
</fds-textarea>

Obligatoriske og frivillige tekstområder

Tekstområde markeret obligatorisk

<fds-textarea show-required-status>
    <label>Label</label>
    <textarea id="5695ee72" name="5695ee72" rows="5" required></textarea>
</fds-textarea>

<fds-textarea show-required-status="">
    <label for="5695ee72">Label<span class="weight-normal"> (*skal udfyldes)</span>
    </label>
    <textarea id="5695ee72" name="5695ee72" rows="5" required=""></textarea>
</fds-textarea>

Tekstområde markeret frivilligt

<fds-textarea show-required-status>
    <label>Label</label>
    <textarea id="732e3ad2" name="732e3ad2" rows="5"></textarea>
</fds-textarea>

<fds-textarea show-required-status="">
    <label for="732e3ad2">Label<span class="weight-normal"> (frivilligt)</span>
    </label>
    <textarea id="732e3ad2" name="732e3ad2" rows="5"></textarea>
</fds-textarea>

Ændret tekst

Det er muligt at ændre teksten, der markerer tekstområdet enten obligatorisk eller frivilligt. Dette kan fx være nødvendigt i løsninger på andre sprog end dansk.

<fds-textarea show-required-status="required">
    <label>Label</label>
    <textarea id="74576ebc" name="74576ebc" rows="5" required></textarea>
</fds-textarea>

<fds-textarea show-required-status="required">
    <label for="74576ebc">Label<span class="weight-normal"> (*required)</span>
    </label>
    <textarea id="74576ebc" name="74576ebc" rows="5" required=""></textarea>
</fds-textarea>

Deaktiveret

<fds-textarea>
    <label>Deaktiveret tekstområde</label>
    <textarea id="input-textarea5" name="input-textarea" rows="5" disabled></textarea>
</fds-textarea>

<fds-textarea>
    <label for="input-textarea5">Deaktiveret tekstområde</label>
    <textarea id="input-textarea5" name="input-textarea" rows="5" disabled=""></textarea>
</fds-textarea>

Konfiguration

fds-textarea

Attributter

fds-help-text

Attributter

Events

fds-error-message

Attributter

Events

fds-character-limit

Attributter

Events