Attributo del modello HTML <input>
Esempio
Un modulo HTML con un campo di input che può contenere solo tre lettere (senza numeri o caratteri speciali):
<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>
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
L' pattern
attributo specifica un'espressione regolare rispetto alla quale
<input>
viene verificato il valore dell'elemento all'invio del modulo.
Nota: l' pattern
attributo funziona con i seguenti tipi di input: testo, data, ricerca, URL, tel, e-mail e password.
Suggerimento: utilizzare l'attributo globale title
per descrivere il modello per aiutare l'utente.
Suggerimento: scopri di più sulle espressioni regolari nel nostro tutorial JavaScript.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'attributo.
Attribute | |||||
---|---|---|---|---|---|
pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Sintassi
<input pattern="regexp">
Valori di attributo
Value | Description |
---|---|
regexp | Specifies a regular expression that the <input> element's value is checked against |
Altri esempi
Esempio
Un elemento <input> con type="password" che deve contenere 8 o più caratteri:
<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>
Esempio
Un elemento <input> con type="password" che deve contenere 8 o più caratteri di almeno un numero e una lettera maiuscola e minuscola:
<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>
Esempio
Un elemento <input> con type="email" che deve essere nel seguente ordine: caratteri @ caratteri . dominio (caratteri seguiti da un segno @, seguito da più caratteri e poi un "."
Dopo il "." segno, aggiungi almeno 2 lettere dalla a alla z:
<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>
Esempio
Un elemento <input> con type="search" che NON PUÒ contenere i seguenti caratteri: ' o "
<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>
Esempio
Un elemento <input> con type="url" che deve iniziare con http:// o https:// seguito da almeno un carattere:
<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>
❮ Tag HTML <input>