HTML5-新增表单控件

最新推荐文章于 2025-06-19 15:23:59 发布

原创最新推荐文章于 2025-06-19 15:23:59 发布 · 696 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #前端 #html5 #html #学习

本文介绍了HTML中的datalist控件用于创建预定义下拉列表，option配合使用定义选项；output控件用于定义计算结果；keygen元素用于生成密钥对。这些表单控件在提升用户体验和数据安全性方面有重要作用。

新增表单控件

datalist

概念：datalist控件为文本框提供一个预定义的下拉列表

用户在输入数据时可以在预定义的下拉列表中直接选择，也可以自行输入内容。

datalist控件要与option控件配合使用，每个option控件都必须设置其 value 属性的值。
datalist控件用于定义下拉列表,option 控件用于定义选项。
如果要把datalist控件提供的下拉列表绑定到某个文本框中，则必须将文本框的 list 属性的值设定为该datalist控件的 id

语法：

<input type="text" list="" />
    <datalist id="">
            <option label=" "value=""></option>
            <option label=" "value=""></option>
            <option label=" "value=""></option>
</datalist>

实例：

<form action="">
            <input list="list" name="list" placeholder="请输入浏览器....">
            <datalist id="list">
                <option value="IE"></option>
                <option value="Google"></option>
                <option value="Opera"></option>
                <option value="safir1"></option>
            </datalist>
        </form>

运行结果:

output

概念：output控件用于定义表单元素的输出结果或计算结果，比如计算或脚本输出

语法：

<output name="name" for="element_id"></output>

属性name的作用是规定 output 控件的名称
for 属性描述了计算中使用的控件与计算结果之间的关系。for属性的值规定一个或多个控件的 Id列表，要求以空格分隔。

实例：

  <form action="" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
          <input type="number" id="a" value="50">
          +<input type="number" id="b" value="50">
          =<output name="result" for="a b"></output>
      </form>

运行结果: