41、 HTML5 表单输入类型

1) 数字 number
<input type="number"> 用于应该包含数字值的输入字段，例：

<input type = "number" name = "age" value="20" min="1" max="100">

开始会显示一个初始值，单击框可以直接输入数字覆盖初始值/将鼠标放在框上，右边会出现上下两个小箭头，单击可在初始值基础上进行加减，数字不能小于min（最小）值或大于max（最大）值：

2) 日期 date
<input type="date"> 用于应该包含日期的输入字段，例：

<input type="date" name="birthday" >

初始值无，框被/分为三部分，可以逐一点击某一部分修改数值/直接在框右侧单击小日历图标，可以直接在日历中选择日期：

3) 颜色 color
<input type="color"> 用于应该包含颜色的输入字段，例：

<input type="color" name="favcolor">

单击弹出16进制颜色表，可以单击选择颜色或输入RGB颜色数值：

4) 范围 range
<input type="range"> 用于应该包含一定范围内的值的输入字段，例：

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

鼠标拖住圆形向左右两边调即可改变数值大小，最左边为min值，最右边为max值，从左往右依次均匀递增：

5) 年月 month
<input type="month"> 允许用户选择月份和年份，例：

<input type="month" name="birthmonth">

同日期操作，框被/分为两部分，可以逐一点击某一部分修改数值/直接在框右侧单击小日历图标，可以直接在日历中选择月份：

6) 周 week
<input type="week"> 允许用户选择周和年，例：

<input type="week" name="week_year">

同上操作，框被/分为两部分，可以逐一点击某一部分修改数值/直接在框右侧单击小日历图标，可以直接在日历中选择第几周：

7) 时间 time
<input type="time"> 允许用户选择时间（无时区），例：

<input type="time" name="usr_time">

同上操作，框被：分为两部分，可以逐一点击某一部分修改数值/直接在框右侧单击时钟图标，可以选择时间：

8) 日期和时间 datetime
<input type="datetime"> 允许用户选择日期和时间（有时区），例：

<input type="datetime" name="daytime">

目前浏览器都不支持datetime

9) 日期和时间 datetime-local
<input type="datetime-local"> 允许用户选择日期和时间（无时区），例：

<input type="datetime-local" name="daytime">

将date和time组件放在一起，同理：

10) 电子邮件 email
<input type="email"> 用于应该包含电子邮件地址的输入字段
在被提交时自动对电子邮件地址进行验证，例：

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

11) 搜索 search
<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段），例：

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

12) 电话号码 tel
<input type="tel"> 用于应该包含电话号码的输入字段
目前只有Safari 支持 tel 类型，例：

<input type="tel" name="usrtel">

、

13) 网址 url
<input type="url"> 用于应该包含 URL 地址的输入字段
在提交时能够自动验证 url 字段，例：

<input type="url" name="homepage">