Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Inputfelter
- Hjælpetekst
- Obligatoriske og frivillige felter
- Read-only
- Deaktiveret
- Prefix og suffix
- Karakterbegrænsning
- Feltbredde
Eksempler og retningslinjer
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å 8reminput-width-xs
har en bredde på 16reminput-width-s
har en bredde på 24reminput-width-m
har en bredde på 32reminput-width-l
har en bredde på 40reminput-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 tegninput-char-8
har en bredde der passer til 8 tegninput-char-11
har en bredde der passer til 11 tegninput-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.