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. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  2. mysql 增删改查最基本用法小结

    目录: 1.新建数据库 2.新建数据表 3.查看表结构 4.增删改查 建立一个数据库students 建立一块数据表class1 内容包括: id 主键 自动编号 无符号位 SMALLINT类型 na ...

  3. getStyle(obj, attr)兼容获取css

    设置元素(element)的css属性值可以用element的style属性,dom.style.attr  这样或取得到的值大多数是undefined:何解? dom.style.attr  是用来 ...

  4. Java线程:线程的同步与锁

    一.同步问题提出 线程的同步是为了防止多个线程访问一个数据对象时,对数据造成的破坏. 例如:两个线程ThreadA.ThreadB都操作同一个对象Foo对象,并修改Foo对象上的数据. public ...

  5. 关于区域性网站CMS的一些个人看法

    最近了解了几款国外开源CMS,与现有国内客户需求及业务习惯,结论如下:1.国人的习惯,有后台管理和会员管理2种,而老外大部分开源系统都是一个管理即前台管理,而且大部分架构是固定死的,如果在想抽出一个后 ...

  6. DataGrid获取当前行某列值

    前言: 本文将给大家介绍一下, 在ASP.NET MVC环境下,如何利用Jquery MiniUI(一个专业WebUI控件库)来获取Datagrid中的值,官网没有涉及到的内容:如何获取当前行某一列的 ...

  7. MVC3.0 项目升级到 MVC4.0

    按照 http://www.asp.net/whitepapers/mvc4-release-notes#_Toc303253806 的步骤 第一步:修改web.config 注意,默认的MVC3网站 ...

  8. JQuery常用方法一览

    $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/ ...

  9. Java数据结构与算法之---求两个数的最大公约数(欧几里得算法)

    一个简单的小算法来获取两个数的最大公约数, public class Test { public static void main(String[] args) { long result = gcd ...

  10. VTID配置

    车牌过滤: [FilterByHour] text=${Channel},${Plate.type},${Frame.Time(%H)} all=true rule01= ^$,^$,^[]$ =&g ...