Две кнопки в разных формах бок о бок

Question

У меня есть две формы. Одна форма для входа в систему и другая форма для сброса пароля. Теперь я хочу установить обе кнопки (логин, сброс пароля) бок о бок.

Но я не знаю, как это сделать.

И вот мой код:

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

Я надеюсь, что вы можете мне помочь.

Answer 1

Сохраните элементы кнопки в том же виде и добавьте атрибут form к другой кнопке, с которой вы хотите связаться с другим элементом формы.

От MDN:

Формы элемент, что кнопка связана с (его владельцем формы). Значение атрибута должно быть атрибутом id элемента в том же документе. Если этот атрибут не указан, элемент будет связан с элементом предка, если он существует. Этот атрибут позволяет связать элементы с элементами в любом месте документа, а не только как потомки элементов.

Пример:

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

<form id="secondForm"> 

</form> 

Answer 2

Если вы хотите поставить кнопки бок о бок вы можете добавить свойство CSS float: left; на кнопку входа, и он будет работать, но он будет работать только для этого пример.

<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>

Важное примечание: Я не думаю, что это хорошая идея, чтобы использовать форму только для кнопочного элемента, вы должны думать об использовании его в той же форме и применить поплавок: слева; свойство кнопок, это имеет больше смысла, и это лучше для вашего DOM.

Answer 3

Дайте вторую форму идентификатор (например, «Form2»), и добавьте этот CSS:

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

Answer 4

я изменил CSS из двух кнопок, теперь он работает, здесь вы можете запустить, ой смотрите сейчас он работает ,

я добавил style="float:left;" в <input type="submit" class="form-control btn-default" value="Login"/> и <input class="form-control btn-default" type="submit" value="Passwort vergessen"/>

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

Answer 5

лучший способ сделать

Вы не должны использовать вторую форму, чтобы сбросить первую форму.

Вы должны использовать только одну форму и добавить вход с type="reset"

Этим способом вы можете разместить кнопки side by side только в одной строке и reset работ!

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

Живая демо: https://jsfiddle.net/20o2ahnr/

Answer 6

<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>