面试题准备（二十六）：form 表单

概述

网页中的表单主要负责数据采集，通过 form 标签操作，目的是把采集到的信息交给服务器处理

<!-- 一个简单的 form 表单 -->
<form>
  <input type="text" name="email_or_mobile">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

表单由三部分组成

• 表单标签
• 表单域
• 表单按钮

form 表单

该标签用于采集数据，它的属性用来规定怎么把采集到的数据发送到服务器

属性	值	描述
action	URL	向何处提交表单数据
method	get、post	以什么方式提交表单
enctype	application/x-www-form-urlencoded multipart/form-data	如何对表单数据编码
target	_blank _self _parent _top	在何处打开 action

action

• 后端提供一个供接收表单数据的 URL，填入 action 中
• 未指定 action，则默认值为当前页面 URL
• 提交表单后会立即跳转到 action URL

target

常用的是 _blank _self

• _blank 在新窗口打开
• _self 在当前窗口打开

method

• 默认值为 get
• get 适合提交少量的简单的数据
• post 适合用来提交大量的复杂的数据，或者文件数据 — 常用

enctype

常用

• application/x-www-form-urlencoded 默认值，表示在发送前编码所有字符
• multipart/form-data 不对字符编码，适用于包含文件上传控件的表单

解决表单同步提交

如果使用表单提交数据

1. 页面会发生跳转
2. 跳转之前的页面状态会消失

解决方法

• 表单仅用于采集数据
• 数据提交工作交由 Ajax 完成

监听表单提交事件

在 jQuery 中有两种方式监听表单提交事件

$('#myform').submit(e => {
	console.log('表单提交')
})
$('#myform').on('submit', e => {
	console.log('表单提交')
})

阻止默认行为

需要阻止表单提交后的页面跳转，使用 event.preventDefault()

$('#myform').submit(e => {
	e.preventDefault()
	console.log('表单提交')
})
$('#myform').on('submit', e => {
	e.preventDefault()
	console.log('表单提交')
})

快速获取表单中数据

使用 jQuery 提供的 serialize() 函数，可以一次性获取表单中全部数据

$('#myform').serialize()

快速清空表单

使用原生的 form.reset 函数

const form = document.getElementsbyTagName('form')[0]
form.reset()

// 或者用 jQuery
$('#myform')[0].reset()