HTML5中的表单详解！
表单是什么？
- 对于用户而言是数据的录入和提交的界面
- 对于网站而言获取用户信息的途径
- HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
创建一个表单
<form action="" method="" name=""> </form>
form标签的属性（关于表单提交的属性）
action
处理表单提交的 URL。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。
enctype
当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有：
- application/x-www-form-urlencoded：未指定属性时的默认值。
- multipart/form-data：当表单包含 type=file 的 <input> 元素时使用此值。
- text/plain：出现于 HTML5，用于调试。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formenctype 属性覆盖。
method
浏览器使用这种 HTTP 方式来提交 表单。可能的值有：
- post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
- get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?' 作为分隔符，没有副作用 时使用这个方法。
- dialog：如果表单在 <dialog> 元素中，提交时关闭对话框。此值可以被 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formmethod 属性覆盖。
novalidate
此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性，表单需要通过验证。该属性可以被表单中的 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formnovalidate 属性覆盖。
target
表示在提交表单之后，在哪里显示响应信息。下述关键字有特别含义：
- _self：默认值。在相同浏览上下文中加载。
- _blank：在新的未命名的浏览上下文中加载。
- _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
- _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。此值可以被 <button>、 <input type="submit"> 或 <input type="image"> 元素中的 formtarget 属性覆盖。
input元素 (表单输入元素) 的属性
HTML <input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件。
<input type="" value="" name="" placeholder=""/>
<input> 元素由于拥有诸多属性而异常强大，其中 type 属性尤其重要。由于所有 <input> 元素，无论是哪种 type，都基于 HTMLInputElement 接口，所以理论上说，它们共享一套相同的属性。但实际上大部分属性只作用于特定一组 type。此外，一些属性作用于 <input> 的方式取决于 <input> 的 type 属性，不同的 type 有不同的效果。
disabled：这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， click 事件 将不会被分发 。 并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。
name：控件的名称，与表单数据一起提交。
placeholder：提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅在 type 属性为 text、search、tel、url 或 email 时生效，否则将被忽略。
src：如果 type 属性的值是 image，这个属性指定了按钮图片的路径; 否则将被忽视。
value：控件的初始值。此属性是可选的
type：要呈现的控件类型。
min, max, step：为包含数字或日期的 input 类型规定限定适用于以下类型的<input>标签：date pickers、number 以及 range
multiple：规定<input>元素中可选择多个值
pattern：规定一个正则表达式用于验证 <input> 元素的值
required：规定必须在提交之前填写输入域（不能为空）
novalidate：规定<input>元素在表单提交时无需被验证
autofocus：规定在页面加载时，域自动地获得焦点
autocomplete：规定 form 或 input 域应该拥有自动完成功能
disabled： 规定输入字段是禁用的
size： 规定输入字段的尺寸（以字符计）
更多属性请参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
input元素的type类型
| Type | 描述 |
| button | 没有默认行为的按钮，上面显示 value 属性的值，默认为空。 |
| checkbox | 复选框，可设为选中或未选中。 |
| color | 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。 |
| date | 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 |
| datetime-local | 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 |
| 编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。 | |
| file | 让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。 |
| hidden | 不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。 |
| image | 带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。 |
| month | 输入年和月的控件，没有时区。 |
| number | 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。 |
| password | 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。 |
| radio | 单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。 |
| range | 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。 |
| reset | 此按钮将表单的所有内容重置为默认值。不推荐。 |
| search | 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 |
| submit | 用于提交表单的按钮。 |
| tel | 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 |
| text | 默认值。单行的文本区域，输入中的换行会被自动去除。 |
| time | 用于输入时间的控件，不包括时区。 |
| url | 用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。 |
| week | 用于输入以年和周数组成的日期，不带时区。 |
表单其他元素
select元素
表示一个提供选项菜单的控件。
- 每个 <option> 元素都应该有一个 value 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 value 属性，则 value 值默认为元素中的文本。你可以在 <option> 元素中设置一个 selected 属性以将其设置为页面加载完成时默认选中的元素。
- <select> 元素有一些用于控制元素的特有属性，例如 multiple 规定了能不能同时选中多个选项，size 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 required, disabled, autofocus 等。
- 你还可以将 <option> 元素放在 <optgroup> 元素中以为下拉菜单创建不同的选项分组。
textarea 元素
表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。
属性：
- autocomplete：是否使用浏览器的记忆功能自动填充文本。
- autofocus：页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。
- cols：文本域的可视宽度。
- maxlength：允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。
- minlength：允许用户输入的最小字符长度 (Unicode)
- placeholder：向用户提示可以在控件中输入的内容。 在渲染提示时，占位符文本中的回车符 (\r) 或换行符 (\n) 一定会被作为行断（换行）处理。
- wrap：指定文本换行的方式。默认为 soft。可能的值为：
- hard: 在文本到达元素最大宽度的时候，浏览器自动插入换行符 (CR+LF) 。比如指定 cols值。
- soft: 在到达元素最大宽度的时候，不会自动插入换行符。
- css样式：resize: none;（控制文本区是否可调整大小，none为不可调整）
button元素
表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。
属性：
- type：button 的类型。可选值：submit、reset、button（没有默认行为）、menu（打开一个由指定<menu>元素进行定义的弹出菜单）。
- value：button 的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。
- disabled：此布尔属性表示用户不能与 button 交互（禁用）。
- formenctype：如果 button 是 submit 类型，此属性值指定提交表单到服务器的内容类型
- formmethod：如果 button 是 submit 类型，此属性指定浏览器提交表单使用的 HTTP 方法
- formnovalidate：如果 button 是 submit 类型，此布尔属性指定当表单被提交时不需要验证
- autofocus：一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。
datalist元素
包含了一组<option>元素，这些元素表示其它表单控件可选值。
progress元素
元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。
meter元素
元素用来显示已知范围的标量值或者分数值。
output元素
表示计算或用户操作的结果
