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组成的表单.在实际中, ...
随机推荐
- python SSL 错误
python 使用pip 安装模块是提示SSL错误 出现该问题的原因由于系统的openssl是1.0.1的版本,对于python3.7太老了,需要更新为openssl1.0.2或者libressl2. ...
- 洛谷 P1182 数列分段 Section II
洛谷 P1182 数列分段 Section II 洛谷传送门 题目描述 对于给定的一个长度为N的正整数数列A-iA−i,现要将其分成M(M≤N)M(M≤N)段,并要求每段连续,且每段和的最大值最小. ...
- Java链接Oracle
首先在Navicat里面链接Oracle: 连接时老报错:ORA-12505, TNS:listener does not currently know of SID given in connect ...
- Jmeter压力并发测试
一.http://jmeter.apache.org/ 二.点击Download Releases选择版本下载 三.下载解压: 将解压后的文档存盘-下载logkit-2.0.jar(汉化包)放到jme ...
- python中多线程相关
基础知识 进程:进程就是一个程序在一个数据集上的一次动态执行过程 数据集:程序执行过程中需要的资源 进程控制块:完成状态保存的单元 线程:线程是寄托在进程之上,为了提高系统的并发性 线程是进程的实体 ...
- c++的CreateFile导致内存不能为written错误
LPCWSTR szFileName; szFileName=argv[2]; //LPCWSTR szFileName=L"test.txt";//文件名字可以根据自己的需要修改 ...
- python总结十一
1.python运行速度慢的原因: python不是强类型的语言,所以解释器运行时遇到变量以及数据类型转换,比较操作,引用变量时都需要检查其数据类型 python的编译器启动速度比java快,但几乎每 ...
- Eclipse:设置自动补全,提高编程效率
一.设置自动补全 1.进入eclipse的window里的perferences页面 2.找到java->Editor->Content Assist设置界面 3.在Auto activa ...
- 强大的Scala模式匹配
用过Scala的模式匹配,感觉Java的弱爆了.Scala几乎可以匹配任何数据类型,如果默认的不能满足你的要求,你可以自定义模式匹配. 介绍Scala的模式匹配前,我们先了解清楚unapply()与u ...
- 使用windows 上的远程连接来远程Linux Ubuntu系统的设置
实验环境: Windows 10 , VMware Workstation ,Ubuntu16.04 1.root登录ubuntu,然后执行下面的命令 # root账户登录ubuntu ,执行下面的命 ...