Quels sont les attributs des formulaires HTML5 ?

Si vous souhaitez voir une explication détaillée des éléments du formulaire, veuillez consulter l'explication détaillée des éléments du formulaire HTML5 ici

Nous avons parlé des éléments du formulaire ci-dessus, parlons maintenant jetez un œil à certains des nouveaux attributs

Si vous n'avez pas vu ce lien : Explication détaillée des éléments de formulaire HTML5

Les nouveaux attributs de formulaire HTML5 concernent principalement deux aspects : les nouveaux attributs de l'élément

Attributs du formulaire HTML5

Nouveaux attributs du formulaire :

• complétion automatique

• novalidate

Nouvel attribut de saisie :

• complétion automatique

• autofocus

• formulaire

• remplacements de formulaire (formaction, formenctype, formmethod, formnovalidate, formtarget)

• hauteur et largeur

• liste

• min, max et pas

• multiple

• motif (expression rationnelle)

• espace réservé

• obligatoire

Attribut de saisie semi-automatique

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

Remarque : la saisie semi-automatique s'applique aux balises , 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.

Lorsque l'utilisateur commence à saisir le champ de saisie semi-automatique, le navigateur doit afficher les options permettant de remplir le champ :

<form action="demo_form.asp" method="get" 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>

Remarque : dans certains navigateurs, vous devrez peut-être activer la saisie semi-automatique pour cela. propriété pour prendre effet.

Attribut autofocus

L'attribut autofocus spécifie qu'un champ prend automatiquement le focus lors du chargement de la page.

Remarque : L'attribut autofocus s'applique à tous les types de balises

User name: <input type="text" name="user_name"  autofocus="autofocus" />

Attribut de formulaire

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

Remarque : L'attribut form s'applique à tous les types de balises

L'attribut du formulaire doit faire référence à l'identifiant du formulaire auquel il appartient :

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

Remarque : Si vous devez référencer plusieurs formulaires, veuillez utiliser une liste séparée par des espaces.

Attributs de remplacement de formulaire

Les attributs de remplacement de formulaire vous permettent de remplacer certains paramètres d'attribut de l'élément de formulaire.

Les attributs de réécriture du formulaire sont :

formaction - réécrit l'attribut action du formulaire

formenctype - réécrit l'attribut enctype du formulaire

formmethod - rewrite L'attribut méthode du formulaire

formnovalidate - réécrit l'attribut novalidate du formulaire

formtarget - réécrit l'attribut cible du formulaire

Remarque : L'attribut de réécriture du formulaire est applicable aux types de balises suivants : soumettre et image.

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

Remarque : Ces propriétés sont utiles pour créer différents boutons de soumission.

attributs de hauteur et de largeur

attributs de hauteur et de largeur spécifient la hauteur et la largeur de l'image utilisées pour les balises d'entrée de type image.

Remarque : les attributs de hauteur et de largeur ne sont applicables qu'aux balises

<input type="image" src="img_submit.gif" width="99" height="99" />

attribut list

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

Remarque : L'attribut list s'applique aux types de balises suivants : texte, recherche, URL, téléphone, e-mail, sélecteurs de date, nombre, plage et couleur.

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

Attributs min, max et step

Les attributs min, max et step sont utilisés pour spécifier des limites (contraintes) pour les types d'entrée qui contiennent des nombres ou des dates . L'attribut

max spécifie la valeur maximale autorisée pour le champ de saisie. L'attribut

min spécifie la valeur minimale autorisée pour le champ de saisie.

L'attribut step spécifie les intervalles de nombres légaux pour le champ de saisie (si step="3", les nombres légaux sont -3,0,3,6, etc.).

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

L'exemple suivant montre un champ numérique qui accepte des valeurs comprises entre 0 et 10 par pas de 3 (c'est-à-dire que les valeurs légales sont 0, 3, 6 et 9) :

Points: <input type="number" name="points" min="0" max="10" step="3" />

Attribut multiple

L'attribut multiple précise que plusieurs valeurs peuvent être sélectionnées dans le champ de saisie.

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

Select images: <input type="file" name="img" multiple="multiple" />

Attribut novalidate

L'attribut novalidate spécifie que le formulaire ou les champs de saisie ne doivent pas être validés lors de la soumission d'un formulaire.

Remarque : L'attribut novalidate s'applique à et aux types de balises suivants : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, plage et couleur.

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

attribut pattern

L'attribut pattern spécifie le modèle utilisé pour vérifier le champ de saisie.

Le modèle est une expression régulière. Vous pouvez en apprendre davantage sur les expressions régulières dans notre didacticiel JavaScript.

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

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

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

attribut d'espace réservé

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注：placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search php" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注：required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />

【相关推荐】

html的基础元素，让你零基础学习HTML

HTML和HTML5的发展历史

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!