HTML <invoer> patroon Kenmerk
Voorbeeld
'n HTML-vorm met 'n invoerveld wat slegs drie letters kan bevat (geen syfers of spesiale karakters):
<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 dit self" voorbeelde hieronder.
Definisie en gebruik
Die patternkenmerk spesifiseer 'n gereelde uitdrukking waarteen die
<input>element se waarde gekontroleer word tydens die indiening van vorm.
Let wel: Die patternkenmerk werk met die volgende invoertipes: teks, datum, soektog, url, tel, e-pos en wagwoord.
Wenk: Gebruik die globale titlekenmerk om die patroon te beskryf om die gebruiker te help.
Wenk: Kom meer te wete oor gereelde uitdrukkings in ons JavaScript-tutoriaal.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die kenmerk ten volle ondersteun.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Sintaksis
<input pattern="regexp">
Eienskapwaardes
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Meer voorbeelde
Voorbeeld
'n <input> element met type="wagwoord" wat 8 of meer karakters moet bevat:
<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
'n <input> element met type="wagwoord" wat 8 of meer karakters moet bevat wat van ten minste een nommer en een hoofletter en kleinletter is:
<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
'n <invoer>-element met type="e-pos" wat in die volgende volgorde moet wees: karakters @ karakters . domein (karakters gevolg deur 'n @-teken, gevolg deur meer karakters, en dan 'n "."
Na die "." teken, voeg ten minste 2 letters van a tot z by:
<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
'n <invoer>-element met type="search" wat NIE die volgende karakters KAN bevat nie: ' 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
'n <input> element met type="url" wat moet begin met http:// of https:// gevolg deur ten minste een karakter:
<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 <invoer> tag