HTML L’attribut pattern de la balise input

Somaire

Définition et utilisation attribut pattern

LES BALISES 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 <input> .

Remarque : L'attribut de pattern fonctionne avec les élément input de types suivants : text, password, search, URL, e-mail ou tel.

Image astuce Astuce : Utilisez l'attribut title pour décrire le schéma pour aider l'utilisateur.

Image astuce Astuce : Plus d'informations sur les expressions régulières dans notre tutoriel JavaScript.

Syntaxe

<input pattern="regexp">


Exemple Un formulaire HTML avec un champ d'entrée qui peut contenir seulement trois lettres (pas de nombres ou de caractères spéciaux) :

Sélectionner le code

	  <!DOCTYPE html>
	  <html lang="fr">
	  <head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	  <title>html5 demo</title>
	  </head>
	  <body>
	  <form action="page-cible.php">
	     Nom: <input type="text" name="nom"><br><br>
	    Code du payé : <input type="text" name="country_code" pattern="[A-Za-z]{3}"
	  title="Trois lettre pour le code de votre payé"><br><br>
	    Email: <input type="text" name="email"><br><br>
	    <input type="submit">
	  </form>
	  </body>
	  </html>
    
 

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut pattern fonctionne dans tous les principaux navigateurs, sauf Internet Explorer et Safari.


Différences entre HTML 4.01 et HTML5

L'attribut pattern est nouveau en HTML5.


Valeurs d'attribut

Valeur Description
regexp Spécifie une expression régulière à laquelle la valeur de l'élément <input> doit être comparée

Retour à l'accueil du site

Par carabde 10 mars 2014

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    L'Attribut contextmenu

    Spécifie un menu contextuel pour un élément. Le menu contextuel s'affiche lorsqu'un utilisateur clique sur l'élément

    border-bottom-width

    Définit la largeur de la bordure inférieure

    L'Attribut class

    Spécifie un ou plusieurs noms de classe pour un élément (qui fait référence à une classe dans une feuille de style)



    Rentabilisez efficacement votre site