Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der neuen HTML5-Formularattribute
Die vollständigsten Formularattribute können durch Abfrage der Formularattribute w3cschool-h5 erhalten werden. Hier erklären wir nur die allgemeinen Attribute
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>
Verwendungshinweis:
-Tag muss das name
-Attribut
hinzugefügt werden. Die Eingabeaufforderung wird nur nach einmaligem Absenden angezeigt
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
autofocus
Attribut 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>
Nutzungshinweis:
Bevor dieses Attribut verfügbar war, konnten Sie <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a>
Element angeben <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a>
Wenn wir Daten übermitteln möchten, müssen wirin das entsprechende
表单元素
-Tag einfügen. Das Erscheinen dieses Attributs verhindert die Platzierung vonform
von der Einschränkung durch表单元素
Anwendung:
-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
-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>
Nutzungshinweise:
Wenn Sie mehrere Werte in einem-Tag auswählen möchten, können Sie dieses Attribut
input
<a ist href="http://www.php.cn/wiki/1313.html" target="_blank">file<li> </li></a>
tag<a href="http://www.php.cn/wiki/1313.html" target="_blank">file</a>
erscheint
JavaScript
placeholder
JavaScript
Platzhalter.png
显示效果如下
<input type="text"placeholder="输入用户名">
除了在input标签中增加了一些新的
type
属性以外,H5
也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素
该元素规定了输入区域的选项列表,可以让用户有一些选项
测试代码:
注:测试代码只是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 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate),即实现非对称加密
目前,浏览器对此元素的糟糕的支持度不足以
使其成为一种有用的安全标准。
使用频率:低
属于新的语义标签:用来放置输出的内容,但是不能自动的计算结果,依旧需要通过js的方式来动态修改结果,只是相比于其他的标签,
语义性更强
。
使用频率:低
【相关推荐】
1. 免费h5在线视频教程
2. 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!