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