Propriétés du formulaire HTML5


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

<form>Nouveaux attributs :

  • saisie semi-automatique

  • novalidate

<input> Nouvel attribut :

  • complétion automatique

  • autofocus

  • formulaire

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • hauteur et largeur

  • liste

  • min et max

  • multiples

  • modèle (expression rationnelle)

  • espace réservé

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

Instance

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

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

<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form的 autocomplete属性为  "on"（开），但是e-mail自动为“off”（关）。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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

<form> attribut novalidate

Un attribut booléen de l'attribut novalidate

L'attribut novalidate spécifie que le formulaire ou les champs de saisie ne doivent pas être validés lorsque. soumettre le formulaire.

Instance

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

<form action="demo-form.php" 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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


<input> attribut autofocus

L'attribut autofocus est un attribut booléen

L'attribut autofocus spécifie que lorsque la page est chargée, le le champ obtient automatiquement le focus.

Instance

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

<form action="demo-form.php">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


<input> attribut de formulaire

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

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


Instance

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

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

<p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1">

<p><b>注意:</b> IE不支持form属性</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

<input> >L'attribut formaction est utilisé pour décrire l'adresse URL pour la soumission du formulaire.

L'attribut formaction remplacera l'attribut action dans l'élément <form>.

Remarque :

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

Instance

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

<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>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formaction 属性。</p>

</body>
</html>

Exécuter l'instance»
Cliquez sur le bouton « Exécuter » Exemple » pour afficher des exemples en ligne


<input> attribut formenctype

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

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

Principalement :

Cet attribut est utilisé avec type="submit" et type="image".

Instance

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

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

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formenctype 属性。</p>

</body>
</html>

Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


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

Instance

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

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

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formmethod 属性。</p>

</body>
</html>

Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Attribut <input> formnovalidate

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

novalidate décrit que l'élément <input> être vérifié 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<. 🎜>Instance

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

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

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本,或Safari不支持input标签的 formnovalidate 属性。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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

Instance

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

<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="正常提交">
  <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formtarget 属性。</p>

</body>
</html>


Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne


<input>

Les attributs

height et width spécifient la hauteur et la largeur de l'image utilisées pour les balises <input>

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

Conseil : Les images spécifient souvent des attributs de hauteur et de largeur. Si l'image définit la hauteur et la largeur, l'espace requis par l'image Sera conservé lors du chargement de la page. Sans ces propriétés, Le navigateur ne connaît pas la taille de l'image et ne peut pas la réserver Espace approprié. L'image modifiera l'effet de mise en page pendant le processus de chargement (Bien que l'image soit chargée).

Instance

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

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>


</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


<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

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

<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


<input> attributs min et max

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.

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

Instance

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

<form action="demo-form.php">

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

<p><strong>注意:</strong> Internet Explorer 9及更早IE版本，Firefox不支持input标签的  max 和 min 属性。</p>
<p><strong>注意:</strong>
在Internet Explorer 10中max 和 min属性不支持输入日期和时间，IE 10 不支持这些输入类型。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


<input> attribut multiple

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

multiple spécifie que plusieurs 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

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

<form action="demo-form.php">
  选择图片: <input type="file" name="img" multiple>
  <input type="submit">
</form>

<p>尝试选取一张或者多种图片。</p>

<p><strong>注意:</strong>  Internet Explorer 9及更早IE版本不支持input标签的 multiple 属性。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Attribut de motif <input>

L'attribut pattern décrit une expression régulière utilisée pour valider 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é par l'attribut global title pour décrire le modèle

Astuce : Vous pouvez en apprendre davantage sur les expressions régulières dans notre tutoriel JavaScript

<🎜. >Instance

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

<form action="demo-form.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

<p><strong>注意:</strong>  Internet Explorer 9及更早IE版本，或Safari不支持input标签的 pattern 属性。</p>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Attribut d'espace réservé<input>

L'attribut d'espace réservé 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 d'espace réservé s'applique aux types de balises <input> suivants : texte, recherche, URL, téléphone, e-mail et mot de passe.

Instance

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

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

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 placeholder 属性。</p>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


<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 vide).

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 déposer.

Instance

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

<form action="demo-form.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本，或Safari不支持input标签的 required 属性。</p>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


<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 créent une valeur de plage.

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

Instance

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

<form action="demo-form.php">
  <input type="number" name="points" step="3">
  <input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本，或Firefox不支持input标签的 step 属性。</p>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Balise HTML5 <input>

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