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学习心得分享
Aug 19 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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
网络资源
2006/10/09 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
django 按时间范围查询数据库实例代码
2018/02/11 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
外国语学院毕业生自荐信
2013/10/28 职场文书
酒店应聘自荐信
2013/11/09 职场文书
yy司仪主持词
2014/03/22 职场文书
元旦寄语大全
2014/04/10 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers