Maison  >  Article  >  interface Web  >  Quels sont les nouveaux attributs de formulaire en HTML5

Quels sont les nouveaux attributs de formulaire en HTML5

青灯夜游
青灯夜游original
2022-02-25 17:33:114907parcourir

html5 nouveaux attributs de formulaire incluent : autocomplete, novalidate, autofocus, form, formaction, formmethod, formnovalidate, formtarget, list, min, max, step, etc.

Quels sont les nouveaux attributs de formulaire en HTML5

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Nouveaux attributs de formulaire HTML5

Les balises ff9c23ada1bcecdd1a0fb5d5a0f18437 et d5fd7aea971a85678ba271703566ebfd de HTML5 ont ajouté plusieurs nouveaux attributs

ff9c23ada1bcecdd1a0fb5d5a0f18437Nouveaux attributs :

  • autocomplete

  • novalid. mangé

d5fd7aea971a85678ba271703566ebfd Nouveaux attributs :

  • autocomplete : saisie semi-automatique, s'il faut enregistrer automatiquement les données précédemment soumises pour la prochaine suggestion de saisie.

  • autofocus : obtenez automatiquement le focus d'entrée.

  • form : La valeur est l'identifiant d'un formulaire. S'il est défini, le champ de saisie peut être placé en dehors du formulaire.

  • formaction : adresse URL utilisée pour décrire la soumission du formulaire

  • formenctype : décrit l'encodage des données de la soumission du formulaire au serveur (uniquement pour les formulaires method="post" dans les formulaires de formulaire)

  • formmethod : défini comment le formulaire est soumis.

  • formnovalidate : décrit que l'élément d5fd7aea971a85678ba271703566ebfd n'a pas besoin d'être validé lorsque le formulaire est soumis.

  • formtarget : Spécifiez un nom ou un mot-clé pour indiquer l'affichage après la réception des données de soumission du formulaire.

  • hauteur et largeur : spécifiez la hauteur et la largeur de l'image utilisées pour les balises d5fd7aea971a85678ba271703566ebfd

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

  • min et max : limite la valeur minimale ou maximale du nombre d'entrée

  • multiple : s'il faut autoriser plusieurs valeurs d'entrée Si cet attribut est déclaré, alors plusieurs valeurs séparées par des virgules peuvent être saisies. dans la zone de saisie.

  • pattern (regexp) : Spécifiez une expression régulière pour valider l'entrée. (Par défaut, l'ajout de ^$ au début et à la fin)

  • placeholder : espace réservé, utilisé pour afficher le texte d'invite dans la zone de saisie. Contrairement à la valeur, il ne peut pas être soumis.

  • obligatoire : lorsque le formulaire est soumis, il sera vérifié s'il y a une entrée. Sinon, un message d'invite apparaîtra.

  • step : Limitez la taille du pas des nombres saisis, utilisé en conjonction avec min.

  • maxlength : Limite la longueur maximale. Ce n'est utile que lorsqu'il y a une saisie. Il ne fait pas de distinction entre le chinois et l'anglais.

  • minlength : limite la longueur minimale, mais ce n'est pas un attribut standard H5 et n'est pris en charge que par certains navigateurs.

ff9c23ada1bcecdd1a0fb5d5a0f18437 attribut novalidate

L'attribut novalidate est un attribut booléen (booléen). L'attribut

novalidate spécifie que le formulaire ou le champ de saisie ne doit pas être validé lors de la soumission du formulaire.

Exemple : Pas besoin de valider les données du formulaire soumis

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit"></form>

ff9c23ada1bcecdd1a0fb5d5a0f18437 ou d5fd7aea971a85678ba271703566ebfd attribut de saisie semi-automatique

L'attribut de saisie semi-automatique spécifie que le formulaire ou le champ de saisie doit avoir une fonctionnalité de saisie semi-automatique.

Lorsque l'utilisateur commence à taper dans le champ de saisie semi-automatique, le navigateur doit afficher les options renseignées dans le champ.

Conseils : 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 fonctionne avec les balises ff9c23ada1bcecdd1a0fb5d5a0f18437, ainsi qu'avec les types de balises d5fd7aea971a85678ba271703566ebfd suivants : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, plage et couleur.

Exemple : Activez la saisie semi-automatique dans form (désactivez la saisie semi-automatique pour un champ de saisie) :

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

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

ff9c23ada1bcecdd1a0fb5d5a0f18437 attribut novalidate

L'attribut novalidate est un attribut booléen. L'attribut novalidate spécifie que le formulaire ou le champ de saisie ne doit pas être validé lors de la soumission du formulaire.

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

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

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

L'attribut formaction remplacera l'attribut 80e4a4b497ba87d4db7bd7777678eee0 element L'attribut action.

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

Exemple : Le formulaire HTMLform suivant contient deux boutons de soumission avec des adresses différentes :

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

L'attribut formenctype décrit le codage des données du formulaire soumis au serveur (uniquement pour les formulaires method="post" dans les formulaires)

L'attribut formenctype remplace l'attribut enctype de l'élément form.

Principalement : cet attribut est utilisé avec type="submit" et type="image".

Exemple :

Le premier bouton de soumission envoie les données du formulaire avec l'encodage par défaut, et le deuxième bouton d'envoi envoie les données du formulaire avec l'encodage "multipart/form-data" :

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

d5fd7aea971a85678ba271703566ebfd formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 ff9c23ada1bcecdd1a0fb5d5a0f18437 元素的 method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

示例:重新定义表单提交方式实例:

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

d5fd7aea971a85678ba271703566ebfd formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 d5fd7aea971a85678ba271703566ebfd 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 ff9c23ada1bcecdd1a0fb5d5a0f18437 元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

示例:

两个提交按钮的表单(使用与不适用验证 ):

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="不验证提交">
</form>

【推荐课程:HTML5视频教程web前端入门教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn