Nouveaux attributs de formulaire HTML5

Nouveaux attributs de formulaire HTML5

Les

des attributs ont été ajoutés à la balise input>

saisie semi-automatique

complétion automatique

mise au point automatique

formulaire
< ;form> / attribut de saisie semi-automatique

attribut de saisie semi-automatique

spécifie que le formulaire ou le champ de saisie doit avoir une fonction de saisie semi-automatique.

Lorsque l'utilisateur commence à saisir un champ de saisie semi-automatique, le navigateur doit afficher les options renseignées dans ce champ.Astuce : L'attribut de saisie semi-automatique peut être activé dans l'élément form mais désactivé dans l'élément input.

Remarque: la saisie semi-automatique s'applique à la balise , ainsi qu'aux types de balises suivants : texte, recherche, url, téléphone, e-mail, mot de passe, sélecteurs de date, plage et couleur.

Instance

Ouvrir sous forme HTML saisie semi-automatique (un champ de saisie désactive la saisie semi-automatique) :

php中文网(php.cn)

姓名:
留言
E-mail:

填写并提交表单，然后重新刷新页面查看如何自动填充内容。

注意 form的 autocomplete属性为 "on"（开），但是e-mail自动为“off”（关）。

Exécutez le programme et essayez-le

Conseils: Dans certains navigateurs, vous devrez peut-être activer la saisie semi-automatique pour que cet attribut prenne effet.

attribut novalidate

Un attribut booléen de l'attribut novalidate.

La propriété novalidate spécifie que le formulaire ou les champs de saisie ne doivent pas être validés lors de la soumission du formulaire.

Instance

Pas besoin de vérifier les données du formulaire soumis

php中文网(php.cn)

E-mail:

注意在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。

Exécutez le programme pour l'essayer

attribut autofocus

L'attribut autofocus est un attribut booléen.

L'attribut autofocus spécifie que le domaine est automatiquement obtenu lorsque la page est chargée focus.

Exemple

Laissez le champ de saisie "Message" être automatiquement focalisé lors du chargement de la page :

php中文网(php.cn)

注意： Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。

Exécutez le programme essayer pendant un instant

Vous pouvez modifier la mise au point automatique sur le champ de saisie du nom et comparer les résultats des deux exécutions pour voir la différence

; attribut de formulaire

L'attribut de formulaire spécifie un ou plusieurs formulaires auxquels appartient le champ de saisie.

Astuce: Si vous devez référencer plusieurs formulaires, utilisez une liste séparée par des espaces.

Instance

Le champ de saisie situé à l'extérieur du formulaire fait référence au formulaire HTML (le formulaire de saisie fait toujours partie du formulaire) :

php中文网(php.cn)

"留言" 字段没有在form表单之内，但它也是form表单的一部分。

留言:

Exécutez le programme et essayez-le

Remarque: IE ne prend pas en charge l'attribut de formulaire

attribut formaction

L'attribut formaction est utilisé pour décrire l'adresse URL de la soumission du formulaire.

L'attribut formaction remplacera l'attribut action dans le

Remarque : L'attribut formaction est utilisé pour type="submit" et type="image".

Instance

Le formulaire HTML suivant contient des boutons Soumettre avec deux adresses différentes :

    php中文网(php.cn) 
   姓名: 
 密码:

L'un des programmes ci-dessus sera soumis à la page demo.php et l'autre sera soumis à l'administrateur .php page

< ;input> attribut formenctype

formenctypedécrit l'encodage des données soumises par le formulaire au serveur (uniquement pour les formulaires method="post" dans les formulaires de formulaire)

L'attributformenctyperemplace l'attribut enctype de l'élément form.

Main: Cet attribut est utilisé avec type="submit" et type="image".

Instance

Le premier bouton de soumission a un codage par défaut pour envoyer les données du formulaire, et le deuxième bouton de soumission envoie les données du formulaire dans "multipart/form -data" Envoyer les données du formulaire au format d'encodage :

    php中文网(php.cn) 
   name:

Exécutez le programme pour l'essayer

L'attribut

formmethod

formmethoddéfinit la manière dont le formulaire est soumis. L'attribut

formmethodremplace l'attribut method de l'élément

Remarque: Cet attribut peut être utilisé avec type="submit" et type="image".

Instance

Redéfinir la méthode de soumission du formulaire Exemple :

    php中文网(php.cn) 
   姓名: 
 密码:

Le code ci-dessus est transmis dans une page en mode get. La première consiste à redéfinir la méthode de soumission à l'aide de formmethod et à la soumettre à la page emo-post.php en mode publication

< L'attribut >novalidate est un attribut booléen. L'attribut

novalidate décrit que l'élément

L'attribut formnovalidate remplacera l'attribut novalidate de l'élément

