form表单

---

一、form表单是什么？

表单在网页中主要负责数据采集功能，HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理

表单的组成部分：

• 表单标签 ：< form> < /form>
• 表单域 ： 包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等
• 表单按钮 ：buttom

二、表单的属性

action 规定当提交表单时，向何处发送表单数据

 action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接受表单提交过来的数据
 
 当表单在未指定action属性值的情况下，action的默认值为当前页面的URL地址
 
 注意：当提交表单后，页面会立即跳转到action属性指定的URL地址

method 规定以何种方式把表单数据提交到action URL

 get方式适合用来提交少量的、简单的数据。
 
 post方式适合用来提交大量的、复杂的、或包含文件上传的数据。

target 规定在何处打开action URL

 _blank在新窗口中打开。
 
 _self默认。在相同的框架中打开。

 _parent在父框架集中打开。(很少用)
 
 _top在整个窗口中打开。(很少用)
 
 framename在指定的框架中打开。(很少用)

enctype 规定在发送表单数据之前如何对其进行编码

 application/x-www-form-urlencoded在发送前编码所有字符(默认)
 
 multipart/form-data不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
 
 text/ plain空格转换为"+"加号，但不对特殊字符编码。(很少用)

---

三、表单的同步提交

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。
缺点：

• 整个页面会发生跳转（跳转到action URL所指向的地址）
• 页面之前的状态和数据会丢失。

解决方法：表单只负责采集数据，Ajax 负责将数据提交到服务器

通过Ajax提交表单数据

1. 监听表单提交事件

	$('#form1').submit(function(e) {
    alert('监听到了表单的提交事件')
})
	$(' #form1') .on( ' submit', function(e) {
    alert('监听到了表单的提交事件')
})

2. 阻止表单的提交行为
   当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault() 函数，来阻止表单的提交和页面的跳转

	$(' #form1').submit(function(e) {
    //阻止表单的提交和页面的跳转
    e.preventDefault()
})
	$(' #form1').on(' submit', function(e) {
    //阻止表单的提交和页面的跳转;
    e.preventDefault()
})

3. 快速获取表单数据
   serialize()函数；可以一次性获取到表单中的所有的数据。必须为每个表单元素添加name属性!

S (selector) .serialize ()