站長(zhǎng)資訊網(wǎng)新表單屬性
最完整的表單屬性可以通過查閱w3cschool-h5表單屬性獲取,這里僅針對(duì)常見屬性講解
autocomplete(自動(dòng)完成)
能夠記錄用戶的輸入,并且給予提示,這就是
autocomplete的作用
-
取值:
-
on:開啟
-
off:關(guān)閉
-
適用情況:
-
一般用在input標(biāo)簽中
-
示例代碼:
<!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>
-
使用注意:
-
標(biāo)簽需要添加
name屬性 -
只有提交了一次以后才會(huì)出現(xiàn)提示
autofocus(獲取焦點(diǎn))
當(dāng)某一頁(yè)有很多個(gè)可供輸入的元素時(shí),用戶需要使用鼠標(biāo)點(diǎn)選元素進(jìn)行輸入,為了提升用戶體驗(yàn),我們可以通過
autofocus屬性來(lái)指定頁(yè)面中默認(rèn)選中的元素
-
使用方法:
-
需要哪個(gè)
表單元素獲得焦點(diǎn),只需要添加該屬性即可 -
不需要賦值,只需要添加屬性即可,見示例代碼
-
示例代碼:
<!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>
-
使用注意:
-
在沒有該屬性之前,能夠使用
JavaScript來(lái)指定元素 -
如果頁(yè)面中多個(gè)元素設(shè)置了該屬性,最后一個(gè)會(huì)獲得焦點(diǎn)
form(表單關(guān)聯(lián))
當(dāng)我們想要提交數(shù)據(jù)時(shí),需要把
表單元素放到對(duì)應(yīng)的form標(biāo)簽中,這個(gè)屬性的出現(xiàn)讓表單元素的放置位置不在受到約束
-
使用方法:
-
想要某個(gè)
表單外元素跟該表單建立聯(lián)系,只需要為元素添加屬性form="表單id"設(shè)置為想要建立聯(lián)系的表單id即可 -
示例代碼
-
讓表單外輸入愛好的
input標(biāo)簽跟id為userForm表單建立聯(lián)系
<!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>
-
使用注意:
-
雖然這個(gè)屬性可以讓元素的放置位置不在成為限制,但是編碼時(shí)依舊建議,將元素放置到對(duì)應(yīng)的表單中,除了兼容性問題以外,也為了提升代碼的可讀以及可維護(hù)性
multiple(多選)
如果想要在某個(gè)
input標(biāo)簽中選擇多個(gè)值,可以使用該屬性
-
適用情況:
-
該屬性可以用在type為
file標(biāo)簽內(nèi) -
示例代碼
-
選擇多文件時(shí),需要按住
ctrl按鈕<input type="file" multiple >
placeholder(占位提示)
輸入元素內(nèi)默認(rèn)顯示一些提示信息,當(dāng)用戶輸入之后自動(dòng)消失,這種效果我們需要使用
JavaScript來(lái)實(shí)現(xiàn),知道出現(xiàn)了placeholder這個(gè)屬性
-
使用方式:
-
直接為該屬性賦值想要提示的內(nèi)容即可
-
適用情況:
-
想要不通過
JavaScript來(lái)實(shí)現(xiàn)提示功能 -
示例代碼:
placeholder.png
-
顯示效果如下
<input type="text"placeholder="輸入用戶名">
新的表單元素
除了在input標(biāo)簽中增加了一些新的
type屬性以外,H5也推出了一些新的表單元素,由于瀏覽器的兼容問題,使用頻率并不廣,了解即可 w3cSchool_新表單元素
datalist
該元素規(guī)定了輸入?yún)^(qū)域的選項(xiàng)列表,可以讓用戶有一些選項(xiàng)
-
測(cè)試代碼:
-
注:測(cè)試代碼只是
body內(nèi)部的代碼
網(wǎng)址:<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="移動(dòng)">移動(dòng)</option> <option value="187xxx" label="聯(lián)通">聯(lián)通</option> <option value="135xxx" label="天翼">天翼</option> </datalist>
-
datalist:
-
id:id屬性,想要使用該
datalist的元素需要通過list=id的方式來(lái)指定 -
option:
-
value:指定具體的值
-
label:提示信息
-
注意:
-
如果input的type為
url,option中對(duì)應(yīng)的value需要使用http://開始
keygen
keygen 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。
私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate），即實(shí)現(xiàn)非對(duì)稱加密
目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)。
-
使用頻率:
低
output
屬于新的語(yǔ)義標(biāo)簽:用來(lái)放置輸出的內(nèi)容,但是不能自動(dòng)的計(jì)算結(jié)果,依舊需要通過js的方式來(lái)動(dòng)態(tài)修改結(jié)果,只是相比于其他的標(biāo)簽,
語(yǔ)義性更強(qiáng)。
-
使用頻率:
低
【相關(guān)推薦】
1. 免費(fèi)h5在線視頻教程
2. HTML5 完整版手冊(cè)
3. php.cn原創(chuàng)html5視頻教程
