HTML5新增form控件和表单属性实例代码详解


Posted in HTML / CSS onMay 15, 2019

第一个知识点:表单的属性及总结

第二个知识点:H5新增的表单控件和属性以及总结

第一个知识点:

我们常见的表单验证有哪些呢

text

文本框标签

password 密码框

checkbox 多选框

radio

单选框

button

按钮

submit

提交按钮

HTML5新增form控件和表单属性实例代码详解

以上是我们常用的一些form属性

第二个知识点:H5新的输入型控件

(一)email:电子邮箱文本框,跟普通的没什么区别

1.当输入不是邮箱的时候,验证不通过

2.移动端键盘会有变化

HTML5新增form控件和表单属性实例代码详解

(二)tel:电话号码

1.主要在移动端,一个键盘的切换

HTML5新增form控件和表单属性实例代码详解

(三)url:网页的URL

HTML5新增form控件和表单属性实例代码详解

输入正确的网址

(四)sear:搜索引擎

1.chrome下输入文字后,会多出一个关闭的x

HTML5新增form控件和表单属性实例代码详解

(五)range:特定范围内的数值选择器

1.min、max、step(步数)

2.例子:用js来显示当前数值

HTML5新增form控件和表单属性实例代码详解

(六)number:只能包含数字的输入框

HTML5新增form控件和表单属性实例代码详解

(七)color:颜色选择器

HTML5新增form控件和表单属性实例代码详解

(八)detetime显示完整日期

HTML5新增form控件和表单属性实例代码详解

(九)autocomplete:是否保存用户输入值

默人为on,关闭提示选择off

(十):指定表单获取输入焦点

HTML5新增form控件和表单属性实例代码详解

(十一):此项必填,不能为空

HTML5新增form控件和表单属性实例代码详解

如果只写第一个输入框,第二个输入框就会弹出“请填写此字段”

(十二)parrern:正则验证 pattrn="\d{1,5}"

HTML5新增form控件和表单属性实例代码详解

我设置的正则是1-5数字,如果不是就提交失败

总结

以上所述是小编给大家介绍的HTML5新增form控件和表单属性实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
Html5 滚动穿透的方法
May 13 #HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 #HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 #HTML / CSS
基于Html5实现的语音搜索功能
May 13 #HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 #HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 #HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 #HTML / CSS
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
php实现简单的上传进度条
2015/11/17 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JavaScript使用cookie
2007/02/02 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
range 标准化之获取
2011/08/28 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
loading动画特效小结
2017/01/22 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
对python模块中多个类的用法详解
2019/01/10 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
经典c++面试题三
2015/07/08 面试题
编辑求职信样本
2013/12/16 职场文书
士力架广告词
2014/03/20 职场文书
大学专科自荐信
2014/06/17 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书