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五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 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
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
JavaScript中的this机制
2016/01/30 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
JS实现图片切换特效
2019/12/23 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
python去掉行尾的换行符方法
2017/01/04 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Python实现区域填充的示例代码
2021/02/03 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
init进程的作用
2012/04/12 面试题
医药工作者的求职信范文
2013/09/21 职场文书
快递业务员岗位职责
2014/01/06 职场文书
教师年终个人总结
2015/02/11 职场文书
导游词400字
2015/02/13 职场文书
MySQL Router的安装部署
2021/04/24 MySQL