Validering af e-mail- og URL-inputfelter i HTML-formularer

I denne vejledning vil du lære om alle vigtige aspekter af inputfelter til e-mail-adresser og URL'er i HTML-formularer. Målet er at vise dig, hvordan du effektivt implementerer validering af disse input og kan tilpasse stylingen for forskellige inputtilstande. Dette vil ikke kun forbedre brugeroplevelsen, men også kvaliteten af de data, du indsamler.

Vigtigste pointer

• Du lærer opbygningen og valideringen for e-mail og URL gennem HTML.
• Du vil også lære, hvordan du kan give visuel feedback til brugerne gennem CSS, hvis indtastningen er ugyldig.
• Brugen af mønstre til yderligere validering af e-mail-adresser og URL'er forklares.

Trin-for-trin guide

1. Oprettelse af grundlæggende inputfelt til e-mail

Begynd med at oprette et standard-input-element til e-mail. Her skal du angive typen som "email", så browseren automatisk validerer indtastningen.

Inputfeltet behandles nu af HTML på en måde, der forventer en e-mail-adresse og giver visuel feedback ved forkert input. Når en bruger begynder at indtaste, skifter baggrunden til pink for at angive, at der er noget galt.

2. Validering af e-mail-adressen

Validering af e-mail foregår via simple regler. Der skal være mindst ét "@"-tegn, efterfulgt af mindst ét andet tegn. Dette er en grundlæggende NLP-validering. Denne valideringsregel er dog ikke tilstrækkelig til at garantere, at e-mail-adressen rent faktisk eksisterer.

Et eksempel på en ugyldig e-mail-adresse ville være "bla@". I et sådant tilfælde blokeres afsendelsen af formularen, og brugeren ser en fejlmeddelelse.

3. Brug af mønstre til mere præcis validering

For at opnå en mere præcis validering kan du bruge attributten "mønster". Ved hjælp af et regulært udtryk (Regex) kan du angive, at e-mail-adressen opfylder bestemte krav, f.eks. en specifik domæne.

Via denne ekstra validering sikrer du, at kun gyldige e-mail-adresser accepteres, f.eks. kun Gmail- eller GMX-adresser.

4. Påkrævet input og styling

For at sikre at e-mailfeltet udfyldes, kan du tilføje attributten "påkrævet". Hvis brugeren forsøger at sende formularen uden input, får de straks visuel feedback.

Til styling af ugyldige indtastninger kan du i CSS bruge selector ":invalid". Dette får baggrunden i feltet til at blive rød for at advare brugeren om, at indtastningen ikke er korrekt.

5. Oprettelse af inputfelt til URL'er

Ligesom med e-mail er det vigtigt også at oprette et tilsvarende inputfelt til URL'er. Angiv typen som "url", så browseren også validerer indtastningen her.

6. Validering af URL'en

De grundlæggende krav til en gyldig URL omfatter, at den skal begynde med "http://" eller "https://" og have mindst ét efterfølgende tegn. Hvis brugeren blot indtaster "https", er dette ikke tilstrækkeligt.

Samme princip gælder for andre protokoller som "ftp". Hvis indtastningen ikke overholder betingelserne, giver browseren feedback og tillader ikke afsendelse af formularen.

7. Avanceret validering med mønstre for URL'er

For at gøre valideringen mere præcis for specifikke mønstre som f.eks. "https://www.example.com", bør du også bruge attributten "mønster" for at hjælpe dine brugere med at indtaste korrekte URL'er.

8. Brugervenlighed på mobile enheder

En stor fordel ved brugen af "email" og "url" typer i formularer er den forbedrede brugervenlighed på mobile enheder. Tastaturet tilpasses optimalt for at lette brugernes indtastning af e-mail-adresser og URL'er.

Oversigt

I denne vejledning har vi behandlet de vigtigste kriterier for validering af e-mail-adresser og URL'er i webformularer. Du har lært, hvordan du udfører enkle og avancerede valideringer og tilpasse brugerfeedback ved hjælp af CSS for at skabe en bedre brugeroplevelse.