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

Om custom elements

HTML-muligheder

Som udgangspunkt bør man anvende custom element-koden, da denne kommer med JavaScript, der genererer både den nødvendige HTML og funktionalitet.

Hvis man ikke ønsker at benytte custom elements, kan man tage den genererede HTML i stedet. Erstat evt. <fds-textarea> med <div class="fds-textarea">. Bemærk, at man i så fald selv er ansvarlig for HTML og funktionalitet.

Eksempler

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

Varianter

Fejl

<fds-error-message> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button-group>, <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>. Dette custom-element tilføjer automatisk et fejlikon og strukturerer indholdet, inkluderer korrekte ARIA-attributter og skjulte tilstande samt underretter forælderkomponenten om ændringer i synlighed.

<fds-textarea>
    <label>Tekstområde med fejl</label>
    <textarea id="input-textarea-error" name="input-textarea" rows="5"></textarea>
    <fds-error-message id="error77d50f3d">Fejl tekst</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">Fejl tekst</span>
    </fds-error-message>
</fds-textarea>

Attributter til <fds-error-message>

Events fra <fds-error-message>

Hjælpetekst

<fds-help-text> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button>, <fds-radio-button-group> <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>.

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

Attributter til <fds-help-text>

Events fra <fds-help-text>

Karakterbegrænsning

<fds-character-limit> viser feedback i realtid om, hvor mange tegn en bruger har tilbage, eller hvor mange tegn en bruger har overskredet den valgte grænse. Den understøtter brugerdefinerede meddelelser, opdaterer både visuelt og til skærmlæsere og integrerer med <fds-input> og <fds-textarea> for at sikre tilgængelig og ensartet tegntællingsadfærd på tværs af designsystemet.

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

Attributter til <fds-character-limit>

Events fra <fds-character-limit>

Obligatoriske og frivillige inputfelter

<fds-textarea show-required-status>
    <label>Obligatorisk tekstområde</label>
    <textarea id="input-textarea1" name="input-textarea" rows="5" required></textarea>
</fds-textarea>

<fds-textarea show-required-status>
    <label>Frivilligt tekstområde</label>
    <textarea id="input-textarea2" name="input-textarea" rows="5"></textarea>
</fds-textarea>

<fds-textarea show-required-status="required">
    <label>Obligatorisk tekstområde</label>
    <textarea id="input-textarea3" name="input-textarea" rows="5" required></textarea>
</fds-textarea>

<fds-textarea show-required-status="optional">
    <label>Frivilligt tekstområde</label>
    <textarea id="input-textarea4" name="input-textarea" rows="5"></textarea>
</fds-textarea>

<fds-textarea show-required-status="">
    <label for="input-textarea1">Obligatorisk tekstområde<span class="weight-normal"> (*skal udfyldes)</span>
    </label>
    <textarea id="input-textarea1" name="input-textarea" rows="5" required=""></textarea>
</fds-textarea>
<fds-textarea show-required-status="">
    <label for="input-textarea2">Frivilligt tekstområde<span class="weight-normal"> (frivilligt)</span>
    </label>
    <textarea id="input-textarea2" name="input-textarea" rows="5"></textarea>
</fds-textarea>
<fds-textarea show-required-status="required">
    <label for="input-textarea3">Obligatorisk tekstområde<span class="weight-normal"> (*required)</span>
    </label>
    <textarea id="input-textarea3" name="input-textarea" rows="5" required=""></textarea>
</fds-textarea>
<fds-textarea show-required-status="optional">
    <label for="input-textarea4">Frivilligt tekstområde<span class="weight-normal"> (optional)</span>
    </label>
    <textarea id="input-textarea4" name="input-textarea" rows="5"></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

Attributter