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中必须要知道的10个顶级命令
Apr 26 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 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
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python实现弹窗祝福效果
2019/04/07 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python实现控制台输出彩色字体
2020/04/05 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
JBL英国官网:JBL UK
2018/07/04 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
业绩考核岗位职责
2014/02/01 职场文书
会计岗位职责模板
2014/03/12 职场文书
党课培训心得体会
2014/09/02 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
详解MySQL的半同步
2021/04/22 MySQL
Golang 正则匹配效率详解
2021/04/25 Golang
ipad隐藏软件app图标方法
2022/04/19 数码科技