新增表单元素&属性&事件

表单—新增控件类型

HTML5 增加了多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，主要内容如下。
①email、②url、③number、④range
⑤Date pickers (date, month, week, time, datetime, datetime-local)
⑥search、⑦color、⑧tel
1、type=”email”
限制用户输入为邮箱类型(即输入内容必须含有@符号，并且@前后内容不能为空)。email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交

注意：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。
2、type=”url”
限制用户输入为网址，即输入内容必须含有"http:",并且后面内容不能为空.提供了网址的合法格式验证。必须包含 http:// 或者 https://

注意：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）
3、type=”number”
限制用户输入为数字类型,只能输入数字和小数点，不能输入其他字符，并且输入框最右边有上下调节按钮

案例：
最小值0、最大值100、步进值5、value初始值50

注意：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）

4、type=”range”
显示为滑动条，会以一个滑块形式表现，包含一定范围内数值输入域

案例：初始值为10，最小值为0，最大值为100，步进值为20

5、type=Date Pickers（日期选择器）
H5 拥有多个可供选取日期和时间的新输入类型，主要内容如下

案例测试：

GMT与UTC

GMT，即格林尼治标准时间，也就是世界时。GMT的正午是指当太阳横穿格林尼治子午线（本初子午线）时的时间。但由于地球自转不均匀不规则，导致GMT不精确，现在已经不再作为世界标准时间使用。
UTC，即协调世界时，UTC现在作为世界标准时间使用，一般认为UTC与GMT基本上等同，误差不超过0.9秒。
整个地球分为二十四时区，每个时区都有自己的本地时间。在国际无线电通信场合，为了统一起见，使用一个统一的时间，称为通用协调时(UTC, Universal Time Coordinated)。
时区：
加粗样式为了统一世界的时间，1884年的国际经度会议规规定将全球划分为24个时区（东、西各12个时区）。规定英国（格林尼治天文台旧址）为零时区（GMT+00），东1-12区，西1-12区，中国北京处于东8区（GMT+08）。
北京时区是东八区，领先UTC八个小时，在电子邮件信头的Date域记为+0800。如果在电子邮件的信头中有这么一行：

电子邮件信头的Date域使用二十四小时的时钟，而不使用AM和PM来标记上下午。
6、type=”search”
作用：用于搜索域，比如站点搜索或 Google 搜索
渲染结果：显示为常规的文本域，在输入框输入文本后右边显示“x”，可以将输入的文本清除

7、type=”color”
颜色选择器，选择颜色的面板

8、type=”tel”
tel并不是来验证手机号码的，因为全球手机号码格式的标准不同。它的目的是能够在移动端打开数字键盘，而数字键盘就限制了用户只能填写数字而不能填写其他字符。（在PC端无法展示）

浏览器兼容

注释：Opera 对新的输入类型的支持最好。不过目前已经可以在所有主流的浏览器中使用了。即使不被支持，也可以显示为常规的文本域。
H5表单除了新增了很多type控件外，还增加了很多新的表单类标签，例如datalist数据列表标签、output输出标签、optgroup选项组标签。

表单—新增标签

1、
简介：数据列表标签，定义输入框的选项列表，选项列表是通过该元素内的option元素进行创建的。该元素与input元素配合使用，来定义input可能的值。
用法：要把这个datalist元素定义的选项列表绑定到输入框，将input元素的list属性的值设置为datalist元素的id属性值

小结&注意事项：
①绑定形式：通过id指向datalist元素，配合input元素的list属性进行双向绑定
②显示时机：datalist元素类似于选择框，在文本框获得焦点的时候以提示输入的方式显示
③选择方式：当用户要的值不存在选择列表中，就让用户自行填写，如果有存在用户就可以选择
④本质：本质上可以理解为一个ui小部件，用户可以从中检索附加信息
兼容问题：

IE 10、Firefox、Opera 和 Chrome都支持；
IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持。

2、
输出标签，标记定义一些输出类型，计算表单结果。注意：oninput 事件是在用户输入时触发的事件

属性解析：
①for 规定一个或多个元素的 id 列表，以空格分隔。这些元素描述了计算中使用的元素与计算结果之间的关系
②name 规定 元素的名称
写法：
output不能再写在其他任意位置，只能在form里面才有效果
3、
optgruop元素在html4已经存在，在HTML5进行了拓展。

简介：
选项组标签，将select元素中的选项进行逻辑分类，在select元素中直接定义，不允许嵌套，既不能进行第二次分组

