钟文志的部落格

Appearance

HTML5 引入了一些新的表单元素，除了前面提到的 <input> 类型外，还包括一些可以帮助开发者更有效地处理用户输入和数据的元素。以下是一些常见的 HTML5 新表单元素及其用法：

1. <datalist> ​

<datalist> 元素允许在输入字段中提供预定义的选项列表，用户可以从中选择。

html
<label for="browser">Favorite Browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

2. <output> ​

<output> 元素用于显示计算结果或脚本操作的输出。

html
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <label for="a">Number 1:</label>
    <input type="number" id="a" name="a" value="0"><br><br>

    <label for="b">Number 2:</label>
    <input type="number" id="b" name="b" value="0"><br><br>

    <output name="result" for="a b">Result:</output>
</form>

3. <meter> ​

<meter> 元素用于显示度量衡值（如磁盘空间利用率、温度等）的图形表示。

html
<label for="disk">Disk Usage:</label>
<meter id="disk" value="60" min="0" max="100">60%</meter>

4. <progress> ​

<progress> 元素用于表示任务的完成进度。

html
<label for="file">File Upload Progress:</label>
<progress id="file" value="50" max="100">50%</progress>

示例：结合使用多个新表单元素 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 New Form Elements Example</title>
</head>
<body>

<h2>HTML5 New Form Elements Example</h2>

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <label for="a">Number 1:</label>
    <input type="number" id="a" name="a" value="0"><br><br>

    <label for="b">Number 2:</label>
    <input type="number" id="b" name="b" value="0"><br><br>

    <output name="result" for="a b">Result:</output>
</form>

<br>

<label for="browser">Favorite Browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

<br><br>

<label for="disk">Disk Usage:</label>
<meter id="disk" value="60" min="0" max="100">60%</meter>

<br><br>

<label for="file">File Upload Progress:</label>
<progress id="file" value="50" max="100">50%</progress>

</body>
</html>

解释 ​

  • <datalist>：提供了一个选项列表，用户可以从中选择，与输入字段配合使用。
  • <output>：显示通过表单计算得出的结果或其他输出。
  • <meter>：显示度量衡值的图形表示，例如进度条。
  • <progress>：显示任务的完成进度，例如文件上传进度条。

总结 ​

HTML5 的新表单元素增加了在网页中收集和显示数据的灵活性和功能性。使用这些新元素，可以改善用户体验，提升交互性，并且能够更直观地展示数据和进度。