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>
2586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
