HTML <input> patroon Attribuut
Voorbeeld
Een HTML-formulier met een invoerveld dat slechts drie letters mag bevatten (geen cijfers of speciale tekens):
<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>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
Het patternattribuut specificeert een reguliere expressie waarmee de
<input>waarde van het element wordt gecontroleerd bij het indienen van het formulier.
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.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het kenmerk volledig ondersteunt.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Syntaxis
<input pattern="regexp">
Attribuutwaarden
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Meer voorbeelden
Voorbeeld
Een <input>-element met type="password" dat 8 of meer tekens moet bevatten:
<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>
Voorbeeld
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">
<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>
Voorbeeld
Een <input>-element met type="email" dat in de volgende volgorde moet staan: tekens @ tekens . domein (tekens gevolgd door een @-teken, gevolgd door meer tekens en vervolgens een "."
Na de "." teken, voeg minimaal 2 letters van a tot z toe:
<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>
Voorbeeld
Een <input>-element met type="search" dat NIET de volgende tekens mag bevatten: ' of "
<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>
Voorbeeld
Een <input>-element met type="url" dat moet beginnen met http:// of https:// gevolgd door ten minste één teken:
<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