Attribut pattern : Format des champs input d’un formulaire HTML

Vous voulez éviter les erreurs dans vos formulaires sans ajouter de JavaScript ? L’attribut pattern HTML est une solution simple et efficace pour imposer un format précis à vos champs. Vous allez apprendre à maîtriser l’attribut pattern, améliorer l’expérience utilisateur et comprendre ses limites pour sécuriser correctement vos données.

• Imposer facilement des formats de saisie fiables dans vos formulaires HTML pour éviter les erreurs utilisateurs
• Gagner en professionnalisme en améliorant l’expérience utilisateur grâce à des validations simples et efficaces
• Éviter les failles classiques en apprenant les limites du pattern et l’importance de sécuriser vos données côté serveur

Dans ce tutoriel sur le frontend, vous allez apprendre à utiliser l’attribut pattern en HTML pour imposer un format précis à vos champs de formulaire. Une compréhension solide pour ne plus jamais coder “au hasard”.

Comprendre l’attribut pattern en HTML

Avant de coder, il faut comprendre ce que vous manipulez.

Qu’est-ce que l’attribut pattern ?

L’attribut pattern est un attribut HTML que vous pouvez ajouter à certains champs de formulaire, comme le chmp <input>. Il permet de définir un format obligatoire que la valeur saisie doit respecter.

Concrètement, vous indiquez une règle… et le navigateur vérifie automatiquement si l’utilisateur la respecte.

Exemple très simple :

<input type="text" pattern="[0-9]{5}">

Ici, vous imposez :

• uniquement des chiffres
• exactement 5 caractères

Donc l’utilisateur devra entrer quelque chose comme :

75001

Mais pas :

Paris
75A01
123

Et ça, sans écrire une seule ligne de JavaScript.

Comment fonctionne pattern html ?

C’est ici que ça devient intéressant.

L’attribut pattern HTML repose sur un système appelé expressions régulières (ou regex). Pas de panique : on va vulgariser ça ensemble.

Une expression régulière, c’est quoi ?

C’est simplement une façon d’écrire une règle de validation.

Par exemple :

pattern="[A-Za-z]+"

Cela signifie :

• uniquement des lettres
• au moins un caractère

Donc :

• ✔ « Jean »
• ✔ « Dupont »
• ❌ « Jean123 »

👉 Pour en savoir plus avec les RegEx : Initiation au Regex et 20 Regex essentielles

Premier exemple concret : valider un prénom

Imaginez que vous voulez empêcher les chiffres dans un prénom.

<label>Prénom :</label>
<input type="text" pattern="[A-Za-zÀ-ÿ\- ]+" required>

• [A-Za-zÀ-ÿ] → toutes les lettres (y compris accents)
• \- → autorise le tiret (Jean-Pierre)
• → autorise l’espace
• + → au moins un caractère

Résultat :

• ✔ « Jean »
• ✔ « Marie-Claire »
• ✔ « Élodie »
• ❌ « Jean123 »

Vous venez déjà de faire un formulaire plus propre que 90% des sites web.

Ajouter un message d’erreur personnalisé

Par défaut, le navigateur affiche un message générique. Pas terrible niveau UX. Heureusement, vous pouvez améliorer ça.

<input 
  type="text" 
  pattern="[A-Za-z]+" 
  title="Veuillez entrer uniquement des lettres">

• Le title devient le message affiché en cas d’erreur.

Simple, efficace… et beaucoup plus professionnel.

Cas pratique : valider un numéro de téléphone

En France, un numéro ressemble à :

06 12 34 56 78

Voici une version avec pattern :

<input 
  type="tel" 
  pattern="^0[1-9](\s?[0-9]{2}){4}$"
  title="Format attendu : 06 12 34 56 78">

Décryptage :

• ^ → début de la chaîne
• 0[1-9] → commence par 01 à 09
• (\s?[0-9]{2}){4} → 4 groupes de 2 chiffres, avec espace optionnel
• $ → fin de la chaîne

Résultat :

• ✔ 0612345678
• ✔ 06 12 34 56 78
• ❌ 123456
• ❌ 06-12-34-56-78

👉 Pour aller plus loin : Regex pour valider un numéro de téléphone en PHP et JS.

Cas pratique : mot de passe sécurisé

Vous voulez imposer :

