时间戳

首页 > 解决方案 > 如何使不同形式的按钮彼此相邻？

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

问题描述

首先，我为此使用了物化。我正在制作两个按钮，一个用于登录，一个用于注册，两者都采用不同的形式，我这样做了，所以注册按钮将直接指向注册页面而不是由 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>

我希望注册按钮位于登录按钮旁边，但它不会那样显示在此处输入图像描述

标签： phphtmlmaterialize

解决方案

您可以创建 2 个不带 type="submit" 的按钮并添加一些 jQuery，如下所示：

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

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

这样，您可以标记您的按钮以根据表单 ID 执行提交。现在您的按钮可以位于页面上的任何位置。确保您已分配表单和按钮 ID

推荐阅读