Explication détaillée des nouveaux attributs du formulaire HTML5-Tutoriel H5-php.cn

Explication détaillée des nouveaux attributs du formulaire HTML5

零下一度

Libérer： 2017-05-06 11:52:00

original

1742 Les gens l'ont consulté

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

est généralement utilisé dans la
balise d'entrée

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>

Copier après la connexion

Remarque d'utilisation :
La balise

doit ajouter l'attribut
name
L'invite n'apparaîtra qu'après avoir soumis une seule fois

autofocus (get focus)

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 utiliser
Attribut pour spécifier l'élément sélectionné par défaut dans la pageautofocus

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 connexion

Remarque 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

formulaire (association de formulaire)

Lorsque nous voulons soumettre des données, nous devons mettre
dans la balise 表单元素 correspondante. L'apparition de cet attribut empêche le placement de form. 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 le form="表单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>

Copier après la connexion

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

multiple (sélection multiple)

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

Lors de la sélection de plusieurs fichiers, vous devez appuyer et maintenir le bouton
ctrl
```
<input type="file" multiple >
```
Copier après la connexion

espace réservé (invite d'espace réservé)

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 utiliser
pour obtenir cet effet jusqu'à ce que. l'attribut JavaScript apparaît placeholder

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="输入用户名">

Copier après la connexion

新的表单元素

除了在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>

Copier après la connexion

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），即实现非对称加密
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。