input标签主要用于Web表单的创建交互，以便接受来自用户的数据。 我们通过更改type属性的值，来实现不同的输入类型。在以前的写法中表单元素必须放在form元素所包含的里面，而在html5中，我们可以把它们写在页面上的任何一个地方，只需要给该元素增加一个form属性，form属性的值为form表单的id。例如：
<form method="get" id="test">
<input type="text" name="name"/>
<input type="password" name="password"/>
<input type="submit" value="提交">
</form>
<input type="text" name="confirm" form="test">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"。
autocomplete： 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。<form autocomplete="on|off">
novalidate :属性规定当提交表单时不对其进行验证。如果使用该属性，则表单不会验证表单的输入。<form novalidate="novalidate">
| 属性 | 值 | 描述 |
|---|---|---|
| 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"） |
在下面的案例中，我们对一些常用的属性做了解释:
<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索"><br>
<!--
novalidate:在控件中加入了required、emial、url等验证后，如果想让这些验证失效，可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时，经常会看到在下面显示输入过的内容，
这就是html5的新特性：自动完成，如果不想使用此功能，将其设置为off即可
-->
<input type="text" name="UserName" value="" required autocomplete="off"><br>
<!--
multiple:在选择文件时，默认只能单选，加上这个属性后，则可以使用鼠标选中多个文件进行上传
-->
<label>选择文件</label>
<input type="file" name="upload" value="" multiple="multiple"><br>
<!--
list：这个属性要和datalist元素一起使用，指定此文本框的可选择项，另外其相较于select的优点在于还可以输入
-->
<label>区号：</label>
<input type="text" name="age" value="" list="list1"><br>
<datalist id="list1">
<option value="0312">保定</option>
<option value="0311">石家庄</option>
<option value="010">北京</option>
<option value="0313">唐山</option>
</datalist>
<!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
-->
<input type="submit" name="subsave" value="提交">
<input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>完结~~~~~~~~~~~~~
在做移动端项目开发的时候，经常会遇到各种表单验证，有时候不同的页面，验证规则是一样的；之前项目里的验证代码写的很凌乱，最近刚好遇到这个模块的功能需要重构
javascript判断checkbox是否选中的方法：1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。对于在js中来判断checkbox是否被选中很简单，示例如下：
type=image默认是sumbit，不用再添加onclick事件提交，否则会发生表单被提交两次的情况；在onclick事件中添加重置方法
文本框输入完成后点击回车页面刷新,问题出在form上，当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容，就会发生刷新事件。
两个文件，一个写逻辑，一个写校验规则；特点：逻辑简单，代码量少，够用；不想看代码直接新建这两个文件复制代码，看最下面的使用方法；
在使用layui进行ajax表单提交时，不回调，并且刷新了当前页面。在表单提交后添加 代码 return false;form.on()表单监控事件中一定要加 return false;
通过复选框的name属性,遍历后将被选中的复选框的值输出：checkbox[index].nextSibling.nodeValue: 获取的是checkbox中标签包裹的文本值，建立一个数组,使用push 方法将被选中的元素保存到数组
textarea代表HTML表单多行输入域，textarea标签是成对出现的,以<textarea>开始,以</textarea>结束。cols -- 多行输入域的列数，rows -- 多行输入域的行数
HTML5表单新特性之——新的input typeEmail：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示矿口(可定制内容不能定制样式)，url:URL地址输入域。在表单提交时提供简单的URL地址格式验证
虽然 react 没有内置的表单验证逻辑，但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。具体地， AntDesign 中的表单组件 Form 与表单域 Form.Item（用于包裹任意输入控制的容器）配合使用：