两个不同形式的按钮并排

Question

我有两种形式。一种用于登录的表单，另一种用于重置密码的表单。 现在我想并排设置两个按钮（登录，密码重置）。

但我不知道，怎么做。

这是我的代码：

{{1}}

我希望你能帮助我。

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;添加到登录按钮，它可以正常工作，但它只适用于此示例。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

重要提示： 我不认为将表单仅用于按钮元素是个好主意，你应该考虑以相同的形式使用它并应用float：left;属性到按钮，它更有意义，对你的DOM更好。

Answer 3

为您的第二个表单添加ID（例如＆＃34; form2＆＃34;），并添加此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"/>

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>