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制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 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
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
python脚本监控docker容器
2016/04/27 Python
python中关于for循环的碎碎念
2017/06/30 Python
python使用fork实现守护进程的方法
2017/11/16 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
应聘美工求职信
2013/11/07 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
聘用意向书
2014/07/29 职场文书
医药销售自我评价200字
2014/09/11 职场文书
余世维讲座观后感
2015/06/11 职场文书
全民创业工作总结
2015/08/13 职场文书