新增Input的type值

新增Input的type值

HTML5新增的input的type值表格

type	作用
color	color 类型用在input字段主要用于选取颜色
date	date 类型允许你从一个日期选择器选择一个日期
datetime	datetime 类型允许你选择一个日期（UTC 时间）
datetime-local	datetime-local 类型允许你选择一个日期和时间 (无时区)
email	email 类型用于应该包含 e-mail 地址的输入域
month	month 类型允许你选择一个月份
number	number 类型用于应该包含数值的输入域 还能够设定对所接受的数字的限定
range	range 类型用于应该包含一定范围内数字值的输入域range 类型显示为滑动条使用下面的属性来规定对数字类型的限定：max - 规定允许的最大值min - 规定允许的最小值step - 规定合法的数字间隔value - 规定默认值
search	search 类型用于搜索域，比如站点搜索或 Google 搜索
tel	定义输入电话号码字段
time	time 类型允许你选择一个时间
url	url 类型用于应该包含 URL 地址的输入域在提交表单时，会自动验证 url 域的值
week	week 类型允许你选择周和年

注意：以下示例可能因为浏览器可能不支持新的type值的原因，有些值是无效的，但是它们会仍然按默认的效果显示

color

代码示例：

<input type="color"/>

效果：

date

代码示例：

<input type="date"/>

效果：

datetime

代码示例：

<input type="datetime"/>

效果：

datetime-local

代码示例：

<input type="datetime-local"/>

email

代码示例：

<form>
	<input type="email"/>
	<input type="submit" value="验证email"/>
</form>

效果：

month

代码示例：

<input type="month"/>

效果：

number

代码示例：

<input type="number"/>

效果：

range

代码示例：

<input type="range"/>

效果：

search

代码示例：

<input type="search"/>

效果：

tel

代码示例：

<form>
	<input type="tel"/>
	<input type="submit" value="验证tel"/>
</form>

效果：

time

代码示例：

<input type="time"/>

效果：

url

代码示例：

<form>
	<input type="url"/>
	<input type="submit" value="验证url"/>
</form>

效果：

week

代码示例：

<input type="week"/>

效果：