Formularvalidierung

Dieser Artikel erklärt die Formularvalidierung.

Es erklärt die Formularvalidierung in HTML.

YouTube Video

HTML-Formularvalidierung

Übersicht über HTML-Formularvalidierung

• HTML-Formularvalidierung ist ein Mechanismus, um sicherzustellen, dass die Daten bestimmte Bedingungen erfüllen, bevor ein Benutzer sie absendet. Dies reduziert serverseitige Fehler und verbessert die Benutzererfahrung.

required-Attribut

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Das Attribut required gibt an, dass Eingabefelder vor dem Absenden des Formulars ausgefüllt werden müssen.

pattern-Attribut

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• Das Attribut pattern wird verwendet, um zu prüfen, ob die Formulareingabe einem bestimmten Regex-Muster entspricht. Zum Beispiel prüft dies, ob der Benutzername nur alphanumerische Zeichen enthält.

min- und max-Attribute

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• Die Attribute <min> und <max> werden verwendet, um die minimalen und maximalen zulässigen Werte für ein Eingabeelement anzugeben. Sie werden häufig mit Eingabetypen wie number, range und date verwendet.
• In diesem Beispiel können Sie eine Zahl zwischen 18 und 99 eingeben.

minlength- und maxlength-Attribute

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• Das Attribut minlength gibt die minimale Anzahl von Zeichen an, die für ein Eingabefeld erforderlich sind, während das Attribut maxlength die maximale Anzahl von Zeichen definiert, die erlaubt sind.
• In diesem Beispiel können Sie Text mit einer Länge zwischen 4 und 12 Zeichen eingeben.

Das Attribut type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Das Attribut type="email" wird verwendet, um sicherzustellen, dass die Eingabe in einem gültigen E-Mail-Adresse-Format erfolgt. Dieses Attribut bietet eine integrierte Validierungsfunktionalität für Eingabefelder für E-Mail-Adressen.

Das Attribut type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> stellt ein Eingabefeld bereit, das ein korrektes URL-Format benötigt. Der Browser überprüft automatisch, ob die Eingabe als URL gültig ist.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video