html5表单地区元素,html5新增表单域元素及属性

1、新增表单元素

在之前的HTML表单标签中，对于一些功能支持的不够好，比如：文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能。(早期是通过js和dom元素配合实现这些通用的功能)

在HTML5中，把这些常用的基本的功能直接加入到表单标签中。

新的标准中添加了很多输入型控件，比如：number、url、email、range、color等。而他们都是以 input标签的type属性出场，

1)number类型的input标签

表示当前标签只接受数字类型输入

name:用来标识表单提交时的key值

min和max:HTML5新增加的属性，表示当前输入框输入的最小和最大值

step： HTML5新增加的属性，是步长的意思，也就是在点击增大或者减小的时候的增加或减少的步长

2)email类型的input标签

表示当前input标签接受一个邮箱的输入

运行效果：

placeholder，提示信息

当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式

3)url类型的input标签

运行效果：

4)tel类型的input标签

运行效果：

5)range类型的input标签

滑块控件，输入范围内的数据变得非常简单容易

运行效果：

可与HTML5新增加的output标签一块使用，达到一个联动的效果。 标签定义一些输出类型计算表单结果配合oninput事件。

0

100

+

=

6) date pickers日期选择器类型的input标签

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

7)颜色选择input标签

运行效果：

input标签新增加的特有属性

autofocus：页面加载时，域自动地获得焦点。适用所有 标签的类型。

max、min、step：适用以下类型的 标签：date pickers、number 以及 range。

autocomplete：form或input域是否拥有自动完成功能(值为on和off)。适用于以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

input标签新增加的特有属性

placeholder：提示信息属性。

multiple：输入域中可选择多个值，用于文件上传控件，设置此属性后，允许上传多个文件。适用于以下类型的 标签：email 和 file。

required： 当前文本框在提交前必须有数据输入。适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

input标签新增加的特有属性

pattern：规定用于验证输入字段的模式。pattern 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

示例：

国家代码：

input标签新增加的特有属性

form：规定输入域所属的一个或多个表单(而不是必须在进行包裹)。适用于所有 标签的类型。

First name:

下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。

Last name: