引言：
表单是我们在日常页面之中最多用来与用户交互数据的一种方式，其中有许许多多的标签带我们来开发，H5之中更是添加了新的可用标签大大丰富了表单的内容，我们现在就一起来看一看吧。
正文：
1.form标签：说道表单，首先想到的是form标签，我们先来看一看它的属性吧。
--accept-charset：一个空格分隔或逗号分隔的列表，这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是，和包含这个form元素的文档相同的编码。
在之前版本的HTML中，不同的字符编码可以用空格或逗号分隔。在HTML5中，只有空格可以允许作为分隔符。
-- action：处理这个程序所在的URL内容，可以被input和button之中的formaction重写。
-- autocomplete：用于指示input内容是否拥有默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。
#off: 在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
#on: 浏览器能够根据用户之前在form里输入的值自动补全。
-- enctype：method为post的时候，指定提交内容的MIME类型，可能的取值为
#application/x-www-form-urlencoded: 如果属性未指定时的默认值。
#multipart/form-data: 这个值用于一个type属性设置为 "file" 的元素。
#text/plain (HTML5)。
详细说明请看下文。同时这一属性可能被button或者input之中的formenctype给覆盖。
-- method：这一属性表示了提交数据的方式，一般是使用get或者post内容。
-- name：表单名称，H4之中不被推荐使用这一属性，推荐为id，H5之中一个文档的多个form值之中name必须唯一而不仅仅是空字符。
-- novalidate：布尔类型，提交时是否需要被验证。默认值被button或者input之中的formnovalidate代替
-- target：表示提交之后，在哪里收到回复。H4之中这是一个用在frame的关键字，在H5之中这是一个用在browsing context浏览器上下文之中的属性。属性可能如下：
#_self: 在当前HTML4或HTML5文档页面重新加载返回值。这个是默认值。译注：也就是说如果这个文档在一个frame中的话，self是在当前frame（document）中重新加载的，而不是整个页面（window）。
#_blank: 以新的HTML4或HTML5文档窗口加载返回值。
#_parent: 在父级的frame中以HTML4或HTML5文档形式加载返回值，如果没有父级的frame，行为和_self一致。
#_top: 如果是HTML 4文档: 清空当前文档，加载返回内容；HTML5: 在当前文档的最高级内加载返回值，如果没有父级，和_self的行为一致。
#iframename: 返回值在指定frame中加载。
HTML5: 这个值可以被<button> 或者<input>中的formtarget属性重载（覆盖）。
下面我们来以此介绍表单之中的标签内容吧。
最为常见的input标签。输入框内容优先介绍：
input：标签主要用于用户的少量数据的输入内容，允许你用户输入具体信息。其属性如下：
-- type：可以注意到我们使用input标签的时候需要设置他的类型属性，默认是最为原始的明文输入框内容，但是实际上其还有许多的种类，下面我们来具体了解一下:
#button：无缺省行为按键。
#checkbox：复选框内容。必须使用value来定义提交时候的值，可以使用多个checkbox相同的name，如果多个值被选中提交的时候一数组的形势。checked状态表示选中，如果没有表示未选中。也可以使用indeterminate 指示复选框在一种不确定状态。
#color *：选定颜色的空间（属性之后有 * 标记的是H5的新增属性内容。）
# date *：用于输入日期的空间（年月日，不包括事件）。
# datetime * ：基于UTC时区的日期时间输入控件（时，分，秒，及几分之一秒）
# datetime-local * ：用于输入日期时间空间，不包括时区。
# email *：H5用于编辑e-mail的字段。合适的时候可以使用 :valid 和 :invalid CSS 伪类。
# file：表示文件上传内容，使用accept可以定义文件可以选择的类型。
# hidden：不显示在页面上面的控件，但是值会被提交。
# image：图片提交按键，使用src来定义图片来源。
# month * ：输入年月的空间不带时区。
# number * ：用于输入浮点数的控件。
# password：一个不可见值的但行文本，可以使用maxlength指定可以输入的最大长度。
# radio：表示单选内容，多个radio使用同一个名称，则最后以选中的那一项的值作为name对应的值。同时必须设value，否则选中之后没有值。
# range *：滑动轴，范围间取值，用与不确定的数值内容。有min（最小值），max（最大值），value（选定值），step（变动基数，比如3，则可以选定的值为3或者3的倍数）。
# reset：重置按键，重置当前表单内容。
# search *：用于搜索字符串的但行文本字段，换行会被从输入的值中自动移除。
# submit：提交按键，不用多说。
# tel *：用于输入电话号码的控件；换行会被自动从输入的值中移除A，但不会执行其他语法。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。
# text：普通文本输入框。
# time：用于输入不含时区的事件控件。
# url *：用于编辑URL的字段可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
# week *：用于输入一个由星期-年组成的日期，日期不包括时区
上面介绍了input类型之后接下来介绍一下input属性，type就不用说了，input标签还有许多的属性内容：
-- accept：这一属性上面有提到，只有当type是file的时候才会有用。可以通过逗号来分隔开多个类型结束符，或者也可以使用mime类型，同样也可以使用audio/*, video/*, image/*表示不同类型的文件。
-- autocomplete：自动填充属性，这一属性实际上是要依据类型来确定的，有些类型的input是会忽略这一值的，而可以设置这一值的类型的输入框内容，有需要依据其不同的需求可以设置很多种属性。由于属性太多，这里并不一一介绍了。
-- autofocus: 自动聚焦，焦点自动的附加在指定的页面设置的控件上面。
-- checked：checkbox或者radio选中属性。
-- maxlength：最大限制输入字符数
-- pattern：检查控件值的正则表达式，pattern匹配整个值，而不仅仅是某些子集，使用title来描述帮助用户的模式，当类型为text，search，tel，url或者email时适用。
-- placeholder：提示用户输入框的作用。
-- readonly：这属性指明当前不可修改。
-- required：设置当前的值为必须填写项。
-- size：部分控件可用。设置输入字符量设置。
-- spellcheck：将此属性的值设置为true表示元素需要检查其拼写和语法，值default 表示该元素将根据默认行为进行操作，可能基于父元素自己的spellcheck值。值false表示不应该检查元素。
-- step：使用min和max 属性来限制可以设置数字或日期时间值的增量。它可以是任意字符串或是正浮点数。如果此属性未设置为任何，则控件仅接受大于最小步长值的倍数的值。
-- width：image的宽度
select下拉列表菜单内容
我们常常会在表单里面为用户提供一个下拉框表单，提供用户预选选项。选项标签option配合select来进行数据展示，value来确定传递的值，两个标签之间的值则为展示内容。同时有时选项还是可以通过optgroup来进行分组使用的。
首先来看一下select标签的相关内容吧。
-- autofocus：当前内容自动聚焦。
-- disabled：是否可以操控当前的空间。
-- multiple：多选控制，可多选选项。
以上三个将会是我们最为常用的属性内容。同时还有例如，name等这里就不在多提。
option内容我们主要使用的属性是value来标识当前选项的属性值。之后便是selected这个属性表示的是被选中。
optgroup这一标签的主要属性内容是label表示当前选项组的名称。
textarea大段文本输入工具。
处理input之外我们还常常使用这一标签来进行输入内容交互。我们先来看一下相关的属性吧。
-- autocomplete：自动填充。
-- autofocus：自动聚焦。
-- cols：文本域的可视宽度。必须为正数，默认为20 (HTML5)。
-- maxlength：允许用户输入的最大字符长度，未指定表示无限长。
-- minLength：表示最小字符长度。
-- rows：元素的输入文本的行数。
-- wrap：指定文本换行的方式。默认为soft。可能的值为：hard: 在文本到达元素最大宽度的时候，浏览器自动插入换行符(CR+LF) 。比如指定 cols值。soft: 在到达元素最大宽度的时候，不会自动插入换行符。
button：表单按键
提供点击交互内容。我们来看一看有那些属性内容吧。
-- type：按键类型，通常有一般类型，提交按键或者重置按键，我们常用的提交按键就是submit类型。
-- form：规定按钮属于一个或多个表单。
-- formaction：覆盖的动作内容。
-- formenctype：覆盖表单的enctype属性内容。
-- name：表示的是当前按键的名称
上面使我们在表单之中常用标签内容。下面我们来聊一聊form传递数据的时候是以什么样的格式，我们在后台应该怎么杨获取，或者我们可以通过什么样的方式来模拟这一格式。
## get方法的时候，相关参数会体现在URL之后。使用？来进行参数以及对应页面的之间的间隔，使用&链接数据项内容。
所以我们在使用这一方式来传递数据的时候需要额外的注意，这一类的数据需要是可以明朗化的数据，或者是已经加密之后，展示出来的字符串内容将不会明面展示的数据，才比较适合用get方式来进行数据的传输，同时get方式传递的数据内容是由长度限制的。
## post方法：用HTTP请求体来进行数据的存储，发送给后台内容，所以在URL之中我们是看不到需要传递的数据的内容的。
那post方式传递数据的时候，请求的数据是如何进行组织和传递的呢。我们在使用form表单的时候会使用enctype来进行字符串内容的编码，通过这一属性来设置，传递的数据内容的编码方式，其值如下内容：
enctype的值
默认情况是使用第一个类型的，其会自动的将传递的数据按照键值的形势来进行拼接内容，主要类似于k1=xxx&k2=xxx这样的方式。
第二种请求头常用于表单内容有文件上传的情况。
上图就是上传时候的结构。首先请求头中的Content-Type 是multipart/form-data; 并且会随机生成一个boundary, 用于区分请求body中的各个数据; 每个数据以 --boundary 开始, 紧接着换行,下面是内容描述信息, 接着换2行, 接着是数据; 然后以 --boundary-- 结尾, 最后换行;
文本数据和文件,图片的内容描述是不相同的
文件参数如下：
其实还有许多其他的请求数据传输格式，这里就不细说了。
文章对于请求格式部分内容有参考https://www.jianshu.com/p/4f9e79eb0163 这一文章。
网友评论