CODEWITHSUNDEEP
htmlcss
Omi in a hellcat
Omi in a hellcat

Reputation: 720

How do i place these 2 buttons in different forms, side by side

I have a login and register button both in different forms since the login input will use a post method while the register input will use a get method. Current outcome is this: https://i.sstatic.net/r1LqT.jpg

I just cant seem to find a way to float the 2 buttons beside eachother without changing the current layout of the forms, I want it to look like this: https://i.sstatic.net/Ching.jpg

Here is my code:

HTML:

<body>
  <div align="center" class="half">
    <h1>Login</h1>
    <form method="post" action="login">
      Username:
      <input type="text" name="username"> 
      <br>
      <br>
      Password:
      <input type="password" name="password">
      <br>
      <br>
      <div class="g-recaptcha" data-sitekey="6LdaVHYUAAAAAIxBlaPMTaE0Cuwhb5SK5Q10JKt1"></div>
      <br>
      <input type="submit" value="Login">
    </form>
    <form action="login" >
      <input type="submit" value="Register">
    </form>
    <br>
    <a href="./recover.html">Forgot your password?</a>
  </div>
</body>

CSS:

.half{
    vertical-align: middle;
}

Upvotes: 0

Views: 1470

Answers (5)

RG1nine
RG1nine

Reputation: 11

My button id is NewSession which is defined after the form i.e. it is outside the form but I want it exactly at the side of form input type submit so I did this... it works!!!

#NewSession{
margin-top: -40px;
float: right;
margin-right: 510px;
}

You need to adjust the margin though which is a trial and error method...

Upvotes: 0

Daniel
Daniel

Reputation: 11

Just remove the other form and put the Register button inside the other form and add display: inline block class or something to the both buttons.

Here is the code:

.half {
  vertical-align: middle;
}

input {
  display: inline-block;
}
<script src="https://www.google.com/recaptcha/api.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">

<head>
  <meta charset="ISO-8859-1">
  <title>Insert title here</title>
</head>

<body>

  <div align="center" class="half">
    <h1>Login</h1>
    <form method="post" action="login">
      Username:
      <input type="text" name="username"> <br><br> Password:
      <input type="password" name="password"><br><br>
      <div class="g-recaptcha" data-sitekey="6LdaVHYUAAAAAIxBlaPMTaE0Cuwhb5SK5Q10JKt1"></div>
      <br><input type="submit" value="Login">
      <input type="submit" value="Register">
    </form>
    <br>
    <a href="./recover.html">Forgot your password?</a>
  </div>

</body>

Upvotes: 0

Brady Ward
Brady Ward

Reputation: 134

I hope this helps! It's a fairly hacky way and I noticed upon zooming in the "Forgot Password" slowly moves off-center. I can play with it more if you'd like help trying to maintain it's position, otherwise, good luck :)

HTML:

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="styles.css"> 

<script src='https://www.google.com/recaptcha/api.js'></script>

<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<div align="center" class="half">
<h1>Login</h1>
<form method="post" action="login">
Username:
<input type="text" name="username"> <br><br>
Password:
<input type="password" name="password"><br><br>
<div class="g-recaptcha" data-sitekey="6LdaVHYUAAAAAIxBlaPMTaE0Cuwhb5SK5Q10JKt1"></div>
<br><input class="logreg" id="login" type="submit" value="Login">
</form>

<form action="login" >
<input class="logreg" id="register" type="submit" value="Register">
</form>
<br><br>
<a href="./recover.html">Forgot your password?</a>
</div>

</body>
</html>

CSS:

.half{
    vertical-align: middle;
}

.logreg
{
    float: left;
}

#login
{
    margin-left: 46%;
    margin-right: 10px;
}

a
{
    margin-left: 1%;
}

Upvotes: 1

elveti
elveti

Reputation: 2386

I moved your code to JSFiddle: https://jsfiddle.net/d0ugac8n/

If you only have the Button in the login form, you can do the following:

form[action*="login"] {
    display: contents;
}

This basically means "ignore the form itself and only show the child elements".

Word of warning display: contents is currently not hugely supported (IE, Edge of course). If you need better browser support, you can achieve something similar with

form[action*="login"] {
    display: inline;
}

Upvotes: 1

xxxmatko
xxxmatko

Reputation: 4142

It would be very nasty, when you do not want to change your layout, but you can position the other form like this:

form + form {
  display: inline-block;
  transform:translate(100%,-100%);
}
<div align="center" class="half">
<h1>Login</h1>
<form method="post" action="login">
    Username:
    <input type="text" name="username"> <br><br>
    Password:
    <input type="password" name="password"><br><br>
    <div class="g-recaptcha" data-sitekey="6LdaVHYUAAAAAIxBlaPMTaE0Cuwhb5SK5Q10JKt1"></div>
    <br><input type="submit" value="Login">
    </form>
    <form action="login" >
    <input type="submit" value="Register">
    </form>
<br>
<a href="./recover.html">Forgot your password?</a>
</div>

Upvotes: 1

Related Questions