溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“HTML5新表單屬性有哪些”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“HTML5新表單屬性有哪些”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
最完整的表單屬性可以通過查閱w3cschool-h6表單屬性獲取,這里僅針對常見屬性講解
能夠記錄用戶的輸入,并且給予提示,這就是
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的方式來動態修改結果,只是相比于其他的標簽,
語義性更強。
使用頻率:低
以上是“HTML5新表單屬性有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
