3.4　新的表單元素

HTML5新增3個表單元素：datalist、keygen和output，下面分別進行說明。

3.4.1　datalist——數據列表

視頻講解

datalist元素用于為輸入框提供一個可選的列表，供用戶輸入匹配或直接選擇。如果不想從列表中選擇，也可以自行輸入內容。

datalist元素需要與option元素配合使用，每一個option選項都必須設置value屬性值。其中<datalist>標簽用于定義列表框，<option>標簽用于定義列表項。如果要把datalist提供的列表綁定到某輸入框上，還需要使用輸入框的list屬性來引用datalist元素的id。

【示例】下面示例演示了datalist元素和list屬性的配合使用。

在Chrome瀏覽器中運行，當用戶單擊輸入框之后，就會彈出一個下拉網址列表，供用戶選擇，效果如圖3.52所示。

圖3.52　datalist元素和list屬性應用

3.4.2　keygen——密鑰對生成器

視頻講解

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

作為密鑰對生成器，當提交表單時，keygen元素會生成兩個鍵：私鑰和公鑰。私鑰存儲于客戶端；公鑰被發送到服務器，公鑰可用于之后驗證用戶的客戶端證書。

目前，瀏覽器對該元素的支持不是很理想。

【示例】下面是keygen屬性的一個應用示例。

以上代碼在Chrome瀏覽器中的運行結果如圖3.53所示。在“請選擇加密強度”右側的keygen元素中可以選擇一種密鑰強度，有2048（高強度）和1024（中等強度）兩種，在Firefox瀏覽器也提供兩種選項，如圖3.54所示。

圖3.53　Chrome瀏覽器提供的密鑰等級

圖3.54　Firefox瀏覽器提供的密鑰等級

3.4.3　output——輸出結果

視頻講解

output元素用于在瀏覽器中顯示計算結果或腳本輸出，其語法如下。

    <output name="">Text</output>

【示例】下面是output元素的一個應用示例。該示例計算用戶輸入的兩個數字的乘積。

以上代碼在Chrome瀏覽器中的運行結果如圖3.55和圖3.56所示。當頁面載入時，會首先提示“請輸入第1個數字”，輸入并單擊“確定”按鈕后再根據提示輸入第2個數字。再次單擊“確定”按鈕后，顯示計算結果，如圖3.57所示。

圖3.55　提示輸入第1個數字

圖3.56　提示輸入第2個數字

圖3.57　顯示計算結果