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