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的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
pygame学习笔记(4):声音控制
2015/04/15 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python列表list保留顺序去重的实例
2018/12/14 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
农贸市场管理制度
2014/01/31 职场文书
初中生自我鉴定
2014/02/04 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
数控机床专业自荐信
2014/05/19 职场文书
党员转正申请报告
2015/05/15 职场文书
消防演习感想
2015/08/10 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技