Html5中input新增的表单元素和属性介绍。
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： 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。<form autocomplete="on|off">
novalidate :属性规定当提交表单时不对其进行验证。如果使用该属性，则表单不会验证表单的输入。<form novalidate="novalidate">
input 属性
| 属性 | 值 | 描述 |
|---|---|---|
| accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
| align |
|
不赞成使用。规定图像输入的对齐方式。 |
| alt | text | 定义图像输入的替代文本。 |
| autocomplete |
|
规定是否使用输入字段的自动完成功能。 |
| 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 |
|
覆盖表单的 method 属性。 （适用于 type="submit" 和 type="image"） |
| formnovalidate | formnovalidate |
覆盖表单的 novalidate 属性。 如果使用该属性，则提交表单时不进行验证。 |
| formtarget |
|
覆盖表单的 target 属性。 （适用于 type="submit" 和 type="image"） |
| height |
|
定义 input 字段的高度。（适用于 type="image"） |
| list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
| max |
|
规定输入字段的最大值。 请与 "min" 属性配合使用，来创建合法值的范围。 |
| maxlength | number | 规定输入字段中的字符的最大长度。 |
| min |
|
规定输入字段的最小值。 请与 "max" 属性配合使用，来创建合法值的范围。 |
| 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 |
|
规定 input 元素的类型。 |
| value | value | 规定 input 元素的值。 |
| width |
|
定义 input 字段的宽度。（适用于 type="image"） |
007办公资源网站 https://www.wode007.com
在下面的案例中，我们对一些常用的属性做了解释:
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>
