HTML - patroonkenmerk
Definitie en gebruik
Het patternattribuut specificeert een reguliere expressie waarmee de
<input>waarde van het element wordt gecontroleerd.
Opmerking: het patternattribuut werkt met de volgende invoertypen: tekst, datum, zoeken, url, tel, e-mail en wachtwoord.
Tip: Gebruik het globale titleattribuut om het patroon te beschrijven om de gebruiker te helpen.
Tip: Leer meer over reguliere expressies in onze JavaScript-tutorial.
Geldt voor
Het patternattribuut kan worden gebruikt op het volgende element:
| Element | Attribuut |
|---|---|
| <invoer> | patroon |
Voorbeelden
Invoervoorbeeld
Een HTML-formulier met een invoerveld dat slechts drie letters mag bevatten (geen cijfers of speciale tekens):
<form action="/action_page.php">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
Voorbeeld wachtwoord
Een <input>-element met type="password" dat 6 of meer tekens moet bevatten:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
Voorbeeld wachtwoord
Een <input>-element met type="password" dat 8 of meer tekens moet bevatten die uit ten minste één cijfer bestaan, en één hoofdletter en kleine letter:
<form action="/action_page.php">
Password: <input type="password" name="pw" 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>
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het kenmerk volledig ondersteunt.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | Not supported | 9.6 |