HTML 表单元素
本章节主要讲解 HTML5 中追加的新的表单元素与用法。
<datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。通过 <datalist> 设置预定义值的 <input> 元素:
<!DOCTYPE html><html><body><form action="/example/html5/html_form.aspx"><input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><input type="submit"></form><p><b>注释:</b>Safari 或 IE9(以及更早的版本)不支持 datalist 标签。</p></body></html>
<output> 元素
<output> 标签是 HTML5 新增标签,是使用来定义不同类型的输出(比如:脚本的输出)。
执行计算然后在 <output> 元素中显示结果:
<!DOCTYPE html><html><body><form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output></form><p><b>注释:</b>Internet Explorer 不支持 <output> 标签。</p></body></html>
<keygen> 标签
<keygen> 元素用于 HTML 表单与其他的所需信息一起构造一个证书请求,该处理的结果将是一个带有签名的证书。
带有 keygen 字段的表单:
<!DOCTYPE HTML><html><body><form action="/example/html5/html_form.aspx" method="get">用户名:<input type="text" name="usr_name">加密:<keygen name="security"><input type="submit" value="提交"></form></body></html>