最完整的表單屬性可以通過查閱w3cschool-h5表單屬性獲取,這里僅針對常見屬性講解

能夠記錄用戶的輸入,并且給予提示,這就是autocomplete的作用

取值:

on:開啟

off:關閉

適用情況:

一般用在input標簽中

示例代碼:

 !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 

使用注意:

標簽需要添加name屬性

只有提交了一次以后才會出現提示

當某一頁有很多個可供輸入的元素時,用戶需要使用鼠標點選元素進行輸入,為了提升用戶體驗,我們可以通過autofocus屬性來指定頁面中默認選中的元素

使用方法:

需要哪個表單元素獲得焦點,只需要添加該屬性即可

不需要賦值,只需要添加屬性即可,見示例代碼

示例代碼:

 !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來指定元素

如果頁面中多個元素設置了該屬性,最后一個會獲得焦點

當我們想要提交數據時,需要把表單元素放到對應的form標簽中,這個屬性的出現讓表單元素的放置位置不在受到約束

使用方法:

想要某個表單外元素跟該表單建立聯系,只需要為元素添加屬性form= 表單id 設置為想要建立聯系的表單id即可

示例代碼

讓表單外輸入愛好的input標簽跟id為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 

使用注意:

雖然這個屬性可以讓元素的放置位置不在成為限制,但是編碼時依舊建議,將元素放置到對應的表單中,除了兼容性問題以外,也為了提升代碼的可讀以及可維護性

如果想要在某個input標簽中選擇多個值,可以使用該屬性

適用情況:

該屬性可以用在type為file標簽內

示例代碼

選擇多文件時,需要按住ctrl按鈕

 input type= file multiple 

輸入元素內默認顯示一些提示信息,當用戶輸入之后自動消失,這種效果我們需要使用JavaScript來實現,知道出現了placeholder這個屬性

使用方式:

直接為該屬性賦值想要提示的內容即可

適用情況:

想要不通過JavaScript來實現提示功能

示例代碼:

placeholder.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 完整版手冊

3. VeVb.com原創html5視頻教程

以上就是詳解HTML5新表單屬性的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。