HTML <input> pattern-eigenschap

HTML <input> tag

Definitie en gebruik

patroon De eigenschap specifies een reguliere expressie die de waarde van het <input>-element controleert bij het indienen van het formulier.

Opmerking:patroon Deze eigenschap is van toepassing op de volgende invoertypes:

  • tekst
  • datum
  • zoek
  • url
  • tel
  • e-mail
  • wachtwoord

Tip:Gebruik Globale title-eigenschap om het patroon te beschrijven, om gebruikers te helpen begrijpen.

Tip:Raadpleeg onze JavaScript Handleiding Leer meer over reguliere expressies in onze cursus.

Voorbeeld

Voorbeeld 1

Hier is een HTML-formulier met een invoerveld dat alleen drie letters kan bevatten (geen cijfers of speciale tekens):

<form action="/action_page.php">
  <label for="country_code">Landcode:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Drieletterige landcode"><br><br>
  <input type="submit">
</form>

Probeer het zelf uit

Voorbeeld 2

Hier is een <input> element met een type-eigenschap van "password", dat minstens 8 tekens moet bevatten:

<form action="/action_page.php">
  <label for="pwd">Wachtwoord:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Acht of meer tekens">
  <input type="submit">
</form>

Probeer het zelf uit

Voorbeeld 3

Hier is een <input> element met een type-eigenschap van "password", dat minstens 8 tekens moet bevatten, waarvan er minstens één een cijfer, een hoofdletter en een kleine letter is:

<form action="/action_page.php">
  <label for="pwd">Wachtwoord:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Moet ten minste acht tekens bevatten, waarvan er minstens één een cijfer, een hoofdletter en een kleine letter is">
  <input type="submit">
</form>

Probeer het zelf uit

Voorbeeld 4

Hier is een <input> element met een type-eigenschap van "email", dat moet volgens de volgende volgorde zijn: characters@characters.domain.

Gemaakt van tekens en het @-teken, gevolgd door meer tekens, en dan een "."-teken. Achter het "."-teken, voeg ten minste twee letters van a tot z toe:

<form action="/action_page.php">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Probeer het zelf uit

Voorbeeld 5

Hier is een <input> element met een type-eigenschap van "search", dat de volgende tekens niet mag bevatten: ' of " .

<form action="/action_page.php">
  <label for="search">Zoek:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Ongeldige invoer">
  <input type="submit">
</form>

Probeer het zelf uit

Voorbeeld 6

Hier is een <input> element met een type-eigenschap van "url", dat moet beginnen met http:// of https:// en gevolgd worden door ten minste een teken:

<form action="/action_page.php">
  <label for="website">Homepage:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Bevat http://">
  <input type="submit">
</form>

Probeer het zelf uit

Syntaxis

<input pattern="regexp">

Eigenschapswaarde

Waarde Beschrijving
regexp Definieert een reguliere expressie die de waarde van het <input>-element controleert.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

Opmerking:patroon Eigenschappen zijn nieuwe eigenschappen in HTML5.

HTML <input> tag