How do I put Login and register buttons side by side? .... I want register button to point out to register.php HTML/CSS

Question

Login form

How do I get login and register buttons to align side by side using HTML and CSS? I want the register button to point out to register.php

I have tried to create register button with element, but it doesn't seem to work. If I try to put display:inline; it doesn't put the two buttons side by side.

*{
    font-family: 'Montserrat', sans-serif;

}

body,
html{
    margin: 0px;
    padding: 0px;
    background-color: #0E0E0E;
}

.login-box{
    background-color: #010100;
    width: 400px;
    height: 388px;
    margin: 250px auto;
}

.login-box h1{
    color: #FFFFFF;
    margin:0px 35px;
    margin-bottom: 35px;
    padding-top: 25px;
}

.login-box form input{
    display: block;
    width: 324px;
    height: 50px;
    margin-left: 35px;
    margin-right: 41px;
    margin-bottom: 24px;
}

#submit{
    display: inline;
    color: #010100;
    background-color: #E4FF77;
    border: 2px solid transparent;
    border-radius: 12px;
    width: 150px;
    height: 50px;
    margin-left: 24px;
    margin-right: 41px;
    margin-bottom: 33px;
}

#pwdreset{
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    margin: 20px 0px;
    margin-left: 225px;
}

#register-button {
    display: inline;
    color: #010100;
    background-color: #E4FF77;
    border: 2px solid transparent;
    border-radius: 12px;
    width: 150px;
    height: 50px;
    margin-left: 24px;
    margin-right: 41px;
    margin-bottom: 33px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="signin.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div class="login-box">

            <h1>Login</h1>

            <form class="login-form" action="login.php" method="post">
                <input id="username" type="text" name="username" placeholder="Email" >
                <input id="password" type="password" name="password" placeholder="Password">
                <a id="pwdreset" href="#">Forgot password?</a>
                <input id="submit" type="submit" name="submit" value="Login">
            </form>

            <form action="https://www.w3docs.com/">
                <input id="register-button" type="submit" name="register" value="Register">
            </form>

        </div>

    </body>


</html>

score 0 · Answer 1 · answered Oct 17 '20 at 19:01

Use the formaction attribute, put the two buttons in the same form as follow.
This is HTML5, on IE works on version 10 and more.

    <form class="login-form" action="login.php" method="post">
        <input id="username" type="text" name="username" placeholder="Email" >
        <input id="password" type="password" name="password" placeholder="Password">
        <a id="pwdreset" href="#">Forgot password?</a>
        <input id="submit" type="submit" name="submit" value="Login">
        <input formaction="/register.php" id="register-button" type="submit" name="register" value="Register" >
    </form>

score 0 · Answer 2 · answered Oct 17 '20 at 19:03

0

I would advice to add position: relative; to class: .login-box.

And set a class to your register form like:

.form-2{
  position:absolute;
  bottom: 0;
  right:0;
}

answered Oct 17 '20 at 19:03

MaxiGui

6,190
4
16
33

score 0 · Answer 3 · answered Oct 17 '20 at 19:03

here you can wrap your second form and button in first form into new div with style display flex, and you will have side by side buttons.

* {
  font-family: "Montserrat", sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0e0e0e;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
}

.login-box h1 {
  color: #ffffff;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

#pwdreset {
  display: block;
  color: #ffffff;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

.submits {
  display: flex;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div class="login-box">

            <h1>Login</h1>

            <form class="login-form" action="login.php" method="post">
                <input id="username" type="text" name="username" placeholder="Email" >
                <input id="password" type="password" name="password" placeholder="Password">
                <a id="pwdreset" href="#">Forgot password?</a>
                <div class="submits">

                  <input id="submit" type="submit" name="submit" value="Login">
                  <form action="https://www.w3docs.com/">
                    <input id="register-button" type="submit" name="register" value="Register">
                </form>
                </div>
            </form>

            

        </div>

    </body>


</html>

@TomášHanečák you might want to check out this [can html forms be nested ?](https://stackoverflow.com/questions/379610/can-you-nest-html-forms) — Pranav Rustagi, Oct 17 '20 at 19:08

score 0 · Accepted Answer · answered Oct 17 '20 at 19:04

Is this what you desire ?

* {
  font-family: 'Montserrat', sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0E0E0E;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
  position: relative;
}

.login-box h1 {
  color: #FFFFFF;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
}

#pwdreset {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<div class="login-box">

  <h1>Login</h1>

  <form class="login-form" action="login.php" method="post">
    <input id="username" type="text" name="username" placeholder="Email">
    <input id="password" type="password" name="password" placeholder="Password">
    <a id="pwdreset" href="#">Forgot password?</a>
    <input id="submit" type="submit" name="submit" value="Login">
  </form>

  <form action="https://www.w3docs.com/">
    <input id="register-button" type="submit" name="register" value="Register">
  </form>

</div>

How do I put Login and register buttons side by side? .... I want register button to point out to register.php HTML/CSS

4 Answers4