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组成的表单.在实际中, ...
随机推荐
- 201871010131-张兴盼《面向对象程序设计(java)》第十一周学习总结
项目 内容 <面向对象程序设计(java)> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...
- 多线程中fork与mutex
在多线程程序中fork出一个新进程,发现新的进程无法正常工作.因为:在使用fork时会将原来进程中的所有内存数据复制一份保存在子进程中.但是在拷贝的时候,但是线程是无法被拷贝的.如果在原来线程中加了锁 ...
- Mysql8.0中caching_sha2_password报错解决
https://blog.csdn.net/litte_frog/article/details/80874105
- java实体 和 xml相互转换
参考: https://blog.csdn.net/LookForDream_/article/details/88884316 https://zhuchengzzcc.iteye.com/blog ...
- 学习-angular 7入门
1.安装脚手架:npm install -g @angular/cli 安装之后,输入命令 ng v: Package Version -------------------------------- ...
- Spring 中的异常处理
工作中遇到这样的同事,问他活干完吗,他说开发好了,结果测试时发现各种异常情况未处理,联调测试时各种未知错误,最后联调完成比他预期的两倍工作量还多.这样的开发如果是新人还可以原谅,如果有工作经验且出现多 ...
- [LeetCode] 141. Linked List Cycle 单链表中的环
Given a linked list, determine if it has a cycle in it. To represent a cycle in the given linked lis ...
- java的GUI之SWT框架 配置开发环境(包含但不限于WindowBuilder完整教程,解决Unknown GUI toolkit报错,解决导入SWT包错误)
官网(资料挺多的,API文档截图以及示例都有):https://www.eclipse.org/swt/ 克隆官方仓库 git clone --depth=1 git://git.eclipse.or ...
- 【递归】执行过程探究(c)
c语言 递归的执行过程探究 引用<c primer plus>第五版 9.3.1 递归的使用 /* recur.c -- recursion illustration */ #includ ...
- 区间DP(超详细!!!)
一.问题 给定长为n的序列a[i],每次可以将连续一段回文序列消去,消去后左右两边会接到一起,求最少消几次能消完整个序列,n≤500. f[i][j]表示消去区间[i,j]需要的最少次数. 则; 若a ...