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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/102560266

HTML5有一些新的表单元素:<datalist>、<keygen>、<output>。不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性,仍然可以显示为常规的表单元素。

1 <datalist>元素

<datalist>元素规定输入域的选项列表。<datalist>属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示的填写的选项。Internet Explorer 9之前的IE版本,Safari不支持<datalist>元素。

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

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

图1 datalist元素(未输入时)

图2 datalist元素(文本输入)

2 <keygen>元素

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

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

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

图3 keygen元素

3 <output>元素

<output>元素用于不同类型的输出,比如计算或脚本输出。下面通过一道计算题来了解<output>元素标签,代码如下:

上述代码阐述了一道加法计算题,目的是将前两个<input>标签里的值相加,输出到<output>标签内。效果如图5.6所示:

图5.6 output元素

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券