Explication détaillée des nouveaux attributs du formulaire HTML5
Nouveau formulaireAttributs
.Les attributs du formulaire les plus complets peuvent être obtenus en consultant les attributs du formulaire w3cschool-h5. Ici, nous expliquons uniquement les attributs communs
autocomplete (complétion automatique)
peut enregistrer la saisie de l'utilisateur et donner des invites. C'est le rôle de
autocomplete
<.> Valeurs :
- on : on
- off : off
Applicabilité :
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" >
<input type="text" autocomplete="on" name="userName">
<input type="submit">
</form>
</body>
</html>Remarque d'utilisation :
La balise- doit ajouter l'attribut
name - L'invite n'apparaîtra qu'après avoir soumis une seule fois
Lorsqu'une page comporte de nombreux éléments à saisir, l'utilisateur doit utiliser la souris pour cliquer sur les éléments à saisir afin d'améliorer l'expérience utilisateur. , nous pouvons utiliserAttribut pour spécifier l'élément sélectionné par défaut dans la page
autofocus
Utilisation :
- Obligatoire Lequel
obtient le focus, ajoutez simplement l'attribut
表单元素 - n'a pas besoin d'être attribué, ajoutez simplement l'attribut, voir l'exemple de code
Exemple de code :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" > 姓名:<input type="text" name="userName"> <br/> 年龄<input type="number" name="telNum" autofocus> <input type="submit"> </form> </body> </html>
Copier après la connexionRemarque d'utilisation :
- Avant que cet attribut ne soit disponible, vous pouviez utiliser
<a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript<p>Spécifier l'élément<a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a> - Si plusieurs éléments de la page ont cet attribut défini, le dernier obtiendra le focus
Lorsque nous voulons soumettre des données, nous devons mettredans la balise
表单元素correspondante. L'apparition de cet attribut empêche le placement deform. d'être contraint par表单元素
Comment utiliser :
- Vous souhaitez qu'un certain
élément suive
表单外Pour établir une connexion, il vous suffit d'ajouter des attributs à l'élément该表单et de le définir sur leform="表单id"avec lequel vous souhaitez établir une connexion表单id - Exemple de code
- Laissez le tag
de votre hobby être saisi en dehors du formulaire pour établir une relation avec le formulaire avec le identifiant
inputuserForm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="userForm" >
姓名:<input type="text" name="userName">
<br/>
年龄:<input type="number" name="telNum" autofocus>
<br/>
<input type="submit">
</form>
<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>Notes d'utilisation :
- Bien que cet attribut puisse limiter le placement des éléments, il est tout de même recommandé lors du codage de placer l'élément dans le formulaire correspondant, en plus des problèmes de compatibilité, c'est aussi pour améliorer la lisibilité et la maintenabilité du code
Si vous souhaitez sélectionner plusieurs valeurs dans une balise, vous pouvez utiliser cet attribut
input
Situations applicables :
- Cet attribut peut être utilisé lorsque le type est
<a href ="http://www.php.cn/wiki/1313.html" target="_blank">file<p>tag<a href="http://www.php.cn/wiki/1313.html" target="_blank">file</a> - Exemple de code
L'élément d'entrée affiche des informations d'invite par défaut lorsque l'utilisateur disparaîtra automatiquement après la saisie. Nous devons utiliserpour obtenir cet effet jusqu'à ce que. l'attribut
JavaScriptapparaîtplaceholder
Utilisation :
- Attribuez simplement le contenu que vous avez. souhaitez demander directement à cet attribut
Situations applicables :
- Si vous souhaitez implémentez la fonction d'invite sans utiliser
JavaScript Exemple de code :
placeholder.png
显示效果如下
<input type="text"placeholder="输入用户名">
新的表单元素
除了在input标签中增加了一些新的
type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素
datalist
该元素规定了输入区域的选项列表,可以让用户有一些选项
测试代码:
注:测试代码只是
body内部的代码
网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn"/>
<option label="Google" value="http://www.google.com"/>
<option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>
电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
<option value="186xxx" label="移动">移动</option>
<option value="187xxx" label="联通">联通</option>
<option value="135xxx" label="天翼">天翼</option>
</datalist>datalist:
id:id属性,想要使用该
datalist的元素需要通过list=id的方式来指定option:
value:指定具体的值
label:提示信息
注意:
如果input的type为
url,option中对应的value需要使用http://开始
keygen
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
使用频率:
低
output
属于新的语义标签:用来放置输出的内容,但是不能自动的计算结果,依旧需要通过js的方式来动态修改结果,只是相比于其他的标签,
语义性更强。
使用频率:
低
【相关推荐】
1. 免费h5在线视频教程
2. 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
