HTML5 新的表單元素
HTML5 新的表單元素
先說(shuō)一下新增了哪些：
HTML5 有以下新的表單元素:
<datalist>
<keygen>
<output>
注意:不是所有的瀏覽器都支持HTML5 新的表單元素，但是你可以在使用它們，即使瀏覽器不支持表單屬性，仍然可以顯示為常規(guī)的表單元素。
接下來(lái)我們一個(gè)一個(gè)來(lái)介紹：
HTML5 <datalist> 元素
<datalist> 元素規(guī)定輸入域的選項(xiàng)列表。
<datalist> 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動(dòng)完成功能。當(dāng)用戶在自動(dòng)完成域中開(kāi)始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫(xiě)的選項(xiàng)：
使用 <input> 元素的列表屬性與 <datalist> 元素綁定.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> <input list="phone" name="phone"> <datalist id="phone"> <option value="huawei"> <option value="oppo"> <option value="vivo"> <option value="iphone"> <option value="sony"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 標(biāo)簽。</p> </body> </html>
HTML5 <keygen> 元素
<keygen> 元素的作用是提供一種驗(yàn)證用戶的可靠方法。
<keygen>標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。
當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰。
私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶的客戶端證書(shū)（client certificate）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo_keygen.php" method="get"> 用戶名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 不支持 keygen 標(biāo)簽。</p> </body> </html>
屬性 值 描述
autofocus disabled 使 keygen 字段在頁(yè)面加載時(shí)獲得焦點(diǎn)。
challenge challenge 如果使用，則將 keygen 的值設(shè)置為在提交時(shí)詢問(wèn)。
disabled disabled 禁用 keytag 字段。
form formname 定義該 keygen 字段所屬的一個(gè)或多個(gè)表單。
keytype rsa 定義 keytype。rsa 生成 RSA 密鑰。
name fieldname 定義 keygen 元素的唯一名稱。
name 屬性用于在提交表單時(shí)搜集字段的值。
HTML5 <output> 元素
<output> 元素用于不同類型的輸出，比如計(jì)算或腳本輸出：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> <p><strong>注意:</strong> Internet Explorer 不支持 output 標(biāo)簽。</p> </body> </html>
new : HTML5 中的新屬性。
屬性 值 描述
for element_id 定義輸出域相關(guān)的一個(gè)或多個(gè)元素。
form form_id 定義輸入字段所屬的一個(gè)或多個(gè)表單。
name name 定義對(duì)象的唯一名稱。（表單提交時(shí)使用）
