1.HTML5表单新特性之——新的input type

<input type=" ">

HTML5之前已有的input type:

text、password、radio、checkbox、file、submit、reset、button、image、hidden

HTML5新增的input type:

1.Email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示矿口(可定制内容不能定制样式)

<input type="email">

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

<input type="url">

3.number:数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口

<input type="number" min="" max="" step="">

4.tel:电话号码输入域，在手机浏览器中弹出数字键盘

<input type="tel">

5.search:搜索输入域，在手机浏览器中右下角呈现搜索按键

<input type="search">

6.range：范围选择控件，帮助用户在一定范围内选择一个数字

<input type="range" min="" max="" step="">

(7)color：颜色选择控件，浏览器并未自己实现颜色选择框，而是使用操作系统自带的颜色选择控件

<input type="color">

(8)date：日期选择控件，FF没有实现，推荐使用第三方插件代替，如jQueryUI-datepicker、laydate等

<input type="date">

(9)month：月份选择控件，FF没有实现

<input type="month">

(10)week：星期选择控件，FF没有实现

<input type="week">

HTML5新特性之表单新特性——新的表单元素

HTML5之前FORM可以有的标签——用于数据提交：

INPUT、TEXTAREA、SELECT/OPTION、BUTTON

HTML5新增表单元素——用于信息提示，不能用于数据提交：

(1)datalist：数据列表，配合option使用，本身为不可见元素，为普通的input提供输入建议列表

<datalist id="l"><option>XXX</option></datalist>

<input type="text" list="l">

(2)progress：进度条，未指定value属性则显示为“进行中”样式；若指定了value（默认在0~1之间）就可以控制其显示的进度

<progress value="0.5"></progress>

(3)meter：刻度尺/度量衡，用红黄绿三色表示出一个数值所处的范围：不可接受/可以接受/最优范围

<meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最优值" value="实际值"></meter>

(4)output：输出，用于描述表单中的计算结果，语义标签，样式与SPAN无异。

<output>xxx</output>

HTML5新特性表单新特性——表单元素新的属性——重点

HTML5之前表单元素可用的属性：

id、class、title、style、type、name、value、checked、selected、disabled、readonly

HTML5之前表单元素新增的属性：

(1)autocomplete：on/off，自动补全，是否自动记录之前提交的数据，以用于下一次输入建议

<input autocomplete="off">

(2)placeholder：站位符，用于在输入框中显示提示性文字，与value不同，不能被提交

<input placeholder="提示性文字">

(3)autofocus：false/true，自动获得输入焦点

<input autofocus>

(4)multiple：false/true，是否允许多个输入值，若声明了该属性，输入框中（如email）就允许输入用逗号分隔的多个值

<input type="email" multiple>

(5)form：为一个元素指定form属性，值为某个表单的ID，则此输入域可以放到表单的外部

<form id="f"></form>

<input form="f">

========上述五个属性是新的通用属性===========

=======上述六个属性是输入验证相关属性========

(6)required：false/true，必需的/必填项，在表单提交时会验证是否有输入，没有输入则弹出提示消息

<input required>

(7)maxlength：最大长度，在有输入的情况下，限定输入域中字符的个数

<input maxlength="9">

(8)minlength：最小长度，在有输入的情况下，限定输入域中字符的个数，不是HTML5标准属性，仅部分浏览器支持（如Chrome）

<input minlength="6">

(9)min：限定输入的数字的最小值

<input min="">

(10)max：限定输入的数字的最大值

<input max="">

(11)step：限定输入的数字的步长，与min属性连用

<input step="">

(12)pattern：指定一个正则表达式，对输入进行验证

<input pattern="1[3578]\d{9}">

注意：上述正则表达式可以省略^和$

最新文章

  1. maven - dependencies与dependencyManagement的区别
  2. SSH使用教程( Bitvise Tunnelier+Chrome+Proxy Switchy)
  3. HDU 4857 Couple doubi（找循环节）
  4. HDU 3065 病毒侵袭持续中
  5. javascript的几个问题
  6. (转)WCF入门教程（一）简介
  7. CentOS下利用sshpass不用手动输入密码远程执行命令
  8. Ini文件帮助类
  9. eclipse快捷键（转载）
  10. PAT (Advanced Level) 1084. Broken Keyboard (20)
  11. 用户输入与while循环
  12. Spring+SpringMVC+MyBatis深入学习及搭建(十四)——SpringMVC和MyBatis整合
  13. C#自动实现Dll(OCX)控件注册的两种方法
  14. 【HTTP协议】
  15. Android APK 瘦身 - JOOX Music项目实战
  16. nginx优化之keepalive
  17. 安装Oracle数据库心得
  18. appium java 滑动（js滑动和swipe滑动）
  19. AssemblyInfo.cs文件详解
  20. C语句详细（初学者）

热门文章

  1. Qt tableView设置不可编辑
  2. (?:pattern) 与 (?=pattern)的区别
  3. WAV相关:从PCM16 Little Endian数据转WAV文件
  4. 《MySQL必知必会》学习笔记——附录B 样例表
  5. web端自动化——selenium3+Python3+pycharm自动化
  6. robot：List变量的使用注意点
  7. Dijkstra算法(朴素实现、优先队列优化)
  8. IDEA遇到项目包后面出现% classes，% lines covered该怎么解决
  9. canal启动报错ERROR c.a.o.canal.parse.inbound.mysql.dbsync.DirectLogFetcher - I/O error while reading from client socket
  10. linux 下mongo 基础配置