Validering av e-post- och URL-indataplatser i HTML-formulär

I den här handledningen kommer du att lära dig alla viktiga aspekter av inmatningsfält för e-postadresser och URL:er i HTML-formulär. Målet är att visa dig hur du effektivt implementerar validering av dessa inmatningar och kan anpassa stilen för olika inmatningsstatus. Detta kommer inte bara förbättra användarupplevelsen utan också kvaliteten på de data du samlar in.

Viktigaste insikter

• Du lär dig den grundläggande strukturen och valideringen för e-post och URL med hjälp av HTML.
• Dessutom kommer du att lära dig hur du med CSS kan ge visuell feedback till användarna när inmatningarna är ogiltiga.
• Användningen av mönster för ytterligare validering av e-postadresser och URL:er förklaras.

Steg-för-steg-guide

1. Skapa grundläggande inmatningsfält för e-post

Börja med att skapa ett standardinmatningselement för e-post. Här måste du sätta typen som "email" för att webbläsaren automatiskt ska validera inmatningen.

Input-fältet kommer nu att hanteras av HTML så att det förväntar sig en e-postadress och ger visuell feedback vid felaktig inmatning. När en användare börjar skriva ändras bakgrunden till rosa för att indikera att något är fel.

2. Validering av e-postadressen

Valideringen av e-post sker genom enkla regler. Det måste finnas minst ett "@"-tecken, följt av minst ett annat tecken. Detta är en grundläggande NLP-validering. Denna valideringsregel är dock inte tillräcklig för att garantera att e-postadressen faktiskt existerar.

Ett exempel på en ogiltig e-postadress skulle vara "bla@". I så fall blockerar formuläret inskickandet och användaren ser en felanmälan.

3. Användning av mönster för noggrannare validering

För att uppnå en mer exakt validering kan du använda attributet "pattern". Med ett reguljärt uttryck (Regex) kan du ange att e-postadressen uppfyller vissa krav, t.ex. en specifik domän.

Genom denna ytterligare validering säkerställer du att endast giltiga e-postadresser accepteras, t.ex. enbart Gmail- eller GMX-adresser.

4. Obligatorisk inmatning och styling

För att säkerställa att e-postfältet fylls i kan du lägga till attributet "required". Om användaren försöker skicka formuläret utan att fylla i det får hen omedelbart visuell feedback.

För att styla ogiltiga inmatningar kan du använda selektorn ":invalid" i CSS. Detta gör så att fältets bakgrund blir röd för att varna användaren om att inmatningen inte är korrekt.

5. Skapa inmatningsfält för URL:er

Precis som med e-post är det viktigt att skapa ett lämpligt inmatningselement för URL:er. Ange typen som "url" för att webbläsaren även här ska validera inmatningen.

6. Validering av URL

De grundläggande kraven för en giltig URL inkluderar att den börjar med "http://" eller "https://" och har åtminstone ett efterföljande tecken. Om användaren bara skriver "https" är detta inte tillräckligt.

Samma princip gäller för andra protokoll som "ftp". Om inmatningen inte uppfyller kraven ger webbläsaren feedback och tillåter inte att formuläret skickas.

7. Avancerad validering med mönster för URL:er

För att göra valideringen mer exakt för specifika mönster som "https://www.example.com" bör du också använda attributet "pattern" för att hjälpa dina användare att ange korrekta URL:er.

8. Användarvänlighet på mobila enheter

En stor fördel med användningen av "email" och "url"-typer i formulär är den förbättrade användarvänligheten på mobila enheter. Tangentbordet justeras optimalt för att underlätta inmatning av e-postadresser och webbadresser för användarna.

Sammanfattning

I denna handledning har vi behandlat de viktigaste kriterierna för validering av e-postadresser och webbadresser i webbformulär. Du har lärt dig hur du utför enkla och avancerade valideringar och kan anpassa användarresponsen med CSS för att skapa en bättre användarupplevelse.