HTML5新表单元素_动力节点Java学院整理


Posted in HTML / CSS onJuly 12, 2017

HTML5 新的表单元素

HTML5 有以下新的表单元素:

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

HTML5 <datalist> 元素

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

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<!DOCTYPE html>
<html>
<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新表单元素_动力节点Java学院整理

HTML5 <keygen> 元素

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

<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

<!DOCTYPE html>
<html>
<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新表单元素_动力节点Java学院整理

HTML5 <output> 元素

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

</body>
</html>

HTML5新表单元素_动力节点Java学院整理

HTML5 新表单元素

HTML5新表单元素_动力节点Java学院整理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 #HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 #HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 #HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 #HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 #HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 #HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 #HTML / CSS
You might like
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
python模块之time模块(实例讲解)
2017/09/13 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python中的元组介绍
2019/01/28 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Jupyter加载文件的实现方法
2020/04/14 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
linux下进程间通信的方式
2014/12/23 面试题
毕业生文员求职信
2013/11/03 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
办公设备采购方案
2014/03/16 职场文书
抗震救灾标语
2014/06/26 职场文书
旅游活动总结
2014/08/27 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书