Remarque

: L'attribut formnovalidate est utilisé avec type="submit

Exemple
Formulaire avec deux boutons de soumission (avec et sans validation) :

    php中文网(php.cn) 
   E-mail:

Exécuter le programme à essayer

attribut formtargetL'attribut formtarget spécifie un nom ou un mot-clé pour indiquer le formulaire les données de soumission après leur réception s'affichent.

L'attribut formtarget remplace l'attribut target de l'élément

Remarque

: L'attribut formtarget fonctionne avec type=". soumettre" et type="image" Utilisez .

Instance

Un formulaire avec deux boutons de soumission, affichés dans différentes fenêtres :

    php中文网(php.cn) 
   作者姓名: 
 书本名:

Exécutez le programme et essayez-le

les attributs de hauteur et de largeur

les attributs de hauteur et de largeur sont spécifiés pour l'image tapez La hauteur et la largeur de l'image de l'étiquette.

Remarque : Les attributs height et width s'appliquent uniquement aux balises

Astuce: Les images spécifient généralement à la fois les attributs de hauteur et de largeur. Si une image a une hauteur et une largeur définies, l'espace requis par l'image sera conservé lors du chargement de la page. Sans ces attributs, le navigateur ne connaît pas la taille de l'image et ne peut pas réserver l'espace approprié. L'image entraînera une modification de l'effet de mise en page pendant le processus de chargement (même si l'image a été chargée).

Instance

définit un bouton de soumission d'image, en utilisant les attributs de hauteur et de largeur :

    php中文网(php.cn) 
   First name: 
 Last name:

Exécutez le programme pour essayer it out

attribut de liste

l'attribut de liste spécifie la liste de données du champ de saisie. datalist est une liste d'options pour le champ de saisie.

Instance

Valeur prédéfinie dans :

    php中文网(php.cn)

Exécutez le programme pour l'essayer

attributs min et max

les attributs min, max et step sont utilisés pour les entrées contenant des nombres ou des dates Types spécifier des limites (contraintes).

Remarque: Les attributs min, max et step s'appliquent aux types de balises suivants : sélecteurs de date, nombre et plage.

Exemple

Paramètres de valeur minimale et maximale de l'élément :

    php中文网(php.cn) 
   输入 1980-01-01 之前的日期: 
 输入 2000-01-01 之后的日期: 
 数量 (在1和5之间):

Exécutez le programme et essayez-le

Remarque: Internet Explorer 9 et les versions antérieures d'IE et Firefox ne prennent pas en charge les attributs max et min de la balise d'entrée.

Remarque: Les attributs max et min ne prennent pas en charge la saisie de la date et de l'heure dans Internet Explorer 10, et IE 10 ne prend pas en charge ces types de saisie.

attribut multiple

l'attribut multiple est un attribut booléen.

spécification d'attribut multiple< Multiple les valeurs peuvent être sélectionnées dans l'élément ;input>

Remarque: L'attribut multiple s'applique aux types de balises suivants : email et file. : e-mail et fichier.

Instance

Télécharger plusieurs fichiers :

php中文网(php.cn)

尝试选取一张或者多种图片。

Exécutez le programme et essayez-le

Attribut de motif

L'attribut pattern décrit une expression régulière utilisée pour vérifier la valeur de l'élément .

Remarque : L'attribut pattern s'applique aux types de balises suivants : texte, recherche, URL, numéro de téléphone, e-mail et mot de passe.

Astuce : est utilisé pour Les propriétés de titre global décrivent des modèles.

Conseil : vous pouvez en savoir plus sur les expressions régulières dans notre didacticiel JavaScript

Exemple

L'exemple suivant montre un champ de texte qui ne peut contenir que trois lettres (hors chiffres et caractères spéciaux) :

    php中文网(php.cn) 
   请输入3位字母:

Exécutez le programme pour l'essayer

attribut d'espace réservé

L'attribut placeholder fournit un indice décrivant la valeur attendue du champ de saisie.

Une brève invite s'affiche dans le champ de saisie avant que l'utilisateur ne saisisse une valeur.

Remarque: L'attribut placeholder s'applique aux types de balises suivants : texte, recherche, URL, téléphone, e-mail et mot de passe.

Instance

Texte d'invite du champ de saisie :

    php中文网(php.cn) 
   姓名：
 密码：

Exécutez le programme pour l'essayer

attribut obligatoire

l'attribut obligatoire est un attribut booléen

l'attribut obligatoire spécifie que le champ de saisie doit être rempli. avant la soumission (ne peut pas être nul).

Remarque : L'attribut obligatoire s'applique aux types de balises suivants : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, numéro, case à cocher, radio et fichier.

Instance

Champ de saisie qui ne peut pas être vide :