HTML <input> pattern Attribut
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">Code pays :</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Code pays de trois lettres"><br><br>
<input type="submit">
</form> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
L'attribut pattern spécifie une expression régulière contre laquelle la valeur de l'élément <input> est vérifiée lors de la soumission du formulaire.
Remarque : L'attribut pattern fonctionne avec les types d'entrée suivants : texte, date, recherche, url, tel, email et mot de passe.
Astuce : Utilisez l'attribut global title pour décrire le motif afin d'aider l'utilisateur.
Astuce : En savoir plus sur les expressions régulières dans notre tutoriel JavaScript.
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'attribut.
| Attribut | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Syntaxe
<input pattern=" regexp "> Valeurs des Attributs
| Valeur | Description |
|---|---|
| regexp | Spécifie une expression régulière contre laquelle la valeur de l'élément <input> est vérifiée |
Plus d'Exemples
Exemple
Un élément <input> de type "password" qui doit contenir 8 caractères ou plus :
<form action="/action_page.php">
<label for="pwd">Mot de passe :</label>
<input type="password" id="pwd" name="pwd"
pattern=".{8,}" title="Huit caractères ou plus">
<input type="submit">
</form>
Exemple
Un élément <input> de type "password" qui doit contenir 8 caractères ou plus, dont au moins un chiffre, ainsi qu'une lettre majuscule et une lettre minuscule :
<form action="/action_page.php">
<label for="pwd">Mot de passe :</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Doit contenir au moins un chiffre, une lettre majuscule et une lettre minuscule, et au moins 8 caractères">
<input type="submit">
</form>
Exemple
Un élément <input> de type "email" qui doit être dans l'ordre suivant : caractères @ caractères . domaine (caractères suivis d'un signe @, suivis de plus de 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> de type "search" qui NE PEUT PAS contenir les caractères suivants : ' ou "
<form action="/action_page.php">
<label for="search">Recherche :</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Entrée invalide">
<input type="submit">
</form>
Exemple
Un élément <input> de type "url" qui doit commencer par http:// ou https:// suivi d'au moins un caractère :
<form action="/action_page.php">
<label for="website">Page d'accueil :</label>
<input type="url" id="website" name="website"
pattern="https?://.+" title="Inclure http://">
<input type="submit">
</form>