Inputfelter

• Hjælpetekst
• Obligatoriske og frivillige felter
• Read-only
• Deaktiveret
• Prefix og suffix
• Karakterbegrænsning
• Feltbredde

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

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 (WCAG 2.1 AA Identify Input Purpose).

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>

Varianter

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. Se eksempler på frivillige og obligatoriske felter.

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.