Nouveaux attributs de formulaire HTML

Nouveaux attributs de formulaire HTML

Les balises <form> et <input> de HTML5 ont ajouté plusieurs nouveaux attributs.

<form>Nouveaux attributs :

complétion automatique

novalidate

<input> Nouvel attribut :

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

hauteur et largeur

list

min et max

multiple

motif (expression rationnelle)

placeholder

obligatoire

étape

<form> / <input> 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 à 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 <form>, ainsi qu'aux types de balises <input> suivants : texte, recherche, URL, téléphone, e-mail, mot de passe, sélecteurs de date, plage et couleur.

<form> attribut novalidate

Un attribut booléen de l'attribut novalidate.

L'attribut novalidate est spécifié lors de la soumission le formulaire Le formulaire ou les champs de saisie ne doivent pas être validés.

<input> attribut autofocus

L'attribut autofocus est un attribut booléen

L'attribut autofocus est spécifié lorsque. la page est chargée, le domaine obtient automatiquement le focus.

<input> attribut de formulaire

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

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

<input> 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 l'élément <form>.

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

Attribut <input> formenctype

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

Attribut formenctype Remplace l'attribut enctype de l'élément form.

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

<input> attribut formmethod

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

formmethod remplace l'attribut method de l'élément <form>

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

<input> attribut formnovalidate

L'attribut novalidate est un attribut booléen

l'attribut novalidate décrit <input>. ; L'élément n'a pas besoin d'être validé lors de la soumission du formulaire.

L'attribut formnovalidate remplacera l'attribut novalidate de l'élément <form>.

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

<input> attribut formtarget

L'attribut formtarget spécifie un nom ou un mot-clé pour indiquer l'affichage après réception des données de soumission du formulaire.

L'attribut formtarget remplace l'attribut target de l'élément <form>.

Remarque : L'attribut formtarget est utilisé avec type="submit" et type="image".

Attributs de hauteur et de largeur<input>

Les attributs de hauteur et de largeur spécifient la hauteur et la largeur de l'image utilisée pour la balise <input> image.

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

Conseil : 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).

<input> attribut de liste

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.

<input> attributs min et max

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

Remarque : les attributs min, max et step s'appliquent aux types de balises <input> suivants : sélecteurs de date, nombres et plages.

<input> attribut multiple

L'attribut multiple est un attribut booléen L'attribut

multiple stipule que <input>. L'élément ; peut sélectionner plusieurs valeurs.

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

<input> attribut de motif

l'attribut pattern décrit une expression régulière utilisée pour vérifier <input> ; valeur de l'élément.

Remarque : l'attribut pattern s'applique aux types de balises <input> suivants : texte, recherche, url, tel, email et mot de passe.

Conseil : il est utilisé pour décrire le Mode d'attribut de titre global.

<input> attribut d'espace réservé

L'attribut d'espace réservé fournit une indication qui décrit la valeur attendue par le 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 <input> suivants : texte, recherche, URL, téléphone, e-mail et mot de passe.

<input> attribut obligatoire

l'attribut obligatoire est un attribut booléen

l'attribut obligatoire doit être spécifié avant la soumission. Remplissez les champs de saisie (ne peuvent pas être vides).

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

<input> attribut step

L'attribut step spécifie l'intervalle de nombre légal pour le champ de saisie.

Si step="3", les nombres légaux sont -3, 0, 3, 6, etc.

Astuce : L'attribut step peut être utilisé avec les attributs max et min pour créer une valeur de plage.

Remarque : L'attribut step est utilisé avec les types suivants : nombre, plage, date, dateheure, dateheure-locale, mois, heure et semaine.

ci-dessous Dans le cas, nous avons expliqué certains attributs couramment utilisés. Vous pouvez directement consulter le code et les commentaires à côté du code, puis comparer les résultats d'exécution du navigateur pour comprendre sa signification

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head>

<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索">
<!--
novalidate:在控件中加入了required、emial、url等验证后，如果想让这些验证失效，可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<br/><br/>
    <!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时，经常会看到在下面显示输入过的内容，
这就是html5的新特性：自动完成，如果不想使用此功能，将其设置为off即可
-->
    <input type="text" name="UserName" value="" required autocomplete="off">
   <br/><br/>
    <!--
multiple:在选择文件时，默认只能单选，加上这个属性后，则可以使用鼠标选中多个文件进行上传
   -->
    选择文件
    <input type="file" name="upload" value="" multiple="multiple">
    <br/><br/>
    <!--
list：这个属性要和datalist元素一起使用，指定此文本框的可选择项，另外其相较于select的优点在于还可以输入
   -->
    区号：
    <input type="text" name="age" value="" list="list1">
    <br/><br/>
    <datalist id="list1">
        <option value="0312">保定</option>
        <option value="0311">石家庄</option>
        <option value="010">北京</option>
        <option value="0313">唐山</option>
    </datalist>
<br/><br/>
    <!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
   -->
    <input type="submit" name="subsave" value="提交"><br/><br/>
    <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>
</html>