Detaillierte Erläuterung der neuen HTML5-Formularattribute-H5-Tutorial-php.cn

Detaillierte Erläuterung der neuen HTML5-Formularattribute

零下一度

Freigeben： 2017-05-06 11:52:00

Original

1742 Leute haben es durchsucht

Neues FormularAttribute

Die vollständigsten Formularattribute können durch Abfrage der Formularattribute w3cschool-h5 erhalten werden. Hier erklären wir nur die allgemeinen Attribute

Autocomplete (automatische Vervollständigung)

kann die Eingaben des Benutzers aufzeichnen und Eingabeaufforderungen geben. Dies ist die Rolle von autocomplete

Werte:

an: an
aus: aus

Anwendbarkeit:

wird im Allgemeinen im Eingabe-Tag

Beispielcode:

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

Nach dem Login kopieren

Verwendungshinweis:

-Tag muss das name-Attribut
hinzugefügt werden. Die Eingabeaufforderung wird nur nach einmaligem Absenden angezeigt

Autofokus (Fokus erhalten)

Wenn eine Seite viele Eingabeelemente enthält, muss der Benutzer mit der Maus auf die Eingabeelemente klicken, um das Benutzererlebnis zu verbessern , können wir autofocusAttribut verwenden, um das standardmäßig ausgewählte Element auf der Seite anzugeben

Verwendung:

Erforderlich Welches 表单元素 den Fokus erhält, fügen Sie einfach das Attribut hinzu
muss nicht zugewiesen werden, fügen Sie einfach das Attribut hinzu, siehe Beispielcode

Beispielcode:

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

Nach dem Login kopieren

Nutzungshinweis:

Bevor dieses Attribut verfügbar war, konnten Sie <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript< verwenden 🎜> Element angeben <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a>
Wenn für mehrere Elemente auf der Seite dieses Attribut festgelegt ist, erhält das letzte Element den Fokus

form (Formularzuordnung)

Wenn wir Daten übermitteln möchten, müssen wir
in das entsprechende 表单元素-Tag einfügen. Das Erscheinen dieses Attributs verhindert die Platzierung von form von der Einschränkung durch 表单元素

Anwendung:

Sie möchten, dass ein bestimmtes
-Element folgt 表单外. Um eine Verbindung herzustellen, müssen Sie nur Attribute zum Element 该表单 hinzufügen und es auf das form="表单id" setzen, mit dem Sie eine Verbindung herstellen möchten 表单id

Beispielcode

Lassen Sie den
-Tag Ihres Hobbys außerhalb des Formulars eingeben und die ID soll input festlegen eine Beziehung mit der Form userForm

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

Nach dem Login kopieren

Nutzungshinweise:

Obwohl dieses Attribut die Platzierung von Elementen einschränken kann, wird beim Codieren dennoch empfohlen, das Element im entsprechenden Formular zu platzieren. Neben Kompatibilitätsproblemen dient es auch der Verbesserung der Lesbarkeit und Wartbarkeit des Codes

multiple (Mehrfachauswahl)

Wenn Sie mehrere Werte in einem
-Tag auswählen möchten, können Sie dieses Attribut <🎜 verwenden >input

Anwendbare Situationen:

<a ist href="http://www.php.cn/wiki/1313.html" target="_blank">file<li>

<a href="http://www.php.cn/wiki/1313.html" target="_blank">file</a>

Tastectrl
```
<input type="file" multiple >
```
Nach dem Login kopieren
< gedrückt halten 🎜>

Das Eingabeelement zeigt standardmäßig einige Eingabeaufforderungsinformationen an. Es verschwindet automatisch nach der Eingabe. Wir müssen

verwenden, um diesen Effekt zu erzielen bis das Attribut

erscheint
JavaScriptplaceholder

JavaScript

Platzhalter.png

显示效果如下

<input type="text"placeholder="输入用户名">

Nach dem Login kopieren

新的表单元素

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

Nach dem Login kopieren

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 完整版手册

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der neuen HTML5-Formularattribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!