Validering av e-post- og URL-inntastingsfelt i HTML-skjemaer

I denne veiledningen vil du lære alle viktige aspekter ved inndatafeltene for e-postadresser og URL-er i HTML-skjemaer. Målet er å vise deg hvordan du effektivt kan validere disse inndataene og tilpasse stilen for ulike inndatastatus. Dette vil ikke bare forbedre brukeropplevelsen, men også kvaliteten på dataene du samler inn.

Viktigste innsikter

• Du vil lære grunnleggende struktur og validering for e-post og URL ved hjelp av HTML.
• Du vil også lære hvordan du kan gi visuell tilbakemelding til brukere hvis inndataene er ugyldige ved bruk av CSS.
• Bruken av mønstre for ytterligere validering av e-postadresser og URL-er blir forklart.

Trinn-for-trinn veiledning

1. Opprett en grunnleggende e-post inndatafelt

Begynn med å opprette et standard inndataelement for e-post. Her må du sette typen til "email" for at nettleseren automatisk skal validere inndataene.

Inndatafeltet behandles nå av HTML slik at det forventes en e-postadresse, og gir visuell tilbakemelding ved feil inndata. Når en bruker begynner å skrive, endres bakgrunnen til rosa for å indikere at noe er galt.

2. Validering av e-postadressen

Valideringen av e-post skjer gjennom enkle regler. Det må minst være ett «@»-tegn til stede, etterfulgt av minst ett annet tegn. Dette er en grunnleggende NLP-validering. Denne valideringsregelen er imidlertid ikke tilstrekkelig for å garantere at e-postadressen faktisk eksisterer.

Et eksempel på en ugyldig e-postadresse ville være «bla@». I slike tilfeller vil innsendingen av skjemaet bli blokkert, og brukeren vil se en feilmelding.

3. Bruk av mønstre for mer presis validering

For å oppnå mer presis validering kan du bruke attributtet "pattern". Med et regulært uttrykk (Regex) kan du angi at e-postadressen må oppfylle visse krav, for eksempel en spesifikk domene.

Gjennom denne ekstra valideringen sikrer du at kun gyldige e-postadresser aksepteres, for eksempel kun Gmail- eller GMX-adresser.

4. Påkrevd inndata og stil

For å sikre at e-postfeltet fylles ut, kan du legge til attributtet "required". Hvis brukeren prøver å sende inn skjemaet uten inndata, vil han motta umiddelbar visuell tilbakemelding.

For styling av ugyldige inndata kan du i CSS bruke selektoren ":invalid". Dette vil få bakgrunnen til feltet til å bli rød, for å advare brukeren om at inndataene ikke er korrekte.

5. Opprettelse av et inndatafelt for URL-er

På samme måte som for e-post er det viktig å opprette et tilsvarende inndataelement for URL-er. Sett typen til "url", slik at nettleseren også her kan validere inndataet.

6. Validering av URL-en

De grunnleggende kravene for en gyldig URL inkluderer at den må starte med "http://" eller "https://" og ha minst ett påfølgende tegn. Hvis brukeren bare skriver inn "https", er dette ikke tilstrekkelig.

Samme prinsipp gjelder for andre protokoller som "ftp". Hvis inndataen ikke oppfyller kravene, vil nettleseren gi tilbakemelding og ikke sende skjemaet.

7. Avansert validering med mønstre for URL-er

For å gjøre valideringen mer presis for bestemte mønstre som "https://www.example.com", bør du også bruke attributtet "pattern" for å hjelpe brukerne dine med å skrive inn riktige URL-er.

8. Brukervennlighet på mobile enheter

En stor fordel ved å bruke "e-post" og "url"-typer i skjemaer er den forbedrede brukervennligheten på mobile enheter. Tastaturet tilpasses optimalt for å gjøre det enklere for brukerne å skrive inn e-postadresser og URL-er.

Sammendrag

I denne opplæringen har vi dekket de viktigste kriteriene for validering av e-postadresser og URL-er i web-skjemaer. Du har lært hvordan du utfører enkle og avanserte valideringer og tilpasser brukerresponsen med CSS for å skape en bedre brukeropplevelse.