HTML5 表单元素
HTML5 新表单元素
HTML5 有如下新表单元素:
- <datalist>
- <keygen>
- <output>
|
不是所有的浏览器都支持这些元素. 然而,你可以开始使用它们了 ; 当它们不被支持时，它们会被渲染未文本域. |
|---|
HTML5 <datalist> 元素
<datalist> 元素是指<input> 元素预定义选项列表.
<datalist> 元素用于提供一个带有"自动完成"特性的<input> 元素. 用户输入内容时会看到下拉选项.
使用<input> 元素的下拉列表属性需要绑定一个<datalist> 元素一起使用.
例子
<input> 元素带有预定义值的<datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
亲自试一试 »
HTML5 <keygen> 元素
<keygen> 元素的目的是提供安全key的方式认证用户.
<keygen>标签指在表单中通过键值对生成域.
当表单提交时，会生成2个key，一个是私有的，另一个是公有的.
私有key存储在本地，公有key发送到服务器.公有key用于生成证书对用户进行身份验证.
例子
带有加密码的表单:
<form action="/html5/tryit/demo_form" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
亲自试一试 »
HTML5 <output> 元素
<output> 元素表述计算的结果(有点像执行js脚本).
例子
使用<output> 元素执行计算并显示结果:
<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>
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
亲自试一试 »
HTML5 新表单元素
| 标签 | 描述 |
|---|---|
| <datalist> | 指定<input> 元素的预定义输入选项 |
| <keygen> | 在表单中指定键值对的生成域 |
| <output> | 表示计算后的结果 |
