如何使不同形式的按钮彼此相邻？

Question

Firstly, I'm using materialize for this.I'm making two buttons, one for sign in and one for sign up, both are in different forms i made it that way so the sign up button will direct to the register page without being prevented by the required attribute, the problem is, because both buttons come from different form somehow they wont be next to each other and i don't know why is that, i need both to be next to each other (the sign up button to be next to the sign in button)首先，我为此使用materialize。我正在制作两个按钮，一个用于登录，一个用于注册，两者都在不同的forms中，我这样做了，所以注册按钮将直接指向注册页面而不是由 required 属性阻止，问题是，因为两个按钮来自不同的形式，它们不会彼此相邻，我不知道为什么，我需要两个按钮彼此相邻（注册按钮在登录按钮旁边）

<!DOCTYPE html>
<html>
<head>
    <title>Sanrio Merch</title>
    <link rel="stylesheet" type="text/css" href="css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta  name="viewport" content="width=device-width,initial-scale=1.0"/>
    <style type="text/css">
        body{
            background-image: url("assets/bg.gif");
            background-size: 100% 120vh;
            background-repeat: no-repeat;
            }
        .card{
            background: rgba(0,0,0,.4);
            width: 40%;
            height: 75vh;
            margin: 9% auto;
            }
        label,input{
            color: white;
            font-size: 1em;
        }
        input{
            border-bottom: 1px solid white !important;
        }
        input:focus{
            box-shadow: 0 1px 0 0 white !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <form action="login.php" method="post">
            <div class="card-action white-text brown">
            <h3>SIGN IN</h3>
            </div>
            <div class="card-content">
              <div class="form-field">
              <label for="username">Username</label>
              <input type="text" id="username" name="username" placeholder="username" required="">
              <br><br>
              <label for="password">Password</label>
              <input type="password" id="password" name="pass" placeholder="password" required="">
              </div><br>
              </div><br><br>
              <div class="form-field center-align">
              <button class="btn-large brown" name ='sigin'style="margin-right: 2%;" type="submit" name="submit">Sign In</button>
              </div>
            </form>
            <form action="login.php" method="post">
            <button class="btn-large brown" name="register">Sign Up</button>
            </form>
        </div>
        </div>
    </div>
</body>
</html>

I expect the sign up button to be next to the sign in button but it doesnt display that way我希望注册按钮位于登录按钮旁边，但它不会那样显示

Answer 1

You can create 2 buttons without the type="submit" and add some jQuery like so:您可以创建 2 个不带 type="submit" 的按钮并添加一些 jQuery ，如下所示：

$( "#button_sign_up" ).click(function() {
  $( "#form_sign_up" ).submit();
});

$( "#button_sign_in" ).click(function() {
  $( "#form_sign_in" ).submit();
});

This way you mark your button to perform a submit based on an form ID.这样，您可以标记您的按钮以根据表单 ID 执行提交。 Now your buttons can be anywhere on the page.现在您的按钮可以位于页面上的任何位置。 Make sure you have both form and button ID's assigned确保您已分配表单和按钮 ID

如何使不同形式的按钮彼此相邻？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-10-31 12:19:20

如何使不同形式的按钮彼此相邻？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-10-31 12:19:20

解决方案1
1 已采纳 2019-10-31 12:19:20