html5中新增的form元素_html新增的form元素-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41511151/article/details/98623431

本文详细介绍了HTML5中新增的三个表单元素：datalist、keygen和output。datalist元素允许为输入框提供预设选项列表，增强用户体验；keygen元素用于生成公私钥对，提高表单提交的安全性，但因浏览器支持度问题不推荐使用；output元素用于显示计算结果，但在某些浏览器中不受支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、datalist元素

datalist标签规定了 input元素可能的选项列表。
datalist> 签被用来在为 input 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
请使用 input元素的 list 属性来绑定元素。

<input type="text" list="countries" />
    <datalist id="countries">
        <option value="中国"></option>
        <option value="美国"></option>
        <option value="日本"></option>
    </datalist>

运行结果如图所示：
在这里插入图片描述

2、keygen元素

keygen元素是密匙对生成器（key-pair generator）,能够使用户验证更为可靠。用户提交表单时会生成两个键，一个是私匙（private key），另一个是公匙（public key），其中私匙会被存储在客户端，而公匙则会被发送到服务器。公匙可用于验证用户的客户算证书（client certificate）。
注：该标签在新的 Web 标准中已废弃。
下面的代码，我只在火狐中运行成功了，虽然官网说的主流还有像谷歌浏览器还支持，但是加载不出来。所以这个标签不推荐使用

<form action="testform.php" method="get">
        请输入用户名：<input type="text" name="username"><br>
        请选择加密强度: <keygen name="security"><br>
        <input type="submit" value="提交">
    </form>

运行效果如图所示：（火狐）在这里插入图片描述

3、output元素

output 标签作为计算结果输出显示(比如执行脚本的输出)。
此标签IE不支持，所以还是慎用吧!!!

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

在这里插入图片描述