HTML <input> type 属性
type 属性用于设置要显示的 <input> 元素的类型
默认类型是：text
虽然该属性不是必需的，但我们建议应该你始终使用它
语法
<input type="value" />
属性值
| 值 | 描述 |
|---|---|
| button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本） |
| checkbox | 定义复选框 |
| color | 定义拾色器 |
| date | 定义 date 控件（包括年、月、日，不包括时间） |
| datetime | 定义 date 和 time 控件 包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区 |
| datetime-local | 定义 date 和 time 控件 包括年、月、日、时、分、秒、几分之一秒，不带时区 |
| 定义用于 e-mail 地址的字段 | |
| file | 定义文件选择字段和 "浏览..." 按钮，供文件上传 |
| hidden | 定义隐藏输入字段 |
| image | 定义图像作为提交按钮 |
| month | 定义 month 和 year 控件（不带时区） |
| number | 定义用于输入数字的字段 |
| password | 定义密码字段（字段中的字符会被遮蔽） |
| radio | 定义单选按钮 |
| range | 定义用于精确值不重要的输入数字的控件（比如 slider 控件） |
| reset | 定义重置按钮（重置所有的表单值为默认值） |
| search | 定义用于输入搜索字符串的文本字段 |
| submit | 定义提交按钮 |
| tel | 定义用于输入电话号码的字段 |
| text | 默认。定义一个单行的文本字段（默认宽度为 20 个字符） |
| time | 定义用于输入时间的控件（不带时区） |
| url | 定义用于输入 URL 的字段 |
| week | 定义 week 和 year 控件（不带时区） |
浏览器支持
所有主流浏览器都支持 type 属性
但是，并非所有主流浏览器都支持所有不同的 input 类型都能在所有主流浏览器中工作
详情可以查看下面关于每种输入类型的浏览器支持
HTML 4.01 与 HTML5 之间的差异
以下 input 类型是 HTML5 中的新类型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url
范例
带有两种不同输入类型的 HTML 表单，text 和 submit
<form action="/dy/html/getpost"> 用户名: <input type="text" name="usrname"><br> <input type="submit" value="提交"> </form>
输入类型：button
定义可点击的按钮，在用户单击按钮时运行一个 JavasScript 函数
<input type="button" value="点我" onclick="msg()">
输入类型：checkbox
复选框允许用户在一定数量的选择中选取一个或多个选项
<input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br> <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br> <input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>
输入类型：color
从拾色器中选取颜色
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
输入类型：date
定义 date 控件
生日: <input type="date" name="bday">
输入类型：datetime
定义 date 和 time 控件 ( 带有时区 )
生日 (日期和时间): <input type="datetime" name="bdaytime">
输入类型：datetime-local
定义 date 和 time 控件 ( 不带时区)
生日 (日期和时间):<input type="datetime-local" name="bdaytime">
输入类型：email
定义用于 e-mail 地址的字段 ( 当提交表单时会自动对 email 字段的值进行验证)
E-mail: <input type="email" name="usremail">
iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它（添加 @ 和 .com 选项)
输入类型：file
定义文件选择字段和 "浏览..." 按钮，供文件上传
选择一个文件: <input type="file" name="img">
输入类型：hidden
定义隐藏字段，隐藏字段对于用户是不可见的
隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值
<input type="hidden" name="country" value="Norway">
输入类型：image
定义图像作为提交按钮
<input type="image" src="/static/i/submit.png" width="32" height="32">
输入类型：month
定义 month 和 year 控件 ( 不带时区 )
生日 ( 月和年 ): <input type="month" name="bdaymonth">
输入类型：number
定义用于输入数字的字段 ( 可以设置可接受数字的限制 )
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
可以使用下面的属性来设置限制
输入类型：password
定义密码字段 ( 密码字段中的字符会被遮蔽 )
<input type="password" name="pwd">
输入类型：radio
允许用户在一定数量的选择中选取一个选项
<input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="女"> 女
输入类型：range
定义用于精确值不重要的输入数字的控件 ( 比如 slider 控件)
也可以设置可接受数字的限制
<input type="range" name="points" min="1" max="10">
可以使用下面的属性来设置限制
输入类型：reset
定义重置按钮 ( 重置所有表单值为默认值 )
<input type="reset">
请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情
输入类型：search
定义搜索字段 ( 比如站内搜索或谷歌搜索等 )
Search Google: <input type="search" name="googlesearch">
输入类型：submit
定义提交按钮
<input type="submit">
输入类型：tel
定义用于输入电话号码的字段
电话号码: <input type="tel" name="usrtel">
输入类型：text
定义两个用户可向其中输入文本的单行的文本字段
First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br>
输入类型：time
定义用于输入时间的控件 ( 不带时区 )
选择时间: <input type="time" name="usr_time">
输入类型：url
定义用于输入 URL 的字段
添加你的主页: <input type="url" name="homepage">
iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它 ( 添加 .com 选项 )
输入类型：week
定义 week 和 year 控件 ( 不带时区 )
选择周: <input type="week" name="week_year">