Qu'est-ce que l'attribut pattern en HTML?

L'attribut pattern spécifie une expression régulière définissant la règle avec laquelle valider la valeur de l'élément .

Quels navigateurs ne supportent pas l'attribut pattern?

Internet Explorer et Safari ne supportent pas l'attribut pattern.

Quelle est la nouveauté de l'attribut pattern par rapport à HTML 4.01?

L'attribut pattern est une nouveauté introduite avec HTML5.

Pouvez-vous donner un exemple d'utilisation de l'attribut pattern?

Un formulaire HTML avec un champ d'entrée qui accepte seulement trois lettres, sans chiffres ni caractères spéciaux.

Attribut pattern HTML – Validation par expression régulière

OUJOOD.COM

Définition de l'attribut pattern

LES ATTRIBUTS HTML

L'attribut pattern accepte une expression régulière. Quand l'utilisateur soumet le formulaire, le navigateur compare la valeur saisie à cette expression — si ça ne correspond pas, l'envoi est bloqué.

À noter : L'attribut pattern ne fonctionne qu'avec les types text, password, search, url, email et tel.

Astuce : Ajoutez l'attribut title pour indiquer à l'utilisateur le format attendu. Ce texte apparaît dans le message d'erreur natif du navigateur.

Astuce : Pour aller plus loin, consultez notre cours sur les expressions régulières en JavaScript.

Syntaxe

Exemple : restreindre un champ à trois lettres

Ce formulaire utilise pattern="[A-Za-z]{3}" pour n'accepter que trois lettres — le code ISO d'un pays, par exemple.

Exemple : 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Exemple attribut pattern</title>
</head>
<body>
  <form action="page-cible.php">
    Nom : <input type="text" name="nom"><br><br>
    Code pays : <input type="text" name="country_code"
      pattern="[A-Za-z]{3}"
      title="Trois lettres uniquement — ex. : FRA, MAR, USA"><br><br>
    Email : <input type="email" name="email"><br><br>
    <input type="submit" value="Envoyer">
  </form>
</body>
</html>

Compatibilité navigateurs

L'attribut pattern est supporté par Chrome, Firefox, Edge et Opera. Internet Explorer et les anciennes versions de Safari ne le reconnaissent pas — si ces navigateurs sont dans votre cible, prévoyez une validation côté serveur en complément.

Pattern et HTML5

L'attribut pattern est introduit avec HTML5. Il n'existait pas en HTML 4.01.

Valeurs acceptées

Valeur	Description
regexp	Expression régulière à laquelle la valeur saisie doit correspondre. La syntaxe est celle des expressions régulières JavaScript.

Retour à l'accueil du site

Par carabde 10 mars 2014