输入控件 input（ type类型）

form 元素只是一个数据获取元素的容器，而容器内的元素称为表单控件。最常用的表单控件是 input 元素。

[1] text 单行文本输入字段 // 可以与 datalist 配合使用（在输入时获得一些提示）

type="text" 表示一个文本输入框，它是默认的输入类型，是一个单行的控件，一般是一个带有内嵌框的矩形。

[ search 搜索输入框 ]

语义上表示搜索框，外观上与 type="text" 的 input 输入类型没有差异。
<input type="search">
[ tel 手机号输入 ]

语义上的电话输入域，外观上与 type="text" 的 input 输入类型没有差异，在手机端会唤出数字键盘。
<input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}">
[ url 单个URL绝对路径地址 ] // IE9- 浏览器及 safari 浏览器不支持

语义上的 url 地址的输入域，会自动验证 url 域的值，外观上与 type="text" 的 input 输入类型没有差异。
<input type="url">
[ email 邮箱地址输入 ] // IE9- 浏览器及 safari 浏览器不支持

语义上的 e-mail 地址输入域，会自动验证 email 域的值，外观上与 type="text" 的 input 输入类型没有差异，在手机端会唤出英文键盘。email 类型的 input 元素支持 multiple 属性，可以输入多个邮箱地址，使用 “,” 分隔。
<input type="email" name="email" multiple>

[2] ~~number~~ 数字输入框，如数字、小数点 // IE 不支持该类型

// 用于处理数字输入，在手机端会唤出数字键盘
<input type="number" min="0" max="10" step="0.5" value="6" />

// 属性：
   max 　　规定允许的最大值
   min 　　 规定允许的最小值
   step 　　规定合法的数字间隔
   value 　  规定默认值
  [注意]属性的取值可为小数

[3] password 密码输入框

密码输入框，它与文本输入框几乎一模一样，功能上唯一的不同的字母输入后会被隐藏，一般是一连串的点。

// IE6 浏览器设置的 type="text" 或 "password" 的 input 元素的宽高为包含 padding 和 border 的宽高。

[4] checkbox 多选按钮

允许用户在给定数目的选择中选择一个或多个选项。同一组的按钮，name 取值一定要一致。

[注意] checkbox 类型的 input 元素无法设置 padding 和 border （除 IE10- 浏览器以外）。

type="radio" 或 "checkbox" 的 input 元素支持 checked 属性。

<form>
	选择你所喜欢的：           // 复选框
	<input type="checkbox" name="football"> 足球
	<input type="checkbox" name="basketball"> 篮球
	<input type="checkbox" name="pingpang"> 乒乓球
	<input type="checkbox" name="others"> 其他

	<br><br>

	性别：                   // 单选框
	<input type="radio" name="sex"> 男
	<input type="radio" name="sex"> 女
	<input type="radio" name="sex" checked> 未知
</form>

[5] redio 单选按钮

允许用户从给定数目的选择中选一个选项。同一组按钮，name 值一定要一致。

[注意] radio 类型的 input 元素无法设置 padding 和 border（除 IE10- 浏览器以外）。

[6] file 文件选择器，定义输入字段和"浏览"按钮，用于文件上传

accept属性：文件类型过滤
multiple：是否支持多选

[注意] IE8- 浏览器设置的 type="file" 的 input 元素的宽高为包含 padding 和 border 的宽高。

该类型的 input 元素支持 accept 属性和 multiple 属性。

[7] range 范围选择控件，可以与 datalist 关联进行分段 // IE9- 不支持该类型

用于处理包含在一定范围内的数字输入，类似于 type="number" 的 input 类型。

属性：
max 　　 规定允许的最大值
min 　　 规定允许的最小值
step 　　规定合法的数字间隔
value 　 规定默认值
[注意] 属性的取值可为小数

<input type="range" min="0" max="10" step="0.5" value="6" />

// 如果不设置min和max属性，则默认min=0，max=100

[8] color 颜色输入控件，可以与 datalist 关联快速选择颜色 // safari 和 IE 不支持该类型

创建一个调色板用来选择颜色，颜色值以 URL 编码后的十六进制数值提交。

<input type="color">

[9] 日期输入控件 // IE 和 Firefox 这 6 种日期类型都不支持，chrome 不支持 datetime 类型。

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

type="date" 的 input 输入类型用于选取日、月、年。

type="month" 的 input 输入类型用于选取月、年。

type="week" 的 input 输入类型用于选取周、年。

type="time" 的 input 输入类型用于选取时、分。

type="datetime" 的 input 输入类型用于选取时、日、月、年（UTC 时间）。

type="datetime-local" 的 input 输入类型用于选取时、日、月、年（本地时间）。

要预设控件的日期和时间，可以用字符串设置 value 属性。

value属性格式：
date                　　 YYYY-MM-DD
time                 　　hh:mm:ss.s
datetime            　　 YYYY-MM-DDThh:mm:ss:sZ
datetime-local           YYYY-MM-DDThh:mm:ss:s
month            　　　　 YYYY-MM
week                　　 YYYY-Wnn

YYYY=年
MM=月
DD=日
hh=小时
mm=分钟
ss=秒
s=0.1秒
T=日期与时间之间的分隔符
Z=Zulu时间的时区
Wnn=W周数，从1月的第一周开始是1，直到52

该类型的value属性格式还可以用在min和max的属性里，用来创建时间跨度；step可以用来设置移动的刻度。
[注意] chrome不支持该类型的step设置。

<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">

[10] reset/submit/button 按钮组 // 同 button 元素

普通按钮：type="button" 定义可点击的按钮，但没有任何行为，常用于在用户点击时启动 JS 程序。
// IE8-浏览器的box-sizing:content-box；而其他浏览器的box-sizing:border-box;
   <input type="button" value="Click me" onclick="alert(1)" />
图片形式的提交按钮：type="image" 的 input 输入类型定义图像形式的提交按钮，可设置 width、height、src、alt 这四个属性。用图片作为提交按钮会一起发送点击在图片上的 x 和 y 坐标，这样可以与服务器端图片地图结合使用，如果图片有 name 属性，也会随坐标发送。

提交按钮：type="submit" 的 input 输入类型，用于创建提交表单的按钮。

重置按钮：type="reset" 的 input 输入类型，用于创建重置表单的按钮。

[11] hidden 隐藏输入类型 // 用于在表单中增加对用户不可见，但需要提交的额外数据，如统计网站访问人数

<input type="hidden" name="test" value="123">
// disabled属性无法与type="hidden"的input元素一起使用

输入控件 input（ type类型 ）

输入控件 input（ type类型）