HTML 表单元素

本章节主要讲解 HTML5 中追加的新的表单元素与用法。

<datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。通过 <datalist> 设置预定义值的 <input> 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <form action="/example/html5/html_form.aspx">
  5. <input list="browsers" name="browser">
  6. <datalist id="browsers">
  7. <option value="Internet Explorer">
  8. <option value="Firefox">
  9. <option value="Chrome">
  10. <option value="Opera">
  11. <option value="Safari">
  12. </datalist>
  13. <input type="submit">
  14. </form>
  15. <p><b>注释:</b>Safari 或 IE9(以及更早的版本)不支持 datalist 标签。</p>
  16. </body>
  17. </html>

<output> 元素

<output> 标签是 HTML5 新增标签,是使用来定义不同类型的输出(比如:脚本的输出)。

执行计算然后在 <output> 元素中显示结果:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  5. <input type="range" id="a" value="50">100
  6. +<input type="number" id="b" value="50">
  7. =<output name="x" for="a b"></output>
  8. </form>
  9. <p><b>注释:</b>Internet Explorer 不支持 <output> 标签。</p>
  10. </body>
  11. </html>

<keygen> 标签

<keygen> 元素用于 HTML 表单与其他的所需信息一起构造一个证书请求,该处理的结果将是一个带有签名的证书。

带有 keygen 字段的表单:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <form action="/example/html5/html_form.aspx" method="get">
  5. 用户名:<input type="text" name="usr_name">
  6. 加密:<keygen name="security">
  7. <input type="submit" value="提交">
  8. </form>
  9. </body>
  10. </html>