什么是Form表单?

Form 表单是一组用来收集用户输入信息的html 标签，可以对用户输入的信息进行收集效验和向服务器提交，从而实现用户与web 服务器的交互。
Form表单由<form>标签定义，只有标签内的组件中的数据才会被提交到服务器。

Form表单的基本组成

表单则由HTMLFormElement类型，此元素继承了HTMLElement，因此与其他HTML元素具有相同的默认属性；HTMLFormElement有自己以下属性和方法；

acceptCharset: 服务器能够处理的字符集；等价于HTML中的accept-charset特性；
action: 接收请求的URL，等价于HTML中的action
elements: 表单中所有控件的集合.
enctype: 请求的编码类型；等价于HTML中的enctype特性；
length: 表单中控件的数量；
method：要发送的http请求类型，一般是get或者是post，等价于HTML中的method；
name: 表单的名称；
reset(): 将所有表单域重置为默认值；
submit(): 提交表单；会自动将所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交。
target:用于发送请求和接收响应的窗口名称；
action 简单的来讲就是请求url的绝对路径
必需的 action 属性规定当提交表单时，向何处发送表单数据。

语法
<form action="value">

<input>

输入标签，根据type属性的不同，表现出的功能也不同。

type = text 文本输入框，单行输入，用于提交文本。
type = password 密码输入框，用于输入密码。
type = checkbox 复选框，为浏览者提供多选输入方式。
type = radio 单选框，为浏览者提供单选输入方式。
type = "file" 上传文件，使浏览可以上传文件到服务器。
type = "hidden" 定义一个隐藏字段，对用户不可见，可以作为一种隐藏标记来作为辨别上传数据的真实性的依据。
type = "botton" 定义一个可点击的按钮，本身没有任何行为，可以通过clickon( )属性来给按钮添加各种功能。
type = "submit" 提交按钮，用于向服务器提交表单数据，数据会发送到action属性中的指定界面。
type = "resist" 重置按钮，会清除掉表单中的所有数据。

<textarea>

文本域，提供多行文本输入方式，使浏览者能够输入大段的文本。
<textarea>value</texarea>

<label>

为input标签建立一个标注，使用户更直观的了解标签的功能。
同时可以通过for属性时用户点击标注文字时，是焦点转到和标签相关的表单控件上。
<label for = "id">标注</label>

<select>

下拉框，通过下拉选项输入数据。
可以设置selected属性来设置默认选项。

<button>

提交按钮标签，和type="button"属性相区分，自带提交功能。
<button>value</button>

Form表单的数据提交方式

表单的数据提交主要由两个属性来决定，action和method。
action：规定当提交表单时该向何处发送数据。
通常有3中取值方式：

一个URL，一般指向一个服务器端的程序，程序接受表单传输的数据并作处理。
使用mailto协议的地址，会将表单内容以电子邮件的方式发送出去，比较少见需要访问者计算机上正确安装和设置了邮件发送程序。
空值，如果action为空或不写，表示提交给当前页面。
method：定义浏览器将表单中的数据提交给服务器处理程序的方式。
目前最常使用的提交方式为get和post。

get会将表单信息提交服务器时会将信息拼接起来形成一个url地址，容易泄漏，而post不会，所以安全性上post比较有优势。
get会把提交的内容拼接到地址，所以当提交内容较长时，将无法使用get进行传输，而post不会出现这种问题。
所以对与安全性要求比较高的数据传输用post，比较低的用get。
一些比较长的数据传输用post，短数据用get。

 <form id="form">
 <div class="form-group col-md-6">
                <label>昵称</label>
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input type="text" id="nickname" name="nickname" class="form-control" placeholder="昵称" maxlength="50" value="${obj.nickname!''}">
                </div>
            </div>

            <div class="form-group col-md-6">
                <label>手机号</label>
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                    <input type="phone" id="phone" name="phone" class="form-control" placeholder="手机号" maxlength="11" value="${obj.phone!''}" >
                </div>
            </div>
</form>

序列化表单

 var data = $('#form').serialize();
 $.post("${basePath}/self/editUser.do",data,function(data){
}):

jquary赋值属性赋值

给标签id为faceimg 的src属性赋值 
$('#faceImg').attr("src",data.path);      
$('#face').val(data.path);

以下两种写法可以达成一致的目的

 $('#fileForm').attr('action','${basePath}/upload/img.html');

<form id="fileForm" method="post" enctype="multipart/form-data" 
target="fileFrame" action="${basePath}/upload/img.html">
</form

Form表单的使用