H5新增form控件和表单属性
第一个知识点:表单的属性及总结
第二个知识点:H5新增的表单控件和属性以及总结
第一个知识点:
我们常见的表单验证有哪些呢
text 文本框标签
password 密码框
checkbox 多选框
radio 单选框
button 按钮
submit 提交按钮

以上是我们常用的一些form属性
第二个知识点:H5新的输入型控件
(一)email:电子邮箱文本框,跟普通的没什么区别
1.当输入不是邮箱的时候,验证不通过
2.移动端键盘会有变化

(二)tel:电话号码
1.主要在移动端,一个键盘的切换

(三)url:网页的URL
输入正确的网址
(四)sear:搜索引擎
1.chrome下输入文字后,会多出一个关闭的x

(五)range:特定范围内的数值选择器
1.min、max、step(步数)
2.例子:用js来显示当前数值

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

(七)color:颜色选择器

(八)detetime显示完整日期

(九)autocomplete:是否保存用户输入值
默人为on,关闭提示选择off
(十):指定表单获取输入焦点

(十一):此项必填,不能为空
如果只写第一个输入框,第二个输入框就会弹出“请填写此字段”
(十二)parrern:正则验证 pattrn="\d{1,5}"
我设置的正则是1-5数字,如果不是就提交失败
以上是本人的总结,后期如有更新会继续完善,感谢每位朋友的到访,希望此文章能对你学习H5有所帮。
如有疑问请联系:手机(微信同步)17812718961
H5新增form控件和表单属性的更多相关文章
- html5新增表单控件和表单属性
表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...
- html5 新增表单控件和表单属性
新的输入型控件 email:电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化 tel:电话号码 一般用于手机端,是一个键盘切换 url:网页的 ...
- HTML5自学笔记[ 2 ]新增表单控件和表单属性
新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移 ...
- 如何给动态添加的form表单控件添加表单验证
最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...
- event.srcElement获得引发事件的控件(表单)
<1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- weui-switch开关控件,表单提交后如何取值
最近在学习weui这个框架,做了一些小的试验,发现weui-switch控件直接提交不能获取到表单信息,在segmentfault上发现也有人提了这个问题,有人说可以设置一个隐含标签来捕获开关的状态, ...
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- H5新增input表单、表单属性
新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...
- 10天学会phpWeChat——第八天:Form类,丰富表单提交的字段类型
通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...
随机推荐
- 12-numpy笔记-莫烦基本操作2
代码 import numpy as np A = np.arange(3,15) print('-1-') print(A) print('-2-') print(A[3]) A = np.aran ...
- javascript中的e是什么意思?
e 代表事件(event)对象,即所谓的事件驱动源,包含了许多属性和方法.下面以鼠标点击事件为例,作一个测试: (HTML) <!DOCTYPE html> <html> &l ...
- [POJ1952]BUY LOW, BUY LOWER
题目描述 Description The advice to "buy low" is half the formula to success in the bovine stoc ...
- Nginx主配置文件说明
#运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes ; #全局错误日志及PID文件 #error_log logs/error.log; ...
- Linux性能优化实战学习笔记:第三十三讲
一.上节回顾 前几节,我们一起学习了文件系统和磁盘 I/O 的工作原理,以及相应的性能分析和优化方法.接下来,我们将进入下一个重要模块—— Linux 的网络子系统. 由于网络处理的流程最复杂,跟我们 ...
- 关于Dev-C++用户所必须知道的知识
开启这几个警告选项,才能拥有GCC编译器的较为全面的报错和警告 另外,目前Dev-C早已停止更新(停滞在版本号5.1,内置的GCC为4.9版本),且使用其检测数组变量也挺麻烦的,实在不推荐使用.
- config 文件读取
在项目中我们经常要使用到config文件进行相应的配置,来使我们的项目更加灵活健壮. 最常见的就connetionStrings .appSettings这两个节点,那么我们怎么读取呢? 1.首先 我 ...
- intellij idea安装教程
1. 双击ideaIU-12.1.1.exe,点击下一步,安装目录改为d:\Program Files\JetBrains\IntelliJ IDEA,其他项都默认即可(此处更改目录方便重做系统,不用 ...
- 第02组 Alpha事后诸葛亮
目录 1. 组长博客(2分) 2. 总结思考(27分) 2.1. 设想和目标(2分) 2.2. 计划(5分) 2.3. 资源(3分) 2.4. 变更管理(4分) 2.5. 设计/实现(4分) 2.6. ...
- HTML禁用Flash文件右键
在项目中遇到一个需求,由于制作Flash的同事没有做禁用Flash文件右键功能!而Flash文件比较多,一个个改不太现实,于是要求用在网页显示的时候禁用Flash右键功能!未禁用之前! 禁用之前: 禁 ...