Validierung von E-Mail- und URL-Eingabefeldern in HTML-Formularen

In diesem Tutorial wirst du alle wichtigen Aspekte der Eingabefelder für E-Mail-Adressen und URLs in HTML-Formularen kennenlernen. Das Ziel ist es, dir zu zeigen, wie du die Validierung dieser Eingaben effektiv umsetzt und das Styling für verschiedene Eingabestatus anpassen kannst. Dies wird nicht nur die Benutzererfahrung verbessern, sondern auch die Qualität der Daten, die du erfasst.

Wichtigste Erkenntnisse

• Du lernst den grundlegenden Aufbau und die Validierung für E-Mail und URL mithilfe von HTML.
• Zudem erfährst du, wie du mit CSS eine visuelle Rückmeldung für Benutzer bereitstellen kannst, wenn Eingaben ungültig sind.
• Die Nutzung von Patterns zur weiteren Validierung von E-Mail-Adressen und URLs wird erläutert.

Schritt-für-Schritt-Anleitung

1. Grundlegendes Eingabefeld für E-Mail erstellen

Beginne mit dem Erstellen eines Standard-Input-Elements für E-Mail. Hierbei musst du den Typ als "email" festlegen, damit der Browser die Eingabe automatisch validiert.

Das Input-Feld wird nun von HTML so behandelt, dass es eine E-Mail-Adresse erwartet und bei falscher Eingabe visuelles Feedback gibt. Sobald ein Benutzer mit der Eingabe beginnt, verändert sich der Hintergrund auf pink, um darauf hinzuweisen, dass etwas nicht stimmt.

2. Validierung der E-Mail-Adresse

Die Validierung der E-Mail erfolgt über einfache Regeln. Es muss mindestens ein „@“-Zeichen vorhanden sein, gefolgt von mindestens einem weiteren Zeichen. Dies ist eine grundlegende NLP-Validierung. Diese Validierungsregel ist jedoch nicht ausreichend, um zu garantieren, dass die E-Mail-Adresse tatsächlich existiert.

Ein Beispiel für eine ungültige E-Mail-Adresse wäre „bla@“. In einem solchen Fall wird das Einsenden des Formulars blockiert, und der Benutzer sieht einen Fehlerhinweis.

3. Verwendung von Patterns für eine genauere Validierung

Um eine präzisere Validierung zu erreichen, kannst du das Attribut "pattern" verwenden. Mit einem regulären Ausdruck (Regex) kannst du festlegen, dass die E-Mail-Adresse bestimmten Anforderungen entspricht, z.B. einer spezifischen Domain.

Durch diese zusätzliche Validierung stellst du sicher, dass nur gültige E-Mail-Adressen angenommen werden, wie beispielsweise nur Gmail- oder GMX-Adressen.

4. Erforderliche Eingabe und Styling

Um sicherzustellen, dass das E-Mail-Feld ausgefüllt wird, kannst du das Attribut "required" hinzufügen. Wenn der Benutzer versucht, das Formular ohne Eingabe abzusenden, erhält er sofort eine visuelle Rückmeldung.

Für das Styling der ungültigen Eingaben kannst du in CSS den Selektor ":invalid" verwenden. Dadurch wird der Hintergrund des Feldes rot, um den Benutzer zu warnen, dass die Eingabe nicht korrekt ist.

5. Eingabefeld für URLs erstellen

Ähnlich wie bei der E-Mail ist es wichtig, auch für URLs ein entsprechendes Input-Element zu erstellen. Setze den Typ auf "url", damit der Browser auch hier die Eingabe validiert.

6. Validierung der URL

Die grundlegenden Anforderungen für eine gültige URL beinhalten, dass sie mit "http://" oder "https://" beginnt und mindestens ein nachfolgendes Zeichen hat. Wenn der Benutzer bloß „https“ eingibt, ist dies nicht ausreichend.

Das gleiche Prinzip gilt für andere Protokolle wie „ftp“. Wenn die Eingabe nicht den Bedingungen entspricht, bietet der Browser Feedback und lässt das Formular nicht absenden.

7. Erweiterte Validierung mit Patterns für URLs

Um die Validierung auch für bestimmte Muster wie „https://www.example.com“ präziser zu gestalten, solltest du ebenfalls das "pattern"-Attribut verwenden, um deinen Benutzern zu helfen, korrekte URLs einzugeben.

8. Benutzerfreundlichkeit auf mobilen Geräten

Ein großer Vorteil beim Einsatz von "email"- und "url"-Typen in Formularen ist die verbesserte Benutzerfreundlichkeit auf mobilen Geräten. Die Tastatur wird optimal angepasst, um den Benutzern das Eintippen von E-Mail-Adressen und URLs zu erleichtern.

Zusammenfassung

In diesem Tutorial haben wir die wichtigsten Kriterien zur Validierung von E-Mail-Adressen und URLs in Web-Formularen behandelt. Du hast gelernt, wie du einfache sowie erweiterte Validierungen durchführst und das Benutzerfeedback durch CSS anpassen kannst, um ein besseres Benutzererlebnis zu schaffen.