oujood.com

  HTML L’attribut pattern de la balise input

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>

chercher |

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) :

Exemple :       Copier 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

Voir aussi nos tutoriel :

HTML et CSS les formulaires

Afficher les formulaire en HTML...

Balise link

Définit la relation entre un document et une ressource externe (la plus utilisée pour lier les feuilles de style)

margin-left

Définit la marge gauche d'un élément