HTML5 的新的表單元素(datalist/keygen/output)使用介紹
發(fā)布時(shí)間：2013-07-19 15:36:05 作者：佚名 
我要評(píng)論
我要評(píng)論HTML5 擁有若干涉及表單的元素和屬性，下面為大家介紹下新的表單元素datalist 元素、keygen 元素、output 元素以及它們的使用實(shí)例，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
HTML5 擁有若干涉及表單的元素和屬性。
本章介紹以下新的表單元素：
•datalist
•keygen
•output
瀏覽器支持
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| datalist | No | No | 9.5 | No | No |
| keygen | No | No | 10.5 | 3.0 | No |
| output | No | No | 9.5 | No | No |
datalist 元素
datalist 元素規(guī)定輸入域的選項(xiàng)列表。
列表是通過(guò) datalist 內(nèi)的 option 元素創(chuàng)建的。
如需把 datalist 綁定到輸入域，請(qǐng)用輸入域的 list 屬性引用 datalist 的 id：
實(shí)例
復(fù)制代碼
代碼如下:Webpage: <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>
親自試一試
提示：option 元素永遠(yuǎn)都要設(shè)置 value 屬性。
keygen 元素
keygen 元素的作用是提供一種驗(yàn)證用戶的可靠方法。
keygen 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。
私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書(shū)（client certificate）。
目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)。
實(shí)例
復(fù)制代碼
代碼如下:<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
親自試一試
output 元素
output 元素用于不同類(lèi)型的輸出，比如計(jì)算或腳本輸出：
實(shí)例
復(fù)制代碼
代碼如下:<output id="result" onforminput="resCalc()"></output>
相關(guān)文章
- 本文主要對(duì)HTML5表單新增屬性進(jìn)行詳細(xì)介紹，并附上實(shí)例解析，簡(jiǎn)單易懂。需要的朋友一起來(lái)看下吧2016-12-21
- 下面小編就為大家?guī)?lái)一篇HTML Form表單元素全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-26
- 下面小編就為大家?guī)?lái)一篇html5表單及新增的改良元素詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-07
- 這篇文章主要為大家介紹了HTML5新增的表單元素和屬性,具有一定的參考價(jià)值！需要的朋友可以參考下2014-07-07
HTML5之HTML元素?cái)U(kuò)展(下)—增強(qiáng)的Form表單元素值得關(guān)注
在HTML5增強(qiáng)的元素中，最值得關(guān)注的就是表單元素;在HTML5中，表單已經(jīng)做了重大的修整，一些以前需要通過(guò)JavaScript編碼實(shí)現(xiàn)的功能現(xiàn)在無(wú)需編碼就可輕松實(shí)現(xiàn),感興趣的朋友可2013-01-31- 點(diǎn)擊這里返回網(wǎng)頁(yè)教學(xué)網(wǎng) HTML教程 欄目． 上文：標(biāo)記語(yǔ)言——引用 原文出處 chapter 5 表單 互動(dòng)性一直是互聯(lián)網(wǎng)的重點(diǎn),讓使用者與網(wǎng)站能夠交換信息2008-10-17
- 本教程介紹FORM表單標(biāo)記的各種屬性在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用. <FORM>標(biāo)記的NAME屬性 基本語(yǔ)法 01 <Form name="Form＿name"> 02 ……2008-10-17
- 假設(shè)現(xiàn)在要在表單中添加這樣一項(xiàng)內(nèi)容：瀏覽所在的城市。這里不說(shuō)全國(guó)的城市，只說(shuō)省會(huì)以上的城市就有幾十個(gè)。如果以上面講過(guò)的單選按鈕的形式，將這些城市全部羅列在網(wǎng)頁(yè)上2008-10-17
- 帶有圖片預(yù)覽功能的上傳表單，完整的HTML代碼如下所示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=2008-10-17
XHTML入門(mén)學(xué)習(xí)教程:表單標(biāo)簽
表單是用戶提交信息的重要渠道。本節(jié)就將介紹表單的基礎(chǔ)知識(shí)。 表單標(biāo)簽<form> 表單以一個(gè)<form>標(biāo)簽開(kāi)始。用戶注冊(cè)網(wǎng)站會(huì)員，投票等等都需要表單來(lái)實(shí)現(xiàn)2008-10-17