Question

<!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>

我正在尝试创建一个注册表单，但是单击“注册”按钮后，它会将我重定向到主页，即使字段为空...我也尝试使用必需的标记，但它也无法正常工作。请帮忙！

Answer 1

您已将“提交”按钮放置在链接（<a href="...">）内。当用户单击该区域时，此链接优先于按钮。

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

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

Answer 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>

必需属性在输入标记中不起作用

2 个答案: