表单验证

  Invalid事件 : 验证反馈

  input.addEventListener('invalid',fn,false)

  阻止默认验证:ev.preventDefault()

  formnovalidate属性 : 关闭验证

  <form action= "http://www.baidu.com">
    <input type= "text" id= "text" placeholder= "请输入4~16个字符" name= “user" pattern= "\d{1,5}" required />
    <input type= "submit" value= "提交"/>
    <input type= " submit" value= "保存至草稿箱" formaction= http://www.baidu.com formnovalidate/>
  </form>

    新的输入型控件:

      <form>

        <input type="email" />  ·邮箱

        <input type="submit" value="提交"/>

      </form>

      

      -----------------------------------------------------------------------------

      <form>

        <input type="tel" />  ·电话号码

        <input type="submit" value="提交"/>

      </form>

      ------------------------------------------------------------------------------

      <form>

        <input type="url" />  ·网址

        <input type="submit" value="提交"/>

      </form>

      

      ------------------------------------------------------------------------------

      <form>

        <input type="search" />  ·搜索引擎

        <input type="submit" value="提交"/>

      </form>

      

      -------------------------------------------------------------------------------

      <form>

        <input type="range" step="2" min="0" max="10" value="2"/>  ·特定范围内的数值选择器

        <input type="submit" value="提交"/>

      </form>

      

      -------------------------------------------------------------------------

      <form>

        <input type="number" />  ·只能包含数字的输入框

        <input type="submit" value="提交"/>

      </form>

      

      -------------------------------------------------------------------------

      <form>

        <input type="color" />  ·颜色选择器

        <input type="submit" value="提交"/>

      </form>

      

      -----------------------------------------------------------------------

      <form>

        <input type="date" />  ·显示日期

        <input type="submit" value="提交"/>

      </form>

      

      ------------------------------------------------------------------------

      <form>

        <input type="time" />  ·显示时间,不含时区

        <input type="submit" value="提交"/>

      </form>  

      

      ------------------------------------------------------------------------

      <form>

        <input type="datetime-local" />  ·显示完整日期 不含时区

        <input type="submit" value="提交"/>

      </form>  

      

      ------------------------------------------------------------------------

      <form>

        <input type="date" />  ·显示周

        <input type="submit" value="提交"/>

      </form>  

      

      ------------------------------------------------------------------------

      <form>

        <input type="month" />  ·显示月

        <input type="submit" value="提交"/>

      </form>  

      

      ------------------------------------------------------------------------

      <form>

        <input placeholder="请输入4~16个字符" />  ·输入框提示信息

        <input type="submit" value="提交"/>

      </form> 

      

      ------------------------------------------------------------------------

      <form>

        <input name="a" autocomplete="off"/>  ·不保存用户输入值

        <input type="submit" value="提交"/>

      </form> 

      

      ------------------------------------------------------------------------

      <form>

        <input autofocus="autofocus" />  ·自动聚焦

        <input type="submit" value="提交"/>

      </form> 

      

      ------------------------------------------------------------------------

      <form>

        <input required="required" />  ·必须填

        <input type="submit" value="提交"/>

      </form> 

      

      ------------------------------------------------------------------------

      <form>

        <input pattern="\d{1,5}" />  ·正则验证,1-5位数字  ----了解

        <input type="submit" value="提交"/>

      </form> 

      

html5新增表单控件和表单属性的更多相关文章

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

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

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

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

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

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

  4. FineUI第六天---表单控件

    表单控件 所有表单控件都有的属性有: ShowLabel:是否显示标签(默认值:true). ShowEmptyLabel:是否显示空白的标签(默认值:false). Label:标签文本(默认值:& ...

  5. 表单控件之select

    一.表单控件之表单 1.依次获取表单里的所有控件: for (i = 0; i < document.getElementById("formName").length; i ...

  6. 前端笔记——如何控制表单控件中的disabled

    0.前言     本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如 ...

  7. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

  8. 基于 el-form 封装一个依赖 json 动态渲染的表单控件

    nf-form 表单控件的功能 基于 el-form 封装了一个表单控件,包括表单的子控件. 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾. 毕竟UI库提供的功能都很强大了,不 ...

  9. HTML5(常用的表单控件)

    常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...

随机推荐

  1. Hello,DTOS!(下)

    如何验证编写的主引导程序?解决方案设计:将汇编源码编译为二进制机器码(nasm)创建虚拟盘(bximage)将二进制代码写入虚拟盘起始位置(dd)在虚拟机中将虚拟盘作为启动盘执行(vmware) 就算 ...

  2. 使用设备树来编写led驱动程序

    在总线设备驱动模型中,平台设备是写在c文件中.使用设备树时,平台设备事先并不存在,在dts文件中构造节点,节点里面含有资源.dts文件被编译成dtb文件,然后传递给内核.内核会解析dtb文件,得到一个 ...

  3. Ansible 相关介绍

    相关视频http://v.xue.taobao.com/learn.htm?spm=a220o.1000855.0.0.24c748e6QMQV0e&courseId=111848 Ansib ...

  4. sed-grep命令

    sed -i '$a IPADDR=192.168.1.199' /etc/sysconfig/ifcfg-eth0work-scripts/ifcfg-eth0 #追加ip地址. sed -i '$ ...

  5. Appium+python自动化(二)- 环境搭建—下(超详解)

    简介 宏哥的人品还算说得过去,虽然很久没有搭建环境了,但是换了新电脑设备,一气呵成,将android的测试开发环境已经搭建准备完毕.上一篇android测试开发环境已经准备好, 那么接下来就是appi ...

  6. 使用hangfire在xunit中

    框架为:abp hangfire配置连接:https://aspnetboilerplate.com/Pages/Documents/Hangfire-Integration 在单元测试中如何配置呢? ...

  7. navicat密码错误的问题

    上集说到我的navicat打不开对吧..‘ 这下就来聊聊打开了的问题 下午非常开心,就打开了mysql的图形化界面, 但是,在我连接数据库的时候就报错了 错误就是密码错误那行 什么什么‘localho ...

  8. Optical Flow Estimation 发展历程 (1)

    Optical flow estimation Traditional Method Variational approach TVL-1 Deep Method Supervised FlowNet ...

  9. .NET Core:过滤器

    过滤器的作用是在 Action 方法执行前或执行后做一些加工处理.使用过滤器可以避免Action方法的重复代码.功能上更贴合业务的使用过滤器. 在Startup中的ConfigureServices方 ...

  10. js 为url字符串添加、修改参数

    //为url字符串添加.修改参数 String.prototype.EditUrlParam = function (paramName, replaceWith) { var url = this; ...