6.1 Attribut required
Die Validierung von Formularen ist ein wichtiger Aspekt der Webentwicklung, der hilft, die Richtigkeit und Integrität der eingegebenen Daten zu gewährleisten. HTML bietet viele eingebaute Attribute zur Überprüfung der Eingabe, wie required, pattern, min, max, sowie die Attribute placeholder und value, die die Benutzererfahrung mit dem Formular verbessern.
Das Attribut required gibt an, dass ein Eingabefeld ausgefüllt werden muss. Der Browser erlaubt es nicht, ein Formular abzusenden, wenn ein als required markiertes Feld nicht ausgefüllt ist.
Syntax
<input type="text" name="username" required>
Beispiel
<form action="/" method="post">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Absenden</button>
</form>
Erklärung
Wenn das Attribut required angegeben ist, muss der Benutzer das Feld ausfüllen, bevor er das Formular absendet. Ist das Feld leer, zeigt der Browser eine Fehlermeldung an und sendet das Formular nicht ab.
6.2 Attribut pattern
Das Attribut pattern ermöglicht es, einen regulären Ausdruck für die Eingabeüberprüfung festzulegen. Wenn die eingegebenen Daten nicht dem angegebenen Muster entsprechen, zeigt der Browser eine Fehlermeldung an und sendet das Formular nicht ab.
Syntax
<input type="text" name="username" pattern="[A-Za-z]{3,}">
Beispiel
Das Attribut pattern legt einen regulären Ausdruck fest, dem die eingegebenen Daten entsprechen müssen. In diesem Beispiel muss der Benutzername nur Buchstaben enthalten und mindestens drei Zeichen lang sein.
<form action="/" method="post">
<label for="username">Benutzername (nur Buchstaben, mindestens 3 Zeichen):</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">Absenden</button>
</form>
6.3 Attribute min und max
Die Attribute min und max werden verwendet, um die minimalen und maximalen zulässigen Werte für numerische und datierte Felder festzulegen.
Syntax
<input type="number" name="age" min="18" max="99">
Beispiel
Zahlenfeld
min: legt den minimal zulässigen Wert fest. In diesem Beispiel ist das Mindestalter 18 Jahre.max: legt den maximal zulässigen Wert fest. In diesem Beispiel ist das Höchstalter 99 Jahre.
<form action="/" method="post">
<label for="birthday">Geburtsdatum (von 1900-01-01 bis 2024-12-31):</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">Absenden</button>
</form>
6.4 Attribut placeholder
Das Attribut placeholder legt einen Platzhaltertext fest, der im Eingabefeld angezeigt wird, bis der Benutzer beginnt, Daten einzugeben. Dieses Attribut hilft Benutzern zu verstehen, welche Daten in diesem Feld erwartet werden.
Syntax
<input type="text" name="username" placeholder="Gib den Benutzernamen ein">
Beispiel
Das Attribut placeholder zeigt den Text innerhalb des Eingabefeldes an, bis der Benutzer beginnt, Daten einzugeben. In diesem Beispiel ist der Platzhaltertext "Gib den Benutzernamen ein".
<form action="/" method="post">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username" placeholder="Gib den Benutzernamen ein" required>
<button type="submit">Absenden</button>
</form>
6.5 Attribut value
Das Attribut value legt den Anfangswert für ein Eingabeelement fest. Dieser Wert wird im Feld angezeigt, wenn die Seite geladen oder das Formular zurückgesetzt wird.
Syntax
<input type="text" name="username" value="default user">
Beispiel
Das Attribut value legt den Anfangswert des Eingabefeldes fest. In diesem Beispiel ist der Standardbenutzername "default user".
<form action="/" method="post">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">Absenden</button>
</form>
GO TO FULL VERSION