HTML5 表单元素

除了 <input>，HTML5 还新增了几个表单专用元素：datalist 提供联想选项、output 显示计算结果、meter 与 progress 展示度量/进度。学习它们能让表单交互更完整。

datalist：输入联想

datalist 定义一组可选值，通过 input 的 list 属性关联（值必须等于 datalist 的 id）。用户可以从中点选，也可以自由输入。

<input list="browsers" placeholder="请选择或输入浏览器">
<datalist id="browsers">
    <option value="Chrome"></option>
    <option value="Firefox"></option>
    <option value="Edge"></option>
</datalist>

在浏览器中显示为：输入框聚焦或输入时，弹出包含 Chrome/Firefox/Edge 的候选列表。

output：显示计算结果

output 表示一段计算结果，通常配合 JS 更新，for 属性可指明它由哪些控件计算而来（用于无障碍）。

<form oninput="r.value = parseInt(a.value) + parseInt(b.value)">
    <input type="range" id="a" value="30"> +
    <input type="number" id="b" value="10"> =
    <output name="r" for="a b">40</output>
</form>

在浏览器中显示为：拖动滑块或改数字时，= 后面的结果实时刷新。form 上的 oninput 每变化一次就重算一次。

meter 与 progress：度量与进度

meter 展示已知范围的度量（如磁盘用量、评分），progress 展示任务完成进度，二者都只是可视化展示，不能交互。

电量：<meter min="0" max="100" low="20" high="80"
             optimum="90" value="65"></meter> 65%<br>
下载：<progress value="70" max="100"></progress> 70%

在浏览器中显示为：一段带颜色的电量条和一条蓝色下载进度条。meter 的 value 低于 low 或高于 high 时颜色会自动变化。

keygen 已废弃

HTML5 早期提出 <keygen>（生成公钥/私钥对用于表单提交），但已被标准废弃，主流浏览器不再支持，请勿在新项目中使用。

易错点

① datalist 的 list 属性值必须与 <datalist id> 完全一致，否则不生效；② meter 只适合"已知范围"场景，不确定总量用 progress；③ output 本身不参与表单提交，想要结果传后端请额外放隐藏 input；④ 这些元素老浏览器可能不识别，重要功能要加降级方案。

小结：datalist 负责联想输入、output 展示计算结果、meter/progress 做可视化度量，它们共同把原生表单变得更强。