1.什么是表单
表单在网页中主要负责数据采集功能。HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理。
表单的组成部分
表单标签
表单域
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮
2.<form>标签的属性
属性 | 值 | 描述 |
---|---|---|
action | URL地址 | 规定当提交表单时,向何处发送表单数据 注意:当提交表单后,页面会立即跳转到 action 属性指定的 URL 地址 |
method | get或post | 规定以何种方式把表单数据提交到 action URL |
enctype | application/x-www-form-urlencoded multipart/form-data text/plain | 规定在发送表单数据之前如何对其进行编码 |
target | _blank _self | 规定在何处打开 action URL(新窗口,当前窗口) |
target:默认情况下target 的值是 _self 表示在同一个页面打开;
_blank 在新的窗口打开
method:默认情况下,method 的值为 get
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。(比较隐秘,提高数据的安全性)
在实际开发中,<form> 表单的 post 提交方式用的最多,很少用 get。例如登录、注册、添加数据等表单操作,都需要使用 post 方式来提交表单。
enctype:默认情况下,enctype 的值为 application/x-www-form-urlencoded,表示在发送前编码所有的字符
在涉及到文件上传的操作时,必须将 enctype 的值设置为 multipart/form-data,其他情况不写,默认就行
<form action="/login" target="_blank" method="get" enctype="application/x-www-form-urlencoded">
<input type="text" name="email_or_mobile" />
<input type="password" name="password" />
<input type="checkbox" name="remember_me" checked />
<button type="submit">提交</button>
</form>
3.表单的同步提交及缺点+解决
如果使用表单提交数据,则会导致以下两个问题:
页面会发生跳转
页面之前的状态和数据会丢失
解决方案:表单只负责采集数据,Ajax 负责将数据提交到服务器
$(function () {
// 第一种方式
// $('#f1').submit(function () {
// alert('监听到了表单的提交事件')
// })
// 第二种方式 按钮可以绑定click事件,表单可以绑定submit事件
$('#f1').on('submit', function () {
alert('监听到了表单的提交事件2')
阻止表单的默认提交行为
e.preventDefault()
})
})
4. serialize()函数 快速获取表单中的数据
注意:在使用 serialize() 函数快速获取表单数据时,必须为每个表单元素添加 name 属性!
<form id="form1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
$('#form1').serialize()
// 调用的结果:
// username=用户名的值&password=密码的值
5.快速清空表单
$('#formAddCmt')[0].reset()
将JQ对象变成DOM对象,调用reset函数,重置表单