form表单button点击刷新解决方案```js 请输入用户名请输入密码登录登录也是提交 ```5634343

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-form表单和按钮-默认刷新.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <!-- 
      点击按钮的时候  网页 以为你要做 整页数据提交 （在ajax出现之前 前端向后端提交数据的方式！！ ）

      1 如果按照提交数据给服务器来说  现在的前端 不需要用到 form表单和input标签的name属性 
      2 如果网页的表单 input特别多  form表单和name有另外一个作用 
         可以快速来获取表单的数据 

      
      3 解决 form表单和按钮在一起刷新的问题 
        1  type="button"
        2  刷新 是form 的默认行为  - 阻止 默认行为  方式2 
           1 form 有一个事件  submit 吗 （当页面执行提交数据）

     -->
    <form>
      <input type="text" name="username" placeholder="请输入用户名" />
      <input type="text" name="password" placeholder="请输入密码" />

      <button type="submit">登录</button>
      <button>登录</button>
      <input type="submit" value="也是提交">
    </form>
    <script>
      const form = document.querySelector('form');
      // const button = document.querySelector('button');
      // button.addEventListener('click', function () {
      // console.log('按钮被点击啦');
      // });

      form.addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止 默认行为
        console.log('表单提交 但是不刷新');
      });
    </script>
  </body>
</html>