input标签主要用于Web表单的创建交互，以便接受来自用户的数据。 我们通过更改type属性的值，来实现不同的输入类型。在以前的写法中表单元素必须放在form元素所包含的里面，而在html5中，我们可以把它们写在页面上的任何一个地方，只需要给该元素增加一个form属性，form属性的值为form表单的id。例如：
1 <form method="get" id="test">
2 <input type="text" name="name"/>
3 <input type="password" name="password"/>
4 <input type="submit" value="提交">
5 </form>
6 <input type="text" name="confirm" form="test">html5新增表单属性
color：用于指定颜色的控件。
date：用于输入日期的控件(年，月，日，不包括时间)。
datetime：基于 UTC 时区的日期时间输入控件(时，分，秒及几分)。
datetime-local：用于输入日期时间控件，不包含时区。
email：用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。
month：用于输入年月的控件，不带时区。
number: 用于输入浮点数的控件。
range：用于输入不精确值控件。如果未指定相应的属性，控件使用如下缺省值： min：0 max：100 value：min + (max-min)/2，或当 max 小于 min 时使用。
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel：用于输入电话号码的控件；换行会被自动从输入的值中移除A，但不会执行其他语法。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。
time：用于输入不含时区的时间控件。
url：用于编辑URL的字段。换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
week：用于输入一个由星期-年组成的日期，日期不包括时区。
使用上述属性的时候，当在表单提交，和触发填写时候，支持html5的浏览器会提示类型是否正确，如果没有设置novalidate属性当输入不正确是无法提交的。不支持的将以默认属性"text"。
html5新增form 属性
autocomplete： 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
novalidate :属性规定当提交表单时不对其进行验证。如果使用该属性，则表单不会验证表单的输入。<form novalidate="novalidate">
属性 | 值 | 描述 |
accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
align | left | 不赞成使用。规定图像输入的对齐方式。 |
right | ||
top | ||
middle | ||
bottom | ||
alt | text | 定义图像输入的替代文本。 |
autocomplete | on | 规定是否使用输入字段的自动完成功能。 |
off | ||
autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。 |
（不适用于 type="hidden"） | ||
checked | checked | 规定此 input 元素首次加载时应当被选中。 |
disabled | disabled | 当 input 元素加载时禁用此元素。 |
form | formname | 规定输入字段所属的一个或多个表单。 |
formaction | URL | 覆盖表单的 action 属性。 |
（适用于 type="submit" 和 type="image"） | ||
formenctype | 见注释 | 覆盖表单的 enctype 属性。 |
（适用于 type="submit" 和 type="image"） | ||
formmethod | get | 覆盖表单的 method 属性。 |
（适用于 type="submit" 和 type="image"） | ||
post | ||
formnovalidate | formnovalidate | 覆盖表单的 novalidate 属性。 |
如果使用该属性，则提交表单时不进行验证。 | ||
formtarget | _blank | 覆盖表单的 target 属性。 |
（适用于 type="submit" 和 type="image"） | ||
_self | ||
_parent | ||
_top | ||
framename | ||
height | pixels | 定义 input 字段的高度。（适用于 type="image"） |
% | ||
list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
max | number | 规定输入字段的最大值。 |
请与 "min" 属性配合使用，来创建合法值的范围。 | ||
date | ||
maxlength | number | 规定输入字段中的字符的最大长度。 |
min | number | 规定输入字段的最小值。 |
请与 "max" 属性配合使用，来创建合法值的范围。 | ||
date | ||
multiple | multiple | 如果使用该属性，则允许一个以上的值。 |
name | field_name | 定义 input 元素的名称。 |
pattern | regexp_pattern | 规定输入字段的值的模式或格式。 |
例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 | ||
placeholder | text | 规定帮助用户填写输入字段的提示。 |
readonly | readonly | 规定输入字段为只读。 |
required | required | 指示输入字段的值是必需的。 |
size | number_of_char | 定义输入字段的宽度。 |
src | URL | 定义以提交按钮形式显示的图像的 URL。 |
step | number | 规定输入字的的合法数字间隔。 |
type | button | 规定 input 元素的类型。 |
checkbox | ||
file | ||
hidden | ||
image | ||
password | ||
radio | ||
reset | ||
submit | ||
text | ||
value | value | 规定 input 元素的值。 |
width | pixels | 定义 input 字段的宽度。（适用于 type="image"） |
% | ||
在下面的案例中，我们对一些常用的属性做了解释:
1 <body>
2 <!--
3 placeholder:用于在文本框未输入时提示作用
4 autofocus:用于控件自动获取焦点
5 -->
6 <input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
7 <input type="button" name="" value="搜索"><br>
8 <!--
9 novalidate:在控件中加入了required、emial、url等验证后，如果想让这些验证失效，可以在表单中将novalidate设置为tyue
10 -->
11 <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
12 <!--
13 required:必填
14 autocomplete:在网页的文本框中输入部分内容或者双节时，经常会看到在下面显示输入过的内容，
15 这就是html5的新特性：自动完成，如果不想使用此功能，将其设置为off即可
16 -->
17 <input type="text" name="UserName" value="" required autocomplete="off"><br>
18 <!--
19 multiple:在选择文件时，默认只能单选，加上这个属性后，则可以使用鼠标选中多个文件进行上传
20 -->
21 <label>选择文件</label>
22 <input type="file" name="upload" value="" multiple="multiple"><br>
23 <!--
24 list：这个属性要和datalist元素一起使用，指定此文本框的可选择项，另外其相较于select的优点在于还可以输入
25 -->
26 <label>区号：</label>
27 <input type="text" name="age" value="" list="list1"><br>
28 <datalist id="list1">
29 <option value="0312">保定</option>
30 <option value="0311">石家庄</option>
31 <option value="010">北京</option>
32 <option value="0313">唐山</option>
33 </datalist>
34 <!--
35 formaction:可以更改点击此按钮式提交到服务器的处理程序
36 formmethod:可以更改向服务器提交数据的方式
37 -->
38 <input type="submit" name="subsave" value="提交">
39 <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
40 </form>
41 </body>
