概述

网页中的表单主要负责数据采集，通过 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 不对字符编码，适用于包含文件上传控件的表单

解决表单同步提交

如果使用表单提交数据

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

解决方法

表单仅用于采集数据
数据提交工作交由 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()

面试题准备（二十六）：form 表单相关推荐

第十篇 Form表单
Form表单阅读目录(Content) Form介绍普通的登录使用form组件 Form那些事儿常用字段演示校验使用Django Form流程补充进阶应用Bootstrap样式批量添 ...
ASP.NET 安全认证（二）——灵活运用 Form 表单认证中的 deny 与 allow 及保护 .htm 等文件 ....
话说上回,简单地说了一下 Form 表单认证的用法.或许大家觉得太简单,对那些大内高手来说应该是"洒洒水啦""小 Kiss 啦(小意思)".今天咱们来点的花样吧 ...
go实践二十 web开发--表单唯一token 表单验证防止xss攻击上传文件 cookie处理
新建一个 testform2.gtpl 文件,内容如下: <!doctype html> <html lang="en"> <head>< ...
form表单同时提交带文本和图片的数据
方法一:使用ajax异步提交此种方法的好处是可以回调响应结果. html代码: <form action="${basePath}/save" method="p ...
窗口消息——Windows核心编程学习手札之二十六
窗口消息 --Windows核心编程学习手札之二十六 Windows允许一个进程至多建立10000个不同类型的用户对象(user object):图符.光标.窗口类.菜单.加速键表等,当一个线程调用一 ...
FreeSql （二十六）贪婪加载 Include、IncludeMany、Dto、ToList
贪婪加载顾名思议就是把所有要加载的东西一次性读取. 本节内容为了配合[延时加载]而诞生,贪婪加载和他本该在一起介绍,开发项目的过程中应该双管齐下,才能写出高质量的程序. Dto 映射查询 Select ...
FreeSql （二十）多表查询 WhereCascade
WhereCascade 多表查询时非常方便,有了它可以很轻松的完成类型软删除,租户条件的功能. IFreeSql fsql = new FreeSql.FreeSqlBuilder().UseCon ...
零基础带你学习MySQL—foreign key 外键（二十六）
零基础带你学习MySQL-foreign key 外键(二十六) -- 外键演示 -- 创建主表 my_class CREATE TABLE my_class ( id INT PRIMARY KE ...
JavaScript学习（六十八）—表单校验案例
JavaScript学习(六十八)-表单校验案例学习内容 (一).如何获取页面的元素-利用id获取格式:var 变量名称 =document.getElementById('要获取的元素的id的值 ...

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

文章目录

概述

form 表单

action

target

method

enctype

解决表单同步提交

监听表单提交事件

阻止默认行为

快速获取表单中数据

快速清空表单

面试题准备（二十六）：form 表单相关推荐

最新文章

热门文章