HTML表单
最近总是想着，是时候给博客搭一个后台了，然而昨天晚上才开始看PHP，大致翻了《PHP从入门到精通》这本书，关于该书内容这里就不做评价（略那啥...）。只是接触到后台之后，才对于表单form标签开始有了一点了解，想想前两天被后台的同学吐槽“为什么一个页面上要套那么多form”，丢脸丢到家了，赶紧学一点点后台（2017-5-18：哈哈）。好了不说废话了，现在总结一下form标签。
<!--more-->
form标签主要用于接收用户的不同类型的输入或选择，并在提交表单时向服务器传输数据，接下来主要从HTML的form标签属性和HTML表单元素两方面说起;
1. 标签属性
form是一个块状元素，没有内外边距和边框，甚至没有任何其他默认样式，除了独有的属性之外跟一个普通的div元素没有什么区别。 Action：属性值为一个url路径，表示整个表单打包的数据发送到的目标地址，一般指向一个后台处理程序文件（比如xx.php），然后再处理程序中通过函数或变量获取表单数据内容。
1.1. method
指定表单传递的方式，属性值有post和get两种。这两种方式有很大的区别：使用post方式提交数据，表单数据会作为HTTP请求的一部分发送给服务器（关于HTTP的简单理解，这里是一个链接）；使用get方式提交数据，表单数据会添加在action属性值所指定的url地址后面发送到服务器。主要的区别有以下两点：
- 由于url长度的限制，因此使用get方式传输的数据量一般比较小，而post则没有这个限制；
- 使用get方式传递的参数附在url后，存在安全隐患。
1.2. traget
与a标签的target属性一致，表示点击提交按钮之后打开新窗口的方式。
1.3. entctype
指定表单数据编码方式，编码过程是在数据发送到服务器之前进行的。表单中的enctype属性有：
application/x-www-form-urlencoded：窗体数据被编码为名称/值对。这是标准的编码格式，get请求时该编码格式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割；post请求时该编码格式会把form数据封装到请求报文主体中，然后发送到服务器- 如果没有
input[type=file]则使用x-www-form-urlencoded就够了。
multipart/form-data：如果存在input[type=file]，则需要使用form-data编码格式，窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
实际上用的最多的就是application/x-www-form-urlencoded了，对于GET和POST都适用，因此默认情况下不需要设置请求头部；如果需要异步上传图片，需要修改为multipart/form-data。
1.4. name
name属性是一个非常重要的表单属性，表明表单的名称，注意name和id的区别：id用来操控CSS和JS，只存在于客户端（即浏览器中）；而name是浏览器与服务器通信时所使用的名称（比如数组键值）。两者功能不同，不能混淆。在表单和表单元素中，name是一个不可或缺的属性。
2. 表单元素
form标签只是构成了整个表单的容器，而具体内容则是根据需要在容器中加入不同的表单元素。为了便于理解，我将表单元按功能分成了三类：文本输入，选择框和按钮三大类，当然这只是我个人的理解，其实无关痛痒。
2.1. 文本输入
有text,password,textarea，分别对应文本，密码和文本域。其中前两者使用input标签并设置其type属性为对应的值来创建，其内容保存在value中；而textarea则是一个闭合的标签，会解析其中的换行与空格，此外需要注意的是使用innerHTML可以在文本框中看见其内容，但是表单提交时输入的内容保存在value中而非innerHTML；
2.2. 选择框
有checkbox，radio，select，分别对应复选框，单选框和下拉菜单。前两者也是使用input标签并设置其type属性为对应的值来创建。而select是下拉菜单容器，下拉选项由options标签创建。选择框有一个比较重要的属性checked(或selected)，表示选择的状态，用于判断是否已被选中。
2.3. 按钮
有file，button，submit，hidden，分别对应文件上传，普通按钮，提交按钮和隐藏按钮；其中文件上传按钮又有accept等多个属性，这里不做详细介绍，hidden在页面上不会显示，主要的作用是用来收集某些数据；而submit作为整个表单的提交，应当放在整个表单的末尾。
2.4. 注意事项
表单元素最重要的属性，大概就是name和value了，前者作为服务器处理程序的数组键名，后者作为该数组某键对应值，承担着打包和整理整个表单数据的作用。其中有一些需要注意的小细节（虽然用处不大）：
- input标签默认的type是text，但是一般会显示的指定type；
- checkbox默认的value值是on；
- 要使一组radio生效，则必须为他们指定相同的name属性值；
3. 其他
3.1. 样式定制
此外，默认的表单元素样式都比较朴素（比如单复选框），网上有很多利用CSS美化表单的方式，我的解决思路是使用一个label来美化，然后使用:checked伪类来改变样式。由于CSS是不支持父类选择器的，可以使用+兄弟元素选择器来实现。
.checkbox {
display: inline-block;
}
.checkbox_item {
display: none
}
.checkbox_icon {
display: inline-block;
width: 16px;
height: 16px;
background-color: red;
}
.checkbox_item:checked + .checkbox_icon{
background-color: blue;
}然后对应的页面结构，使用字体图标来定制对应的选框样式，或者是直接设置checkbox_icon的样式就可以了
<label class="checkbox">
<input type="checkbox" class="checkbox_item">
<i class="iconfont checkbox_icon"></i>
</label>除了checked伪类外之外，jQuery还专门增强了表单选择器的选项，这里就不展开了。
3.2. 表单事件
表单事件中比较常用的的事件有：
focus，表示元素获得焦点blur，表示元素失去焦点change，select元素选项改变时触发，制作联动菜单必备。submit，表单提交时触发，多用于表单检测
在前端开发工作中，必不可少的一环就是表单验证，其原理就是在提交表单之前，依次校验表单元素的值是否符合预期规范。