html5 大幅度地增加和改良input元素的种类

增加和改良input元素

url类型、email类型、date类型、time类型、datetime类型、datetime-local类型、month类型、week类型、number类型、range类型、search类型、tel类型、color类型

详细介绍

1.url类型

1. url 类型用于应该包含 URL 地址的输入域。
2. 在提交表单时，会自动验证 url 域的值。

<input type="url" name="user_url" />

2.email类型

1. email 类型用于应该包含 e-mail 地址的输入域
2. 在提交表单时会自动验证email的格式

<input type="email" name="email" />

3.date类型

选取日、月、年

4.time类型

选取时间（小时和分钟）

5.datetime类型

选取时间、日、月、年（UTC 时间）

6.datetime-local类型

1. 选取时间、日、月、年（本地时间）
2. step属性默认值60

7.month类型

选取月、年

8.week类型

选取周和年

9.number类型

1. number 类型用于应该包含数值的输入域。
2. 可以设定对所接受的数字的限定

1. 例如

<input type="number" name="points" min="1" max="10" />

1. 下面的属性来规定对数字类型的限定：
   1. max 规定允许的最大值
   2. min 规定允许的最小值
   3. step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
   4. value 规定默认值

10.range类型

1. range 类型用于应该包含一定范围内数字值的输入域。
2. range 类型显示为滑动条。
3. 可以设定对所接受的数字的限定：
4. 例如

<input type="range" name="points" min="1" max="10" />

11.search类型

1. search 类型用于搜索域,边框自带微圆角。
2. 例如

<input type="search" name="search" />

12.tel类型

1. 与text文本框类似，但是专用与电话
2. 没有特殊的校验规则，不强制输入数字

13.color类型

1. 显示一个颜色控件，点击选中需要的颜色。 2.例如

<input type="color" onchange="document.body.style.backgroudColor = document.getElenmentById('currentColor').textContent = this.value;">
    <span id="currentColor"></span>