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. iOS的数据持久化

    所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) pr ...

  2. asp.net 事件加载顺序

    下面是母版页与内容页合并后事件的发生顺序: 母版页控件 Init 事件. 内容控件 Init 事件. 母版页 Init 事件. 内容页 Init 事件. 内容页 Load 事件. 母版页 Load 事 ...

  3. [转] 经典SQL练习题

    原题目来自qaz13177_58_CSDN博客 http://blog.csdn.net/qaz13177_58_/article/details/5575711/#sql 只是更新个人答案供参考 表 ...

  4. 处理handler中的内存泄漏

    package de.bvb.test; import android.app.Activity; import android.os.Bundle; import android.os.Handle ...

  5. MySQL字符集转换(latin1到utf8)

    http://blog.chinaunix.net/uid-25266990-id-3344584.html

  6. 微信支付JsAPI

    https://pay.weixin.qq.com/wiki/doc/api/download/WxpayAPI_php_v3.zip 下载获取微信支付demo压缩包 打开压缩包,并将其中 Wxpay ...

  7. 关于yuv与rgb的互转

    来自以下网址:http://stackoverflow.com/questions/9465815/rgb-to-yuv420-algorithm-efficiency #define CLIP(X) ...

  8. Icon字体制作

    工具网站:https://icomoon.io 这个网站是免费的 功能也很强大 不过我那是铁通网络,导致这个网站不能访问,做vpn跳转就可以了 正题: 点击这里进入制作页面: 点击这里选取 svg 矢 ...

  9. fenxi

    线路:通过定义而来(固定线路可以定义,随机和临时线路怎么来) 订单:线路上点对点的关系 装车单:同意线路上的车辆可以有多个订单组成的装车单 车辆任务:给调度接口输入车辆和订单集合,根据订单产生多个车的 ...

  10. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) B

    Description Santa Claus decided to disassemble his keyboard to clean it. After he returned all the k ...