• au moins 8 caractères
• 1 majuscule
• 1 chiffre

Voici le pattern :

<input 
  type="password" 
  pattern="^(?=.*[A-Z])(?=.*[0-9]).{8,}$"
  title="Au moins 8 caractères, une majuscule et un chiffre">

• (?=.*[A-Z]) → au moins une majuscule
• (?=.*[0-9]) → au moins un chiffre
• .{8,} → minimum 8 caractères

Résultat :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

• ✔ « Test1234 »
• ❌ « test1234 »
• ❌ « TESTTEST »

👉 Pour aller toujours plus loin : Regex de password en PHP et JS

Associer pattern avec required

Très important : L’attribut pattern html ne fonctionne que si l’utilisateur remplit le champ.

Si le champ est vide → pas d’erreur. Donc pour forcer la validation :

<input type="text" pattern="[A-Za-z]+" required>

Sans required, vous laissez une porte ouverte.

Les limites de l’attribut pattern

Et là, on va parler sérieusement.

1. Ce n’est PAS un gage sécurité

L’attribut pattern fonctionne côté navigateur. Donc :

• il peut être désactivé
• il peut être contourné
• il peut être modifié

Un utilisateur malveillant peut :

• désactiver JavaScript
• modifier le HTML
• envoyer une requête directement au serveur

• Conclusion : ne faites jamais confiance uniquement à pattern html

2. Exemple de contournement

Même avec :

<input pattern="[0-9]{5}">

Un utilisateur peut envoyer :

curl -d "code=abcde" https://votresite.fr

Et votre serveur recevra… « abcde ».

Validation côté serveur : indispensable

Vous devez TOUJOURS valider les données côté serveur.

Si vous utilisez PHP :

if (!preg_match('/^[0-9]{5}$/', $_POST['code'])) {
    echo "Code invalide";
}

Le navigateur filtre… mais le serveur protège.

Retenez bien ça : pattern = confort utilisateur, pas sécurité. Cela améliore l’UX uniquement, pas la sécurité.

Les bonnes pratiques avec pattern html

Avec l’expérience, vous allez éviter beaucoup d’erreurs.

Soyez simple

Ne créez pas des regex incompréhensibles.

Un bon pattern doit être :

• lisible
• maintenable
• compréhensible

Testez vos expressions

Utilisez des outils comme :

• regex101
• RegExr

Parce qu’une petite erreur peut bloquer tous vos utilisateurs.

Combinez avec d’autres attributs

L’attribut pattern devient encore plus puissant avec :

<input 
  type="email" 
  required 
  minlength="5" 
  maxlength="50">

Vous pouvez mixer :

• pattern
• required
• minlength
• maxlength

Exemple complet de formulaire

Voici un petit formulaire propre et professionnel :

<form>
  <label>Nom :</label>
  <input type="text" pattern="[A-Za-z]+" required>

  <label>Code postal :</label>
  <input type="text" pattern="[0-9]{5}" required>

  <label>Téléphone :</label>
  <input type="tel" pattern="^0[1-9](\s?[0-9]{2}){4}$" required>

  <label>Mot de passe :</label>
  <input type="password" pattern="^(?=.*[A-Z])(?=.*[0-9]).{8,}$" required>

  <button type="submit">Envoyer</button>
</form>

Avec ça, vous avez déjà une base solide.

Aller plus loin pour améliorer l’expérience utilisateur

Vous pouvez aller encore plus loin avec CSS :

input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid green;
}

Effet immédiat : feedback visuel en temps réel.

---

L’attribut pattern HTML est un outil incroyablement puissant pour améliorer vos formulaires. Il vous permet de guider vos utilisateurs, de limiter les erreurs, et de professionnaliser votre interface sans effort.

Mais attention : ne tombez pas dans le piège classique. Ce n’est pas un système de sécurité. C’est une aide, un filtre, une première barrière… mais certainement pas un garde du corps.

Si vous l’utilisez intelligemment, combiné à une validation côté serveur, vous obtenez le combo parfait : une expérience utilisateur fluide ET une application robuste.

Et entre nous… c’est exactement ce qu’on cherche quand on code un bon site web. Maintenant que vous comprenez et savez utiliser l’attribut pattern en HTML, découvrez comment Valider un formulaire en JS ou découvrez notre tutoriel complet pour un Formulaire de login sécurisé en PHP.