English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5Des nouveaux attributs de formulaire ont été ajoutés, form a ajouté autocomplete et novalidate, input a ajouté autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height et width, list, min et max, multiple, pattern (regexp)
HTML5 Les éléments <form> et <input> ont été ajoutés plusieurs nouveaux attributs.
Nouveaux attributs de l'élément <form> :
autocomplete
novalidate
Nouveaux attributs de l'élément <input> :
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height et width
list
min et max
multiple
pattern (regexp)
placeholder
required
step
L'attribut autocomplete détermine que le champ de formulaire ou d'entrée doit avoir la fonction d'auto-complétion.
Lorsque l'utilisateur commence à saisir dans un champ de complétion automatique, le navigateur doit afficher les options saisies dans ce champ.
Avis : L'attribut autocomplete peut être activé dans l'élément form mais désactivé dans l'élément input.
Attention : autocomplete s'applique aux balises <form> ainsi qu'aux types de balises <input> suivants : text, search, url, téléphone, email, mot de passe, datepickers, range et couleur.
Activer autocomplete dans un formulaire HTML (un champ input désactive autocomplete):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-"form.php" autocomplete="on"> Nom: <input type="text" name="fname"><br> Nom de famille : <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </<form> <p>Remplissez et soumettez le formulaire, puis rechargez la page pour voir comment le contenu est rempli automatiquement.</p> <p>Attention, l'attribut autocomplete du form est "on" (activé), mais e-mail est automatiquement réglé sur "off" (désactivé).</p> </body> </html>Voyons si ‹/›
Avis : Vous devrez peut-être activer la fonctionnalité d'auto-complétion dans certains navigateurs pour que cet attribut fonctionne.
L'attribut novalidate est un attribut boolean (booléen).
L'attribut novalidate spécifie que le formulaire ou les champs input ne doivent pas être vérifiés lors de la soumission.
Soumettre les données du formulaire sans validation
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-"form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </<form> <p><strong>Attention : </Dans Safari et Internet Explorer 9 Les versions précédentes ne prennent pas en charge l'attribut novalidate.</p> </body> </html>Voyons si ‹/›
L'attribut autofocus est un attribut boolean.
L'attribut autofocus spécifie que le champ doit automatiquement obtenir le focus lors du chargement de la page.
Faire que le champ d'entrée "Nom" se concentre automatiquement lors du chargement de la page :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Nom: <input type="text" name="fname" autofocus><br> Nom de famille : <input type="text" name="lname"><br> <input type="submit"> </<form> <p><strong>Attention : </strong> Internet Explorer 9Les versions d'IE plus anciennes ne prennent pas en charge l'attribut autofocus de l'étiquette input.</p> </body> </html>Voyons si ‹/›
L'attribut form spécifie un ou plusieurs formulaires auxquels appartient l'élément d'entrée.
Avis :Pour faire référence à un formulaire supérieur à un, utilisez une liste séparée par des espaces.
Les champs input situés en dehors du formulaire form font référence à l'HTML form (ce formulaire input appartient toujours à la forme form):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" id="form1"> Prénom : <input type="text" name="fname"><br> <input type="submit" value="Soumettre"> </<form> <p> Le champ "Nom de famille" n'est pas à l'intérieur du formulaire form, mais il fait partie du formulaire form.</p> Nom de famille: <input type="text" name="lname" form="form1"> <p><b>Attention:</b> IE ne prend pas en charge l'attribut form</p> </body> </html>Voyons si ‹/›
L'attribut formaction est utilisé pour décrire l'URL d'envoi du formulaire.
L'attribut formaction remplace l'attribut action de l'élément <form>.
Attention: L'attribut formaction est utilisé pour type="submit" et type="image".
Le formulaire HTML suivant contient deux boutons de soumission vers des adresses différentes :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Prénom : <input type="text" name="fname"><br> Nom de famille : <input type="text" name="lname"><br> <input type="submit" value="Soumettre"><br> <input type="submit" formaction="demo-admin.php" value="Soumettre"> </<form> <p><strong>Attention : </strong> Internet Explorer 9Les versions d'IE plus anciennes ne prennent pas en charge l'attribut formaction de l'étiquette input.</p> </body> </html>Voyons si ‹/›
L'attribut formenctype décrit le format d'encodage des données du formulaire soumis au serveur (seulement pour les formulaires form avec method="post")
L'attribut formenctype remplace l'attribut enctype de l'élément form.
Principal: Cette propriété est utilisée conjointement avec type="submit" et type="image".
Le premier bouton de soumission envoie les données du formulaire par encodage par défaut, le deuxième bouton de soumission utilise "multipart/form-data" Format d'encodage de transmission des données du formulaire:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-post-enctype.php" method="post"> Prénom : <input type="text" name="fname"><br> <input type="submit" value="Soumettre"> <input type="submit" formenctype="multipart/form-data" value="Encodage Multipart/form-data soumission"> </<form> <p><strong>Attention : </strong> Internet Explorer 9Les versions d'IE plus anciennes ne prennent pas en charge l'attribut formenctype de l'étiquette input.</p> </body> </html>Voyons si ‹/›
L'attribut formmethod définit le mode de soumission du formulaire.
L'attribut formmethod couvre l'attribut method de l'élément <form>.
Attention: Cette propriété peut être utilisée conjointement avec type="submit" et type="image".
Exemple de redéfinition du mode de soumission du formulaire :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> Prénom : <input type="text" name="fname"><br> Nom de famille : <input type="text" name="lname"><br> <input type="submit" value="Soumettre"> <input type="submit" formmethod="post" formaction="demo-form.php" value="Soumettre avec POST"> </<form> <p><strong>Attention : </strong> Internet Explorer 9Et les versions d'IE plus anciennes ne prennent pas en charge l'attribut formmethod du tag <input> .</p> </body> </html>Voyons si ‹/›
L'attribut novalidate est un attribut boolean.
L'attribut novalidate décrit que l'élément <input> n'a pas besoin d'être vérifié lors du soumission du formulaire.
L'attribut formnovalidate couvre l'attribut novalidate de l'élément <form>.
Attention : l'attribut formnovalidate est utilisé conjointement avec type="submit"
Formulaire avec deux boutons de soumission (avec et sans validation) :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Soumettre"><br> <input type="submit" formnovalidate="formnovalidate" value="Soumettre sans validation"> </<form> <p><strong>Attention : </strong> Internet Explorer 9Et les versions d'IE plus anciennes ou Safari ne prennent pas en charge l'attribut formnovalidate du tag <input> .</p> </body> </html>Voyons si ‹/›
L'attribut formtarget spécifie un nom ou un mot-clé pour indiquer l'endroit où les données du formulaire sont affichées après soumission.
L'attribut formtarget couvre l'attribut target de l'élément <form>.
Attention: L'attribut formtarget est utilisé conjointement avec type="submit" et type="image".
Formulaire avec deux boutons de soumission, affiché dans des fenêtres différentes :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Prénom : <input type="text" name="fname"><br> Nom de famille : <input type="text" name="lname"><br> <input type="submit" value="Soumettre normalement"> <input type="submit" formtarget="_blank" value="Soumettre sur une nouvelle page"> </<form> <p><strong>Attention : </strong> Internet Explorer 9Et les versions IE plus anciennes ne prennent pas en charge l'attribut formtarget des balises input.</p> </body> </html>Voyons si ‹/›
Les attributs height et width définissent la hauteur et la largeur de l'image pour les balises <input> de type image.
Attention: Les attributs height et width ne s'appliquent qu'aux balises <input> de type image.
Avis :L'image est généralement définie avec les attributs height et width. Si l'image est définie avec la hauteur et la largeur, l'espace nécessaire Il sera conservé au chargement de la page. Si ces attributs ne sont pas présents, Le navigateur ne connaît pas la taille de l'image et ne peut pas réserver Espace approprié. Le chargement de l'image peut changer l'effet de mise en page de la page. (Bien que l'image soit chargée).
Définir un bouton de soumission d'image, en utilisant les attributs height et width :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Prénom : <input type="text" name="fname"><br> Nom de famille : <input type="text" name="lname"><br> <input type="image" src="login_button.gif" alt="Soumettre"> </<form> </body> </html>Voyons si ‹/›
L'attribut list spécifie le datalist d'un champ d'entrée. Le datalist est une liste d'options pour le champ d'entrée.
Définir des valeurs <input> prédéfinies dans <datalist> :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </<form> <p><strong>Attention :/strong> Internet Explorer 9(versions IE plus anciennes), Safari ne prend pas en charge la balise datalist.</p> </body> </html>Voyons si ‹/›
Les attributs min, max et step sont utilisés pour définir des limites (contraintes) pour les types d'input contenant des nombres ou des dates.
Attention : les attributs min, max et step s'appliquent aux types de balises <input> suivants : les sélecteurs de date, les nombres et les plages de valeurs.
Configuration de la valeur minimale et maximale de l'élément <input> :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Entrer 1980-01-01 date antérieure : <input type="date" name="bday" max="1979-12-31><br> Entrer 2000-01-01 date postérieure : <input type="date" name="bday" min="2000-01-02><br> Quantité (dans1et5entre): <input type="number" name="quantity" min="1" max="5><br> <input type="submit"> </<form> <p><strong>Attention :/strong> Internet Explorer 9Les versions d'IE plus anciennes et Firefox ne prennent pas en charge les attributs max et min de l'étiquette input.</p> <p><strong>Attention :/strong> Dans Internet Explorer 10Les attributs max et min ne prennent pas en charge les entrées de dates et heures, IE 10 Ces types d'entrée ne sont pas pris en charge.</p> </body> </html>Voyons si ‹/›
L'attribut multiple est un attribut boolean.
L'attribut multiple permet de sélectionner plusieurs valeurs dans l'élément <input>.
Attention: L'attribut multiple est applicable aux types d'étiquettes <input> suivants : email et file:
Télécharger plusieurs fichiers :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Choisir l'image : <input type="file" name="img" multiple> <input type="submit"> </<form> <p>Essayer de sélectionner une image ou plusieurs images.</p> <p><strong>Attention :/strong> Internet Explorer 9Les versions d'IE plus anciennes ne prennent pas en charge l'attribut multiple de l'étiquette input.</p> </body> </html>Voyons si ‹/›
L'attribut pattern décrit une expression régulière utilisée pour valider la valeur de l'élément <input>.
Attention:L'attribut pattern est applicable aux types d'étiquettes <input> suivants : text, search, url, tel, email et password.
Avis : est utilisé pour le niveau global title L'attribut décrit le modèle.
Le exemple suivant montre un champ de texte qui ne peut contenir que trois lettres (sans chiffres ni caractères spéciaux) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3"
title="Three letter country code">
<input type="submit">
</<form>
<p><strong>Attention :/strong> Internet Explorer 9Les versions d'IE plus anciennes ou Safari ne prennent pas en charge l'attribut pattern de l'étiquette input.</p>
</body>
</html>Voyons si ‹/›L'attribut placeholder fournit un indice (hint) décrivant la valeur attendue pour le champ d'entrée.
Un court texte d'indication s'affiche sur le champ d'entrée avant que l'utilisateur n'insère une valeur.
Attention: L'attribut placeholder est applicable aux types suivants de l'élément <input>: text, search, url, telephone, email et password.
Texte d'indication du champ input t:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="text" name="fname" placeholder="Prénom"><br> <input type="text" name="lname" placeholder="Nom de famille"><br> <input type="submit" value="Soumettre"> </<form> <p><strong>Attention : </strong> Internet Explorer 9et les versions IE plus anciennes ne prennent pas en charge l'attribut placeholder de l'élément input.</p> </body> </html>Voyons si ‹/›
L'attribut required est un attribut boolean.
L'attribut required stipule que le champ d'entrée doit être rempli avant de soumettre (ne peut pas être vide).
Attention:L'attribut required est applicable aux types suivants de l'élément <input>: text, search, url, telephone, email, password, pickers de date, number, checkbox, radio et file.
Le champ input ne peut pas être vide:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Nom d'utilisateur: <input type="text" name="usrname" required> <input type="submit"> </<form> <p><strong>Attention : </strong> Internet Explorer 9et les versions IE plus anciennes, ou Safari, ne prennent pas en charge l'attribut required de l'élément input.</p> </body> </html>Voyons si ‹/›
L'attribut step détermine les intervalles numériques valides pour le champ d'entrée.
Si step="3Si " est utilisé, les nombres valides sont -3,0,3,6 et
Astuce : L'attribut step peut être utilisé avec Les attributs max et min créent une valeur de plage.
Attention: l'attribut step est utilisé avec les types suivants: number, range, date, datetime, datetime-local, month, time et week.
Définit la longueur d'étape de l'input comme3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutoriel de base(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </<form> <p><strong>Attention : </strong> Internet Explorer 9Les versions IE plus anciennes ou Firefox ne prennent pas en charge l'attribut step du tag input.</p> </body> </html>Voyons si ‹/›
| Balise | Description |
| <form> | Définir un formulaire |
| <input> | Définir un champ d'entrée |