IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

 

HTML5有一些新的表单元素：

 

1 

列表是通过datalist内的option元素创建的，如需把datalist绑定到输入域，请用输入域的list属性引用datalist的id。我们通过一个实例来了解

使用datalist的要点，需要为使用此list内容的input项增加list属性，list属性的值为datalist的id；option选项必须有value属性；lable属性的内容也会显示出来，给当前的选线起提示作用。我们可以在文本框内点击下拉时展开所有选项，也可以通过输入选项内容展示符合的内容。效果如图1和图2：

图1  datalist元素（未输入时）

 

图2  datalist元素（文本输入）

 

2  元素

元素的作用是提供一种验证用户的的可靠方法。元素规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，另一个是公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器，公钥可用于之后验证用户的客户端证书（client cerficate）。

这里我们通过一个form表单，讲解的使用方法，最后通过表单提交到服务器，服务器可以获取到加密后的内容。代码如下：

上述代码展示了一个加密的表单展示，点击提交后，表单的数据和公钥都会提交到服务器，如图3所示：

图3  keygen元素

 

3 

元素

元素用于不同类型的输出，比如计算或脚本输出。下面通过一道计算题来了解

元素标签，代码如下：

上述代码阐述了一道加法计算题，目的是将前两个标签里的值相加，输出到

标签内。效果如图5.6所示：

图5.6  output元素