Quels sont les nouveaux attributs de formulaire en HTML5

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

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

Nouveaux attributs de formulaire HTML5

Les balises

et de HTML5 ont ajouté plusieurs nouveaux attributs

Nouveaux attributs :

• autocomplete

• novalid. mangé

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

• 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.

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>

ou 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 , ainsi qu'avec les types de balises 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.

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>

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

L'attribut formaction remplacera l'attribut < form> 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>

formmethod 属性

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

formmethod 属性覆盖了 元素的 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>

formnovalidate 属性

novalidate 属性是一个 boolean 属性.

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

formnovalidate 属性会覆盖 元素的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!