CODEWITHSUNDEEP
htmlcss
user6691398
user6691398

Reputation:

Two buttons in different forms side by side

i have two forms. One form for login and the other form for reset the password. Now i want to set the both buttons (login, password reset) side by side.

But i don't know, how to do that.

Here is a picture of my layout And here is my code:

<form action="login" method="POST">
	<div class="row">
		<div class="col-md-2">Username:</div>
		<div class="col-md-4 input-group input-group-sm">
			<span class="input-group-addon" id="important">
              <span class="glyphicon glyphicon-play" />
              <input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
            </span>
		</div>
	</div>
	<div class="row">
		<div class="col-md-2">Passwort:</div>
		<div class="col-md-4 input-group input-group-sm">
          <span class="input-group-addon" id="important">
			<span class="glyphicon glyphicon-play" />
            <input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
          </span>
		</div>
	</div>
	<div class="row">
		<div class="col-md-2 input-group-sm">
			<input type="submit" class="form-control btn-default" value="Login" />
		</div>
	</div>
</form>
<form action="reset" method="POST">
	<div class="row">
		<div class="col-md-2 input-group-sm">
			<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
		</div>
	</div>
</form>

I hope you can help me.

Upvotes: 0

Views: 3347

Answers (6)

EA-Lille
EA-Lille

Reputation: 561

Better way to do

You should not use a second form to reset your first form.

You have to use only one form and add an input with type="reset"

By this way you can place your buttons side by side in only one line and reset works !

<div class="col-md-2 input-group-sm">
    <input type="submit" class="form-control btn-default" value="Login" />
    <input type="reset" value="Reset"/>
</div>

Live demo : https://jsfiddle.net/20o2ahnr/

Upvotes: 0

Enmanuel Duran
Enmanuel Duran

Reputation: 5118

If you want to put the buttons side by side you can add the css property float: left; to the login button and it'll work, but it'll work only for this example.

<form action="login" method="POST">
  <div class="row">
    <div class="col-md-2">Username:</div>
    <div class="col-md-4 input-group input-group-sm">
      <span class="input-group-addon" id="important">
              <span class="glyphicon glyphicon-play" />
              <input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
            </span>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">Passwort:</div>
    <div class="col-md-4 input-group input-group-sm">
          <span class="input-group-addon" id="important">
      <span class="glyphicon glyphicon-play" />
            <input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
          </span>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 input-group-sm">
      <input type="submit" class="form-control btn-default" value="Login" style="float:left; />
    </div>
  </div>
</form>
<form action="reset" method="POST">
  <div class="row">
    <div class="col-md-2 input-group-sm">
      <input class="form-control btn-default" type="submit" value="Passwort vergessen" />
    </div>
  </div>
</form>

Important note: I don't think it's a good idea to use a form only for a button element, you should think of using it in the same form and apply the float: left; property to the buttons, it makes more sense and it's better for your DOM.

Upvotes: 0

Shruti Purushan
Shruti Purushan

Reputation: 103

<style>
#resetForm {
    position: relative;
    bottom: 37px;
    left: 55px;

}
</style>
<form action="login" method="POST">
 <div class="row">
  <div class="col-md-2">Username:</div>
  <div class="col-md-4 input-group input-group-sm">
   <span class="input-group-addon" id="important">
              <span class="glyphicon glyphicon-play" />
              <input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
            </span>
  </div>
 </div>
 <div class="row">
  <div class="col-md-2">Passwort:</div>
  <div class="col-md-4 input-group input-group-sm">
          <span class="input-group-addon" id="important">
   <span class="glyphicon glyphicon-play" />
            <input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
          </span>
  </div>
 </div>
 <div class="row">
  <div class="col-md-2 input-group-sm">
   <input type="submit" class="form-control btn-default" value="Login" />
  </div>
 </div>
</form>
<form action="reset" method="POST">
 <div class="row" id="resetForm">
  <div class="col-md-2 input-group-sm">
   <input class="form-control btn-default" type="submit" value="Passwort vergessen" />
  </div>
 </div>
</form>

Upvotes: 0

yash
yash

Reputation: 2271

i changed css of two buttons, now it works, here you can run, nd see it's working now.

i added style="float:left;" in <input type="submit" class="form-control btn-default" value="Login"/> and <input class="form-control btn-default" type="submit" value="Passwort vergessen"/>

<form action="login" method="POST">
	<div class="row">
		<div class="col-md-2">Username:</div>
		<div class="col-md-4 input-group input-group-sm">
			<span class="input-group-addon" id="important">
              <span class="glyphicon glyphicon-play" />
              <input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
            </span>
		</div>
	</div>
	<div class="row">
		<div class="col-md-2">Passwort:</div>
		<div class="col-md-4 input-group input-group-sm">
          <span class="input-group-addon" id="important">
			<span class="glyphicon glyphicon-play" />
            <input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
          </span>
		</div>
	</div>
	<div class="row">
		<div class="col-md-2 input-group-sm">
			<input type="submit" class="form-control btn-default" value="Login" style="float:left;" />
		</div>
	</div>
</form>
<form action="reset" method="POST">
	<div class="row">
		<div class="col-md-2 input-group-sm">
			<input class="form-control btn-default" type="submit" value="Passwort vergessen" style="float:left;" />
		</div>
	</div>
</form>

Upvotes: 0

MJH
MJH

Reputation: 2307

Give your second form an id (e.g. "form2"), and add this CSS:

#form2 {
    position: relative;
    bottom: 25px;
    left: 55px;
}

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

Keep the button elements in same form and add form attribute to the other button to which you want to associate with other form element.

From MDN:

The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element will be associated to an ancestor element, if one exists. This attribute enables you to associate elements to elements anywhere within a document, not just as descendants of elements.

Example:

<form id="firstForm">
     <button>Submit First form</button>
     <button form="secondForm">Submit Second form</button>
</form>

<form id="secondForm">

</form>

Upvotes: 1

Related Questions