HTML5（7） 表單元素

一、HTML5 新的表單元素

HTML5 有以下新的表單元素:

• ：input标簽定義選項清單。請與 input 元素配合使用該元素，來定義 input 可能的值。
• ：标簽規定用于表單的密鑰對生成器字段。
• ：标簽定義不同類型的輸出，比如腳本的輸出。

注意:

不是所有的浏覽器都支援HTML5 新的表單元素，但是你可以在使用它們，即使浏覽器不支援表單屬性，仍然可以顯示為正常的表單元素。

二、HTML5 datalist 元素

元素規定輸入域的選項清單。

屬性規定 form 或 input 域應該擁有自動完成功能。當使用者在自動完成域中開始輸入時，浏覽器應該在該域中顯示填寫的選項：

使用 input 元素的清單屬性與 元素綁定.

input 元素使用預定義值:

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>      

嘗試一下 »

三、HTML5 keygen 元素

元素的作用是提供一種驗證使用者的可靠方法。

标簽規定用于表單的密鑰對生成器字段。

當送出表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲于用戶端，公鑰（public key）則被發送到伺服器。公鑰可用于之後驗證使用者的用戶端證書（client certificate）。

帶有keygen字段的表單:

<form action="demo_keygen.asp" method="get">
使用者名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>      

四、HTML5 output 元素

元素用于不同類型的輸出，比如計算或腳本輸出：

<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>