必需属性在输入标签中不起作用答案

【问题标题】：Required attribute not Working in input tag必需属性在输入标签中不起作用
【发布时间】：2020-07-01 09:46:50
【问题描述】：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sign Up</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="sign-up-form">
      <style>
        body {
          background-image: url("background.jpg");
        }
      </style>
      <img src="./assets/user-Icon.png" alt="User Icon" />
      <h1>Sign Up Now</h1>
      <form action="/" method="GET">
        <input
          type="email"
          class="input-box"
          placeholder="Your E-Mail"
          required
        />
        <input
          type="password"
          class="input-box"
          placeholder="Your password"
          required
        />
        <p>
          <span
            ><input type="checkbox" name="Terms and Conditions" id="T&C"
          /></span>
          I agee to the Terms and Conditions
        </p>
        <a href="./home.html"
          ><button type="button" class="signup-btn">Sign Up</button></a
        >
        <!-- <hr>
            <p class="or">OR</p>
            <button type="button" class="twitter-btn">Log In with Twitter</button>
            <p>Do you have an account <a href="./login.html">Sign In</a></p> -->
      </form>
    </div>
  </body>
</html>

我正在尝试创建一个注册表单，但在单击注册按钮时，它会将我重定向到主页即使字段为空...我尝试使用所需的标签，但它也不起作用。请帮忙！

【问题讨论】：

标签： html required

【解决方案1】：

您已将提交按钮放置在链接 (<a href="...">) 中。当用户点击该区域时，此链接优先于按钮。

按钮也不会提交表单。为此，它需要 type 或 submit：

<button type="submit">Sign Up</button>

【讨论】：

但是如何更改按钮的目标站点？
用action="target-url"属性包围<form>元素，developer.mozilla.org/en-US/docs/Web/HTML/Element/form

【解决方案2】：

由于您将按钮包装在将您重定向到不同页面的链接中，因此您应该使用<input type='submit' value='submit btn' /> 提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="sign-up-form">
        <style>
            body {
              background-image: url('background.jpg');
            }
            </style>
        <img src="./assets/user-Icon.png" alt="User Icon">
        <h1>Sign Up Now</h1>
        <form action="/" method="GET">
            <input type="email" class="input-box" placeholder="Your E-Mail" required/>
            <input type="password" class="input-box" placeholder="Your password" required/>
            <p><span><input type="checkbox" name="Terms and Conditions" id="T&C"></span> I agee to the Terms and Conditions</p>
            <a href="./home.html">home link</a>
            
            <input type="submit" class="signup-btn" value='Sign Up' /> 
            <!-- <hr>
            <p class="or">OR</p>
            <button type="button" class="twitter-btn">Log In with Twitter</button>
            <p>Do you have an account <a href="./login.html">Sign In</a></p> -->
        </form> 
    </div>
</body>
</html>

【讨论】：

谢谢！但是如何更改按钮本身重定向我的目标站点？
将其添加到表单标签中的action="here"中。