使用表单而不是 div答案

【问题标题】：Using form instead of div使用表单而不是 div
【发布时间】：2019-07-16 11:47:12
【问题描述】：

我有登录页面。我在其中使用表单。它从来没有奏效。后来我尝试了 div ，它工作正常。谁能告诉我为什么它不适用于表单。

编辑：我正在尝试使用 firebase 登录。使用表单时会出错。但使用 div 时会登录。

<div class="login-clean" id="login_div">
  <form method="post">
    <h2 class="sr-only">Login Form</h2>
    <div class="illustration"><i class="icon ion-ios-navigate"></i></div>
    <div class="form-group"><input class="form-control" type="email" name="email" id="email_field" placeholder="Email"></div>
    <div class="form-group"><input class="form-control" type="password" name="password" id="password_field" placeholder="Password"></div>
    <div class="form-group"><button class="btn btn-primary btn-block" onclick="login()" type="submit">Log In</button></div><a href="#" class="forgot">Forgot your email or password?</a>
  </form>
</div>

function login(){
  var userEmail = document.getElementById("email_field").value;
  var userPass = document.getElementById("password_field").value;

  firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;

    window.alert("Error : " + errorMessage);

    // ...
  });
}

【问题讨论】：

不工作/工作是什么意思？
您的表单缺少action 属性。如果您使用的是 JavaScript，请添加您的 js 代码。
不起作用并不是对问题的解释。
对不起，“它从来没有用过”并没有完全帮助。什么没用？ 应该做什么？ 在做什么它不应该做的事情？帮助我们为您提供帮助！
如果您将表单复制到一个干净的文件中，您会看到在完成输入并按“提交”后，它将重新加载页面。所以表格是有效的。由于您的 onclick 按钮中有一个 login() 函数，因此您应该在此处发布您的 js 代码。有问题。

标签： javascript html firebase firebase-authentication

【解决方案1】：

表单中的提交按钮将提交表单。因此，在触发 onclick 处理程序后，即调用 login。页面使用提交的表单值刷新。

为了防止按钮在登录后提交表单，将其更改为：

<input class="btn btn-primary btn-block" onclick="login()" type="button">

【讨论】：