当前位置 : IT培训网 > Web前端 > Web教程 > HTML5 新增加了哪些表单元素

HTML5 新增加了哪些表单元素

时间：2016-12-08 14:40:48  来源：web前端培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   html5(197)H5(64)HTML表单元素(1)
看到了吗，HTML5新增的表单元素功能还行吧，如果想要学习这方面知识，那就赶紧关注IT培训网，学习HTML5，做网页设计师，拿高薪进名企，就在今天！

HTML5的功能是非常强大的，单一个表单就新增了一些元素，使我们做表单更加方便，更加安全，那么HTML5新增了哪些表单呢？这些表单在HTML5中有什么用途呢？

HTML5 表单元素

HTML5 新的表单元素

HTML5 有以下新的表单元素:

· <datalist>

· <keygen>

· <output>

注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。

HTML5 新表单元素

标签

描述

<datalist>

<input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

<keygen>

<keygen> 标签规定用于表单的密钥对生成器字段。

<output>

<output> 标签定义不同类型的输出，比如脚本的输出。
 

HTML5 <datalist> 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

OperaSafariChromeFirefoxInternet Explorer

实例

<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>

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.itpxw.cn)</title> 

</head>

<body>

<form action="demo-form.php" method="get">

<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><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>

</body>

</html>

运行结果：

HTML5 新增加了哪些表单元素_www.itpxw.cn

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

实例

带有keygen字段的表单:

<form action="demo_keygen.asp" method="get">

用户名: <input type="text" name="usr_name">

加密: <keygen name="security">

<input type="submit">

</form>

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.itpxw.cn)</title> 

</head>

<body>

<form action="demo_keygen.php" method="get">

  用户名: <input type="text" name="usr_name">

  加密: <keygen name="security">

  <input type="submit">

</form>

<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>

</body>

</html>

运行结果：

HTML5 新增加了哪些表单元素_www.itpxw.cn

HTML5 <output> 元素

<output> 元素用于不同类型的输出，比如计算或脚本输出：

OperaSafariChromeFirefoxInternet Explorer

实例

将计算结果显示在 <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>

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.itpxw.cn)</title> 

</head>

<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><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

</body>

</html>

运行结果：

HTML5 新增加了哪些表单元素_www.itpxw.cn

看到了吗，HTML5新增的表单元素功能还行吧，如果想要学习这方面知识，那就赶紧关注IT培训网，学习HTML5，做网页设计师，拿高薪进名企，就在今天！

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频（Videos）播放