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>