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