HTML-<input > -Musterattribut
Beispiel
Ein HTML-Formular mit einem Eingabefeld, das nur drei Buchstaben enthalten darf (keine Zahlen oder Sonderzeichen):
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input
type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code"><br><br>
<input type="submit">
</form>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das patternAttribut gibt einen regulären Ausdruck an,
<input>gegen den der Wert des Elements bei der Formularübermittlung geprüft wird.
Hinweis: Das patternAttribut funktioniert mit den folgenden Eingabetypen: Text, Datum, Suche, URL, Tel, E-Mail und Passwort.
Tipp: Verwenden Sie das globale titleAttribut, um das Muster zu beschreiben, um dem Benutzer zu helfen.
Tipp: Erfahren Sie mehr über reguläre Ausdrücke in unserem JavaScript-Tutorial.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Attribut vollständig unterstützt.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Syntax
<input pattern="regexp">
Attributwerte
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Mehr Beispiele
Beispiel
Ein <input>-Element mit type="password", das 8 oder mehr Zeichen enthalten muss:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd"
name="pwd"
pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
Beispiel
Ein <input>-Element mit type="password", das 8 oder mehr Zeichen enthalten muss, die aus mindestens einer Zahl bestehen, sowie einen Groß- und einen Kleinbuchstaben:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
Beispiel
Ein <input>-Element mit type="email", das in der folgenden Reihenfolge vorliegen muss: Zeichen @ Zeichen . Domain (Zeichen gefolgt von einem @-Zeichen, gefolgt von weiteren Zeichen und dann einem "."
Nach dem "." Zeichen, fügen Sie mindestens 2 Buchstaben von a bis z hinzu:
<form action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
Beispiel
Ein <input>-Element mit type="search", das die folgenden Zeichen NICHT enthalten darf: ' oder "
<form action="/action_page.php">
<label
for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Beispiel
Ein <input>-Element mit type="url", das mit http:// oder https:// beginnen muss, gefolgt von mindestens einem Zeichen:
<form action="/action_page.php">
<label
for="website">Homepage:</label>
<input type="url" id="website"
name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
❮ HTML <input>-Tag