Attribut de modèle HTML <input>
Exemple
Un formulaire HTML avec un champ de saisie qui ne peut contenir que trois lettres (pas de chiffres ni de caractères spéciaux) :
<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>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L' patternattribut spécifie une expression régulière par rapport à laquelle la
<input>valeur de l'élément est vérifiée lors de la soumission du formulaire.
Remarque : L' patternattribut fonctionne avec les types d'entrée suivants : texte, date, recherche, URL, tél, e-mail et mot de passe.
Conseil : Utilisez l'attribut global titlepour décrire le modèle afin d'aider l'utilisateur.
Conseil : Apprenez-en plus sur les expressions régulières dans notre didacticiel JavaScript.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'attribut.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Syntaxe
<input pattern="regexp">
Valeurs d'attribut
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Plus d'exemples
Exemple
Un élément <input> avec type="password" qui doit contenir 8 caractères ou plus :
<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>
Exemple
Un élément <input> avec type="password" qui doit contenir au moins 8 caractères composés d'au moins un chiffre et d'une lettre majuscule et minuscule :
<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>
Exemple
Un élément <input> avec type="email" qui doit être dans l'ordre suivant : caractères @ caractères . domaine (caractères suivis d'un signe @, suivis d'autres caractères, puis d'un "."
Après le "." signe, ajoutez au moins 2 lettres de a à 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>
Exemple
Un élément <input> avec type="search" qui NE PEUT PAS contenir les caractères suivants : ' ou "
<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>
Exemple
Un élément <input> avec type="url" qui doit commencer par http:// ou https:// suivi d'au moins un caractère :
<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>
❮ Balise HTML <input>