H5的表单新特性可以分为两大类。

  一、10个input的type值

    1、email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口。

    2、url:地址输入域,在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口。

    3、number:数字输入域。(可设置min、max、step)

    4、tel:电话号码输入域,在手机浏览器中弹出数字输入域。

    5、search:搜索输入域,在手机浏览器右下角呈现搜索按键。

    6、range:范围选择控件。

    7、color:颜色选择控件。

    8、date/month/week:时间选择控件。

  二、11个表单元素新属性

    1、autocomplete:自动补全,是否自动记录之前提交的数据,以用于下一次输入建议。

    2、placeholder:占位符,用于在输入框中显示提示性文字,与value不同,不能被提交。

    3、autofocus:自动获得输入焦点。

    4、multiple:是否允许多个输入值,若声明该属性,那么输入框中允许输入多个用逗号隔开的值。

    5、form:值为某个表单的id,若设置,则该输入域可放在该表单外面。

    6、required:在表单提交时会验证是否有输入,没有则弹出提示消息。

    7、maxlength:限制最大长度,只有在有输入的情况下才有用,不区分中英文。

    7.5、minlength:限制最小长度,但它不是H5标准属性,仅部分浏览器支持。

    8、min:限定输入数字的最小值。

    9、max:限定输入数字的最大值。

    10、step:限定输入数字的步长,与min连用。

    11、pattern:指定一个正则表达式,对输入进行验证。(正则默认首尾加^$)

HTML5 十大新特性(二)——表单新特性的更多相关文章

  1. HTML5_01之表单新特性

    1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt ...

  2. H5表单新特性

    1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...

  3. 完善:HTML5表单新特征简介与举例——张鑫旭

    一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...

  4. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  5. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

  6. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  7. HTML5基础知识汇总_(2)自己定义属性及表单新特性

    自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...

  8. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

  9. html5: 新特性(表单)

    表单: 在html4中,表单内的从属元素必须写在表单内部.在html5中,可以吧他们书写在页面任何位置,然后指定form属性,属性值为表单ID,这样就指定表单了. formaction,formmet ...

随机推荐

  1. java基础复习:final,static,以及String类

    2.final 1)为啥String是final修饰的呢? 自己答: 答案: 主要是为了“效率” 和 “安全性” 的缘故.若 String允许被继承, 由于它的高度被使用率, 可能会降低程序的性能,所 ...

  2. javascript的类型、值和变量

    js的类型有多种分类,原始类型(数值,字符串,布尔值,null,undefined)和对象类型(object,String,Number,RgbExp等),或者是拥有方法的类型(object,Stri ...

  3. Java类的基本运行顺序是怎样

    我们以下面的类来说明一个基本的 Java 类的运行顺序: public class Demo{ private String name; private int age; public Demo(){ ...

  4. android 断点下载---XUtils

    配置权限 <uses-permission android:name="android.permission.INTERNET"/> <uses-permissi ...

  5. T-SQL存储过程、游标

    Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...

  6. install phpexcel using composer in thinkPHP

    Environment Window 10.1 XAMPP 7.0.9 (PHP 7.0.9) thinkPHP 5.0.1 Steps # visit https://getcomposer.org ...

  7. python查找空格和中文

    前言 图片或者文件夹下,命名不规范,有中文或者有空格.这个脚本批处理查找,并输出到 txt中方便修改,也可以扩展为 直接脚本删除空格等.目前只用在Windows上,mac没有测试,不知道能不能行,有需 ...

  8. wf(五)

    测试工作流: 运用wf(四)的solution: 创建单元测试项目: 1.选择HelloWorkflow解决方案,右键选择添加新建项目:选择单元测试模板,命名为HelloWorkflow.Tests. ...

  9. Hibernate之全面认识

    Hibernate体系架构 Hibernate通过配置文件管理底层的JDBC连接,将用户从原始的JDBC释放出来,使得用户无需再关注底层的JDBC操作,而是以面向对象的方式进行持久化操作.这种全面的解 ...

  10. Python爬网获取全国各地律师电话号

    [本文出自天外归云的博客园] 从64365网站获取全国各地律师电话号,用到了python的lxml库进行对html页面内容的解析,对于xpath的获取和正确性校验,需要在火狐浏览器安装firebug和 ...