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　显示计算结果