HTML5引入了一些新的表单元素和属性,以增强表单的功能和用户体验。以下是一些常见的HTML5表单元素:

1. <datalist> 元素:
   - 用于定义一个选项列表,供用户从中选择。
   <input list="browsers" name="browser" />
   <datalist id="browsers">
     <option value="Chrome">
     <option value="Firefox">
     <option value="Safari">
     <option value="Edge">
     <option value="Opera">
   </datalist>

2. <output> 元素:
   - 用于显示计算结果或用户操作的输出。
   <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
     <input type="range" id="a" value="50">+
     <input type="number" id="b" value="50">
     =<output name="result" for="a b">100</output>
   </form>

3. <keygen> 元素:
   - 已被废弃,用于生成密钥对,常用于表单中的安全目的。
   <form>
     <keygen name="name">
   </form>

4. <progress> 元素:
   - 用于显示任务的完成进度。
   <progress value="50" max="100"></progress>

5. <meter> 元素:
   - 用于度量已知范围内的数值。
   <meter value="6" min="0" max="10">6 out of 10</meter>

6. <details> 和 <summary> 元素:
   - <details> 定义了一个可展开的详细内容区域,而 <summary> 用于定义标题。
   <details>
     <summary>更多信息</summary>
     <p>这里是详细内容。</p>
   </details>

这些元素和属性有助于更灵活地创建交互性更强、用户友好的表单。请注意,一些元素可能在一些浏览器中的支持有所不同,因此在使用时请谨慎考虑兼容性。


转载请注明出处:http://www.zyzy.cn/article/detail/3676/HTML5