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-text">Inputfelt med label</label>
<input type="text" id="input-text" name="input-text" class="form-input" 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 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" for="input-disabled">Inputfelt som er låst</label>
<input type="text" id="input-disabled" name="input-disabled" class="form-input"
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
Funktion | Beskrivelse |
---|---|
init() | Sørger for at beskederne med antal tegn tilbage opdateres. |
charactersLeft() | Returnerer det antal tegn, der lige nu kan indtastes i inputfeltet. Tallet er negativt, hvis antallet af tegn er overskredet. |
updateMessages() | Fremtvinger en opdatering af beskederne med antal tegn tilbage. Dette kan være nyttigt, hvis eksempelvis værdien i inputfeltet ændres programmatisk. |
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å 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.