Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Attribut HTML : pattern
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'attributpattern indique uneexpression rationnelle que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pasnull) ne respecte pas les contraintes portées parpattern, la propriétépatternMismatch en lecture seule, rattachée à l'objetValidityState, vaudratrue.
Exemple interactif
<label for="username">Nom d'utilisateur·ice : (3-16 caractères)</label><input name="username" type="text" value="Sasha" pattern="\w{3,16}" required /><label for="pin">PIN : (4 chiffres)</label><input name="pin" type="password" pattern="\d{4,4}" required />label { display: block; margin-top: 1em;}input:valid { background-color: palegreen;}input:invalid { background-color: lightpink;}Vue d'ensemble
L'attributpattern peut être utilisé pour les champs de typetext,tel,email,url,password etsearch.
L'attributpattern, lorsqu'il est défini, est une expression rationnelle que l'attributvalue du champ doit respecter pour réussir lavalidation des contraintes. Il doit s'agir d'une expression rationnelle JavaScript valide, comme utilisée par le typeRegExp, et documentée dans notreguide sur les expressions rationnelles.
L'expression rationnelle du motif est compilée avec l'indicateur"v". Cela rend l'expressioncompatible Unicode et modifie la façon dont les classes de caractères sont interprétées. Cela permet l'intersection et la soustraction d'ensembles dans les classes de caractères. En plus de] et\, les caractères suivants doivent être échappés avec un antislash\ s'ils sont littéraux :(,),[,{,},/,-,|. Avant mi-2023, l'indicateur"u" était utilisé ; si vous mettez à jour un ancien code, consultez la référenceunicodeSets.
L'expression rationnelle du motif doit correspondre à l'intégralité de la valeur du champ, et non à une sous-chaîne — comme si^(?: était ajouté au début du motif et)$ à la fin.
Il ne faut pas entourer le texte du motif de barres obliques. Aucune expression rationnelle n'est appliquée si la valeur de l'attribut est absente, vide ou invalide.
Certains types de champs prenant en charge l'attribut pattern, notammentemail eturl, ont des syntaxes de valeur attendues qui doivent être respectées. Si l'attribut pattern n'est pas présent et que la valeur ne correspond pas à la syntaxe attendue pour ce type, la propriété en lecture seuletypeMismatch de l'objetValidityState vaudratrue.
Validation des contraintes
Si la valeur du champ n'est pas la chaîne de caractères vide et qu'elle ne correspond pas entièrement à l'expression rationnelle, une violation de contrainte est signalée par la propriétépatternMismatch de l'objetValidityState, qui vaudra true.
Note :Si l'attributpattern est défini sans valeur, sa valeur est implicitement la chaîne de caractères vide. Ainsi, toute valeur non vide pour l'attribut value entraînera une violation de contrainte.
Considérations d'utilisabilité et d'accessibilité
Lorsque vous utilisez un attributpattern, fournissez une description du motif attendu dans un texte visible à proximité du contrôle. Ajoutez également un attributtitle qui décrit le motif. Les agents utilisateurs peuvent utiliser le contenu de title lors de la validation des contraintes pour indiquer à l'utilisateur·ice que le motif n'est pas respecté. Certains navigateurs affichent une info-bulle avec le contenu de title, ce qui améliore l'utilisabilité pour les utilisateur·ice·s voyant·e·s. De plus, certaines technologies d'assistance peuvent lire le contenu de title à voix haute lorsque le contrôle reçoit la sélection, mais il ne faut pas s'y fier pour l'accessibilité.
Il est déconseillé de se reposer uniquement sur l'attributtitle pour l'affichage visuel du texte, car de nombreux agents utilisateurs n'exposent pas cet attribut de manière accessible. Bien que certains navigateurs affichent une info-bulle au survol d'un élément avec un titre, cela exclut les utilisateur·ice·s au clavier ou sur écran tactile. C'est l'une des raisons pour lesquelles il est nécessaire d'inclure des informations expliquant comment remplir le contrôle pour respecter les exigences.
Bien que certains navigateurs utilisent le contenu detitle pour afficher des messages d'erreur, ils peuvent aussi l'afficher au survol même sans erreur. Il faut donc veiller à ne pas formuler le titre comme si une erreur était survenue.
Exemples
Correspondance d'un numéro de téléphone
Avec le fragment de code HTML suivant :
<p> <label >Veuillez saisir votre numéro de téléphone au format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="Code à 3 chiffres de l'indicatif régional" size="2" />)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="Préfixe à 3 chiffres" size="2" /> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="Nombre à 4 chiffres" size="3" /> </label></p>Ici, nous avons 3 sections pour un numéro de téléphone nord-américain avec une étiquette implicite englobant les trois composants du numéro de téléphone, s'attendant respectivement à 3 chiffres, 3 chiffres et 4 chiffres, comme défini par l'attributpattern défini sur chacun.
Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attributpatternMismatch seratrue. On aura également l'activation de la pseudo-classe CSS:invalid.
input:invalid { border: red solid 3px;}En utilisant les attributsminlength etmaxlength à la place, on aurait eu les propriétésValidityState.tooLong ouValidityState.tooShort qui auraient valutrue.
Indiquer un motif
On pourra utiliser l'attributpattern afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voirce guide sur la validation avec les expressions rationnelles pour une introduction).
L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.
<form> <div> <label for="uname"> Veuillez choisir un nom d'utilisateur·ice : </label> <input type="text" name="name" required size="45" pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules" /> <span></span> <p> Les noms d'utilisateur·ice·s doivent être en minuscules et contenir 4 à 8 caractères. </p> </div> <div> <button>Envoyer</button> </div></form>div { margin-bottom: 10px; position: relative;}p { font-size: 80%; color: #999999;}input + span { padding-right: 30px;}input:invalid + span:after { position: absolute; content: "✖"; padding-left: 5px;}input:valid + span:after { position: absolute; content: "✓"; padding-left: 5px;}Cela donne le résultat suivant :
Spécifications
| Specification |
|---|
| HTML # attr-input-pattern |