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

第二个知识点: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控件和表单属性的更多相关文章

  1. html5新增表单控件和表单属性

    表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...

  2. html5 新增表单控件和表单属性

    新的输入型控件 email:电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化         tel:电话号码 一般用于手机端,是一个键盘切换 url:网页的 ...

  3. HTML5自学笔记[ 2 ]新增表单控件和表单属性

    新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移 ...

  4. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  5. event.srcElement获得引发事件的控件(表单)

    <1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. weui-switch开关控件,表单提交后如何取值

    最近在学习weui这个框架,做了一些小的试验,发现weui-switch控件直接提交不能获取到表单信息,在segmentfault上发现也有人提了这个问题,有人说可以设置一个隐含标签来捕获开关的状态, ...

  7. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  8. H5新增input表单、表单属性

    新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...

  9. 10天学会phpWeChat——第八天:Form类,丰富表单提交的字段类型

    通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...

随机推荐

  1. 用Jetpack的Site Accelerator为网站CDN加速

    Jetpack 的Site Accelerator站点加速器(前身为 Photon,注意:“Photon”现在是站点加速器的一部分)允许 Jetpack 优化图像并通过他们的全球服务器网络CDN提供图 ...

  2. [笔记] nice-upload 与 nice-static-server

    1.request 支持流模式,管道流pipe,抓取图片并保存就很方便了 request('https://s.gravatar.com/avatar/184a1f14c759795b94ae1d01 ...

  3. shell的使用技巧

    推荐使用的远程连接软件以及vi编辑器的基本使用 简介:远程连接软件 与 vi命令的基本使用 (1)软件: CRT 已经下载好的压缩包 直接双击 点击新建会话  点击下一步  输入主机名  下一步    ...

  4. zz先睹为快:神经网络顶会ICLR 2019论文热点分析

    先睹为快:神经网络顶会ICLR 2019论文热点分析 - lqfarmer的文章 - 知乎 https://zhuanlan.zhihu.com/p/53011934 作者:lqfarmer链接:ht ...

  5. 使用jdk 容器镜像注意默认编码问题

    最近在使用一个开源数据pipeline 处理的工具的时候,发现了jdk容器镜像编码的一些问题 以下是一个简单的描述 问题 使用了streamsets 工具,使用容器运行,默认使用了adoptopenj ...

  6. 原生js-input框全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. oracle--10GRAC集群(NFS共享存储)

    一,NFS服务器配置 01, 安装包查看 [root@standby2 ~]# rpm -qa|grep nfs nfs-utils-lib--.el6.x86_64 nfs4-acl-tools-- ...

  8. aicoder实习svn内部培训教程

    1 svn介绍 都已经用了git,为什么还要介绍svn呢?为了让aicoder.com的学员能够掌握多种的源代码管理工具的使用方法,更快的融入到项目开发中,特整理此文档. 1.1 项目管理中的版本控制 ...

  9. Adams宏导出

    var set var=ip integer_value=1 var set var=macro_name str="" for variable_name=the_macro o ...

  10. 了解jsp,这一篇就够了.

    jsp的执行过程: 1 客户端发出请求. 2 Web容器将JSP转译成Servlet源代码. 3 Web容器将产生的源代码进行编译. 4 Web容器加载编译后的代码并执行. 5 把执行结果响应至客户端 ...