1.1什么是表单
表单在网页中主要负责数据采集功能。html标签中的<form>标签,就是用于采集用户输入的信息,并通过<from>标签中的提交操作,把采集到的信息提交到服务器中
1.2表单的组成部分:
1.2.1表单标签
1.2.2表单域:文本框,密码框 ,复选框,文件上传框等等。。
1.2.3表单按钮:提交按钮
1.3<from>标签的属性
1.3.1action属性规定当提交表单的时候,向何处发送表单数据
通俗来讲,如果action属性的值为一个url地址,专门收集表单提交过来的数据,如果其并没有设置action的属性,那么将提交过来的数据交给当前页面,即其默认属性值为当前页面的url地址。(当表单提交之后,页面会自动跳转到action指定的url地址):实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/login" target="_blank" method="get">
<input type="text" name="email_or_mobile">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
</body>
</html>
1.3.2target规定在哪儿打开在action属性的url地址对应的页面:
_self,表示在相同的框架中打开action URL
_blank在新窗口中打开
1.3.4 methed提交方法
1.3.4.1get:通过url地址的方式提交地址,地址栏存在数据
1.3.4.2post:地址栏中不存在数据且post适合提交大量的复杂的包含文件上传的数据
例如登录注册 添加等等;
1.3.5entyce属性规定发送表单数据之前如何对数据进行编码(如果在不涉及文件上上传操 作,则设置为默认值)
1.3.5.1值:默认值(application/x-www-form-urlencoded):再发送前编码所有字符
1.3.5.2 multipart/from-data:不对 字符编码,在使用包含文件上传控件表单时,必须使用 该值
1.4表单的同步提交及缺点
1.4.1<form>表单同步提交之后,整个页面会发生
目录
跳转,
1.4.2表单之前的的状态和数据会丢失
1.4.3解决方案让表单来采集数据,用ajax来提交数据到服务器
<form action="/login" target="_blank" method="post" id="f1">
<input type="text" name="email_or_mobile">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script>
//第一种提交方式
// $(function(){
// $('#f1').submit(function(){
// })
// })
//第二种方式
$(function(){
$('f1').on('sumbit',function(e){
e.preventDefault();
//快速获取表单中的数据,采用serialize()函数,但是必须为每个表单元素添加name属性
var data=$('#f1').serialize();
})
})
</script>