HTML5 表单元素

datalist 元素

<datalist> 元素为输入控件提供预定义的选项列表。用户可以从中选择，也可以输入自己的值。它相当于为输入框添加了自动完成功能。

<!-- 输入框关联datalist -->
<input list="browsers" name="browser" placeholder="选择或输入...">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist> 

datalist 元素可以与多种输入类型配合使用，包括 text、email、url、tel 等。当用户点击输入框时，会显示建议选项，同时也可以输入自定义值。

output 元素

<output> 元素用于显示计算结果或用户操作的输出。它是一个语义化标签，明确表示这是某个计算或操作的输出值。

<form oninput="result.value = a.valueAsNumber + b.valueAsNumber">
    <input type="number" id="a" name="a" value="0"> +
    <input type="number" id="b" name="b" value="0"> =
    <output name="result" for="a b">0</output>
</form> 

for 属性指定了输出值与哪些输入元素相关联。虽然浏览器不会自动进行计算，但这个属性有助于辅助技术和搜索引擎理解元素之间的关系。

progress 元素

<progress> 元素用于显示任务的完成进度。它适用于文件上传、下载进度、数据加载等场景。

<!-- 已知最大值的进度条 -->
<progress value="70" max="100">70%</progress>

<!-- 不确定进度的进度条 -->
<progress>加载中...</progress> 

• value - 当前进度值
• max - 最大值，默认为 1
• 如果不设置 value 属性，进度条会显示为不确定状态（通常是一个动画），表示任务正在进行但进度未知

meter 元素

<meter> 元素用于显示已知范围内的标量测量值。与 progress 不同，meter 用于显示静态的度量值，如磁盘使用量、评分、湿度等。

<!-- 基本用法 -->
<meter value="0.6">60%</meter>

<!-- 指定范围 -->
<meter min="0" max="100" value="75">75/100</meter>

<!-- 带阈值的用法 -->
<meter value="50" low="30" high="70" optimum="50"></meter> 

meter 元素的属性：

• value - 当前值（必需）
• min - 范围最小值，默认为 0
• max - 范围最大值，默认为 1
• low - "低"阈值，低于此值被视为低值
• high - "高"阈值，高于此值被视为高值
• optimum - "最佳"值，表示最优的范围

完整示例

下面是这些表单元素的综合示例：