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-type-text">
        Inputfelt med label
    </label>

    <input class="form-input" id="input-type-text" name="input-type-text"
        type="text" required />

</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 class="form-input" id="input-type-help-text"
        name="input-type-help-text" type="text"
        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 class="form-input" id="input-optional1" name="input-optional1"
        type="text" />

</div>
<div class="form-group">

    <label class="form-label" for="input-mandatory">
        Label<span class="weight-normal"> (*skal udfyldes)</span>
    </label>

    <input class="form-input" id="input-mandatory" name="input-mandatory"
        type="text" required />

</div>
<div class="form-group">

    <label class="form-label" for="input-optional2">
        Label
    </label>

    <input class="form-input" id="input-optional2" name="input-optional2"
        type="text" />

</div>
<div class="form-group">

    <label class="form-label" for="input-optional3">
        Label
    </label>

    <input class="form-input" id="input-optional3" name="input-optional3"
        type="text" />

</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 class="form-input" id="input-readonly" value="012345-6789"
        name="input-readonly" type="text" readonly />

</div>

Deaktiveret

<div class="form-group">

    <label class="form-label" for="input-disabled">
        Inputfelt som er låst
    </label>

    <input class="form-input" id="input-disabled" name="input-disabled"
        type="text" disabled="disabled" />

</div>

Prefix og suffix

<div class="form-group">

    <label class="form-label" for="input-antal">
        Antal
    </label>

    <div class="form-input-wrapper form-input-wrapper--suffix"><input
            class="form-input input-char-8" id="input-antal" value="56"
            name="input-antal" type="number" 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
            class="form-input input-char-11" id="input-pris" value="123"
            name="input-pris" type="number" 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
            class="form-input input-width-xs" id="input-beloeb"
            value="1.234" name="input-beloeb" type="number" required />
    </div>

</div>

Karakterbegrænsning

<div class="form-group form-limit" data-maxlength="20"
    id="input-type-character-limit">

    <label class="form-label" for="input-type-text-limit">
        Inputfelt med karakterbegrænsning
    </label>

    <input class="form-input" id="input-type-text-limit"
        name="input-type-text-limit" type="text"
        aria-describedby=" input-type-character-limit-message" />

    <span id="input-type-character-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 nedenstående:

new DKFDS.CharacterLimit(document.getElementById('FORM-LIMIT-ID')).init();

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.