一.什么是表单？

表单在网页中主要负责数据采集功能，html中的form标签，就是用于采集用户输入的信息，并且

通过from标签的提交操作，把采集到的信息提交到服务器进行处理

二.表单的组成部分

1.表单域:<from> </from>

2.表单标签

3.提示信息

三.表单中的action属性是用来干什么的？

1.作用:action属性用来规定当提交表单时，向何处发送表单数据

2.当<form>表单在未指定action属性值的情况下，会把数据提交到当前的默认地址

3.当在指定url地址的时候，会把指定的数据提交的窗口

四.target属性

1.如果不设置，默认在当前窗口进行打开_self

2. 设置在新的窗口打开， _blank

五.method属性

1.method属性用来规定以何种方式进行提交

2.它的可选值有两个 get post

get 方式以url的形式进行提交

post 把数据提交到 Form Data 中

六.表单的同步提交

1.通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为

2.缺点: 跳转到 action URL所指向的地址

页面之前的状态和数据会丢失

3.解决方案 :表单只负责采集数据，Ajax负责将数据提交到服务器

七.代码演示

1.当给了action提交的地址，

<form action="www.baidu.com" id="qq" method="">
    姓名: <input type="text" name="name" id="">
    电话: <input type="text" name="phone">
    <input type="submit" id="btn">
  </form>

  <script>
    $('#qq').on('submit', function (e) {
    
      var aa = $('#qq').serialize()
      console.log(aa);

    })

解析:会跳转到这个地址，页面之前的状态和数据会丢失，为了解决这一问题，表单只负责采集数据，Ajax负责将数据提交到服务器。

2.利用jq获取表单里面的数据的案例

<!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>
  <script src="./jquery.min.js"></script>
</head>

<body>
  <form action="" id="qq" method="">
    姓名: <input type="text" name="name" id="">
    电话: <input type="text" name="phone">
    <input type="submit" id="btn">
  </form>

  <script>
    $('#qq').on('submit', function (e) {
      e.preventDefault()
      var aa = $('#qq').serialize()
      console.log(aa);

    })
  </script>
</body>

</html>

解析：一定要给表单里面的input添加name，否则无法进行收集 , 通过 e.preventDefault() 阻止表单的默认提交，通过jq中的serialize（）函数获取用户提交的数据，然后通过发送ajax请求，将数据提交给服务器。

新手小白多多支持

探索表单里面的奥秘