Nouveaux attributs de formulaire HTML5

Nouveaux attributs de formulaire HTML5

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

<form> saisie semi-automatique

<input> >

complétion automatique

mise au point automatique

formulaire
< ;form> / <input> 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 <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.

Instance

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" autocomplete="on">
    姓名:<input type="text" name="fname"><br/>
    留言<input type="text" name="content"><br/>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
</form>
<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form的 autocomplete属性为  "on"（开），但是e-mail自动为“off”（关）。</p>
</body>
</html>

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.

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" novalidate>
    E-mail: <input type="email" name="user_email">
    <input type="submit">
</form>
<p><strong>注意</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>
</body>
</html>

Exécutez le programme pour l'essayer

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    姓名: <input type="text" name="fname" ><br>
    留言: <input type="text" name="content" autofocus><br>
    <input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>
</body>
</html>

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

<input> ; 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) :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" id="form1">
    姓名: <input type="text" name="fname"><br>
    <input type="submit" value="Submit">
</form>
<p> "留言" 字段没有在form表单之内，但它也是form表单的一部分。</p>
留言: <input type="text" name="lname" form="form1">
</body>
</html>

Exécutez le programme et essayez-le

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

<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 le <form>.

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 :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo.php">
    姓名: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formaction="admin.php" value="提交">
</form>
</body>
</html>

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

< ;input> attribut formenctype

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)

L'attribut formenctype remplace 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 :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="post">
    name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
</body>
</html>

Exécutez le programme pour l'essayer

L'attribut

<input> formmethod

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

Instance

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>


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

</body>
</html>

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

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

novalidate décrit que l'élément <input>

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

Remarque

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

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    E-mail: <input type="email" name="userid"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>
</body>
</html>

Exécuter le programme à essayer

<input> attribut formtarget L'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 <form>

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 :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action=" ">
     作者姓名: <input type="text" name="fname"><br>
     书本名: <input type="text" name="lname"><br>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>
</body>
</html>

Exécutez le programme et essayez-le

<input> les attributs de hauteur et de largeur

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

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

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 :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="image" src="http://img3.imgtn.bdimg.com/it/u=4163745010,2599120287&fm=21&gp=0.jpg"  alt="Submit" width="100" height="80">
</form>
</body>
</html>

Exécutez le programme pour essayer it out

<input> 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<input> prédéfinie dans <datalist> :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="post">
    <input list="browsers" name="">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit">
</form>
</body>
</html>

Exécutez le programme pour l'essayer

<input> 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 <input> suivants : sélecteurs de date, nombre et plage.

Exemple

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    输入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>
    输入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02"><br>
    数量 (在1和5之间):
    <input type="number" name="quantity" min="1" max="5"><br>
    <input type="submit">
</form>
</body>
</html>

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.

<input> 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 <input> suivants : email et file. : e-mail et fichier.

Instance

Télécharger plusieurs fichiers :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    选择图片: <input type="file" name="img" multiple>
    <input type="submit">
</form>
<p>尝试选取一张或者多种图片。</p>
</body>
</html>

Exécutez le programme et essayez-le

Attribut de motif <input>

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

Remarque : L'attribut pattern s'applique aux types de balises <input> 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) :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    请输入3位字母: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
    <input type="submit">
</form>
</body>
</html>

Exécutez le programme pour l'essayer

<input> 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 <input> suivants : texte, recherche, URL, téléphone, e-mail et mot de passe.

Instance

Texte d'invite du champ de saisie :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    姓名：<input type="text" name="fname" placeholder="请输入你的姓名"><br>
    密码：<input type="text" name="lname" placeholder="请输入你的密码"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

Exécutez le programme pour l'essayer

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    姓名: <input type="text" name="usrname" required>
    <input type="submit">
</form>
</body>
</html>

Exécutez le programme et soumettez-le sans le remplir pour voir

<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 créé avec le Attributs max et min Une valeur de plage.

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

Exemple

L'étape de saisie est spécifiée comme 3 :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    <input type="number" name="points" step="3">
    <input type="submit">
</form>
</body>
</html>

Exécutez le programme et essayez-le

Remarque : Internet Explorer 9 et les versions antérieures d'IE, ou Firefox ne prennent pas en charge l'attribut step de la balise d'entrée.

Balise HTML5 <input>

标签

标签	描述
<form>	定义一个form表单
<input>	定义一个 input 域

描述

<form>

<input>

定义一个entrée 域

<🎜>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="" autocomplete="on"> 姓名:<input type="text" name="fname"><br/> 留言<input type="text" name="content"><br/> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> <p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p> <p>注意 form的 autocomplete属性为 "on"（开），但是e-mail自动为“off”（关）。</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Nouveaux attributs de formulaire HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]