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 14 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
HTML中的表单元素介绍
Feb 28 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
咖啡与水的关系
2021/03/03 冲泡冲煮
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php数组键名技巧小结
2015/02/17 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php商品对比功能代码分享
2015/09/24 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
《天游峰的扫路人》教学反思
2014/04/25 职场文书
好听的队名和口号
2014/06/09 职场文书
毕业大学生自荐信
2014/06/17 职场文书
升学宴家长答谢词
2015/09/29 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书