属性：
①disabled：加载时禁用该选项组
②label: 用来定义分组显示的标签名
选项组标签，案例：

4、
表单元素分组标签，将表单内容的一部分打包，生成一组相关表单字段。
显示：当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
常与legend 元素配合使用：为 fieldset 元素定义标题
案例：

H5新增的表单属性

1、required 属性
约束该表单元素在提交前必须输入值，提交文档时，限制文本框必须输入内容，否则无法提交，即如果未输入将阻止表单提交。
通俗理解：表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空。

2、placeholder属性
占位符，当用户还没有输入值的时候，输入型控件可以通过 placeholder 属性向用户显示描性说明或者提示信息。使用 placeholder属性只需要将说明性文字作为该属性值即可。

3、autofocus 属性
在打开页面时使元素自动获取焦点，只有当一个页面是以使用某个控件为主要目的时，才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。

案例：

建议：从实际角度来说，不要随便滥用该属性。

4、list属性
指定一个datalist作为下拉提示单，输入框通过 list 属性和 datalist 关联起来；value 为选中后输入框的内容（可以不加），label 为 value 的辅助描述性内容。

5、multiple属性
文件上传多选或多个邮箱地址 ，可以选择多个文件；在email中，可以输入多个邮箱地址，以逗号分隔

6、pattern属性
规定用于验证 input 域的模式，模式为正则表达式，验证表单元素

7、autocomplete属性
规定表单是否应该启用自动完成功能，适用于 ，部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on）
自动补全属性，当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入。
取值：on:打开 ，off:关闭

8、novalidate属性
取消表单验证，规定当提交表单时不对其进行验证，如果使用该属性，则表单不会验证表单的输入

作用：通过将novalidate属性放置到form元素上，form元素的原生校验特征就会忽略，这样就可以防止它同你的自己写的JavaScript的校验方法起冲突

9、formnovalidate 属性
标签使用该属性，则提交表单时按钮不会执行验证过程

10、禁用属性：disabled
11、只读属性：readonly(只读文本框)： true false
12、长度属性：size=“初始长度”
13、选中属性：selected(默认选中项) 【列表】
14、选中属性：checked (单选按钮选中状态)【单选、复选】
15、输入的最大字符数 ：maxlength:type为text或password时
16、指定按钮是否被选中：checked:type为radio或checkbox时
17、setCustomValidity：修改 pattern 校验失败时，默认提示信息
H5新增表单事件主要如下
①oninput：当元素中的内容改变时触发
②oninvalid：当验证不通过时触发
案例：

补充：正则表达式组成

正则表达式由两种基本字符组成：元字符、非打印字符

元字符：/* + $ ^ . | \ ( ) { } [ ]
①/用于正则的开始和结束
②字符类 []，例如[34578]表示34578任意一个数字即可
③范围类[-]，比如 [a-z][A-Z][0-9]
④^ 匹配输入字符串的开始位置
⑤$ 匹配输入字符串的结束位置

其他字符
[a-z] 匹配小写a到z
[A-Z] 匹配大写A到Z
\d 匹配一个数字字符。等价于 [0-9]。
\D 匹配一个非数字字符。等价于 [^0-9]
\w 匹配字母、数字、下划线。等价于[A-Za-z0-9_]
\W 匹配非字母、数字、下划线。等价于 [^A-Za-z0-9_]

简单列举下常用正则
（1）用户名正则，4到16位（字母，数字，下划线，减号）
/¹{4,16}KaTeX parse error: Undefined control sequence: \- at position 30: … /^([A-Za-z0-9_\̲-̲\.])+\@([A-Za-z…/
（3）手机号码正则
/^1(3|4|5|6|7|8|9)\d{9}KaTeX parse error: Undefined control sequence: \d at position 17: … （4）身份证号正则 /^\̲d̲{15})|(^\d{17}([0-9]|X)KaTeX parse error: Can't use function '\(' in math mode at position 18: …（5）固定电话正则 /^(\̲(̲\d{3,4}\)|\d{3,…/
（6）QQ号码正则（5至11位）
/²[0-9]{4,10}$/（7）微信号正则（6至20位，以字母开头，字母，数字，减号，下划线）{/}^{[}a-zA-Z]([{-}_a-zA-Z0-9]5,19)+$/

PS：其他常用正则，详见”常用正则.txt”文档

---

1. a-zA-Z0-9_- ↩︎

2. 1-9 ↩︎