Brugervenlige inputfelter med inputmode

Giv dine besøgende en nem oplevelse med din hjemmeside ved at gøre brug af inputmode-indstillingen. Det er en indstilling, som du sætter på hver af dine inputfelter, og den styrer hvilket tastaturlayout, der vises på mobile enheder.

// video

Se vores gennemgang

Vi har lavet en kort Youtube-video, hvor vi gennemgår de vigtigste tastaturlayouts. Du kan også læse videre herunder, hvor du har mulighed for at teste felterne af.

// layouts

De forskellige inputmodes

Der findes i alt 8 forskellige inputmodes og dermed tastaturlayouts at vælge imellem. Herunder gennemgår vi de mest brugte, hvor du — hvis du er på en mobilenhed — kan prøve dem af. Har du lyst til at vide endnu mere, anbefaler vi Mozilla’s tekniske beskrivelse af inputmode.

// text

Text

Standardlayout på tastaturet. Hvis du ikke har udfyldt inputmode-indstillingen, er det dette layout, der vælges. Det er fint til det meste, men skal du f.eks. indtaste tal, kan det gøres meget mere brugervenligt.

<input inputmode="text" />
// decimal

Decimal

Skal der indtastes tal, er det decimal-layoutet, der skal vælges. Her er tallene store og lige til at gå til. Komma og punktum er også lige ved hånden. Indtastning af tal er meget nemmere end med standardlayoutet.

<input inputmode="decimal" />
// tel

Tel

Når der skal indtastes telefonnumre, kan man med fordel gøre brug af tel-layoutet. Her er tallene store og nemme at finde ligesom med decimal-layoutet, men man har også lidt mere specielle tegn lettilgængeligt.

<input inputmode="tel" />
// email

Email

Email-layoutet gør det nemt at indtaste e-mails. Det minder meget om standardlayoutet, men et lille @ har sneget sig ind, så vi har alle tasterne, der skal bruges for at indtaste en e-mailadresse, klar fra start.

<input inputmode="email" />
// url

URL

Indtastning af en URL bliver hurtigt et lille marathon af frem og tilbage på skærmtastaturet, men med url-layoutet får man skråstregen med på forsiden, så man forhåbentlig kan spare et par tryk.

<input inputmode="url" />
// gratis

Er din hjemmeside brugervenlig?

Vi tager gerne et uforpligtende kig på din hjemmeside. Bestil et gratis kvalitetstjek af din hjemmeside for at få det fulde overblik over, om din hjemmeside lever op til moderne standarder.

Rapporten giver et komplet overblik over, hvor du kan forbedre din hjemmeside — hastighed, brugervenlighed, metadata og meget mere.

// kontakt

Kan vi hjælpe dig?

Har du brug for hjælp med brugervenlighed, inputfelter eller andre tekniske forbedringer af din hjemmeside? Vi står klar til at hjælpe.

Philip Sørensen
Philip Sørensen
Full-stack webudvikler

Vi vender tilbage inden for 24 timer.