form标签属性

表单标签通常由

标签包裹

action

表单的 action属性表示此表单将要提交的地址，这个属性的属性值为一个后端提供的URL地址，通过此地传输的表单信息交由后台进行处理
如果form表单没有添加action属性，即默认以当前页面地址传输数据

注意：当提交表单后，会立即跳转到 action 属性指定的 URL地址

target

在

标签中，target的用法和表签类似，都是设置以何种方式来打开action URL
此属性有五个可选值，在没有添加此属性情况下，默认为_self，表示在当前页面打开action URL

_blank : 在新的空白页面打开
_self ：在当前页面打开
_parent ：在父框架集中打开（很少用）
_top ：在整个窗口中打开（很少用）
framename ：在指定的框架中打开（很少用）

method

这个属性表示通过何种方式将数据提交到action URL

此属性拥有两个可选值：

   - get：为默认情况，适合将少量且简单的数据提交到action URL
   - post：适合提交大量且复杂的数据，或者包含文件上传的数据

enctype

enctype属性用来规定在发送表单数据之前对数据进行如何编码
这个属性拥有三个可选值：

  - application/x-www-form-urlencoded默认为此属性，表示发送前编码所有祖字符
  - `multipart/form-data`：此属性值表示不对字符进行编码，当对文件进行上传时必须选择此属性值
  - `text/plain `：将空格符转换为”+“但不对特殊字符编码（仅仅只是对空格符进行转换）

表带同步提交及其缺点

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

表单同步提交的缺点

<form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
<form> 表单同步提交后，页面之前的状态和数据会丢失

如何解决呢？
表单只复杂采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据

通过jQuery封装的Ajax函数来控制表单提交数据

监听表单提交事件

两种方式监听表单提交事件

<form id="form1">
   <input type="submit" value="提交">
  </form>
$('#form1').submit(function(){ //
  alert('监听到了表单的提交事件')
})
$('#form1').on('submit',funtion(){
alert('监听到了表单的提交事件')         
               })

阻止表单默认提交行为

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

$('#form1').submit(function(e){ 
  //阻止表单提交和页面跳转
  e.preventDefault() //或者 return false 阻止默认事件
})
$('#form1').on('submit',funtion(e){
 e.preventDefault()         
               })

快速获取表单数据

serialize()函数

为了简化表单中数据的获取操作，jQuery提供了 serialize() 函数，语法格式如下：

$(selector).serialize()

优点：可以一次性获取全部的表单数据

例子

<form id="form1">
   <input type="text" name="username">
   <input type="password" name="password">
   <button type="submit">提交</button>
</form>
$("#form1").serialize()
//调用结果
//username=用户名的值&password=密码的值

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性

JavaScript 基础

2. form表单