表单组内的引导表单

Question

是否可以在 Bootstrap 的水平表单内插入带有选择元素的表单。

我需要在表单组内插入一个带有选择元素的表单。

引导code here

Note: Bootply messes the code and remove some form tags, so copy the code below.

元素变得不对齐的问题。这两个在代码中选择 Country 和 Language 没有对齐，并在它们之后弄乱了代码。

代码又来了：

<div class="container-fluid">

<form class="form-horizontal" role="form">

  <div class="form-group">
    <label class="col-sm-4 control-label" for="fname">First name:</label>
    <div class="col-sm-8">
      <input class="form-control" name="fname" id="fname" type="text">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="lname">Last name:</label>
    <div class="col-sm-8">
      <input class="form-control" name="lname" id="lname" type="text">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="country">Country:</label>
    <div class="col-sm-8">
       <form>
          <select name="country" id="country" class="form-control">
            <option value="US">US</option>
            <option value="UK">UK</option>
            <option value="CA">CA</option>
          </select>
      </form>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="language">Language:</label>
    <div class="col-sm-8">
       <form>
          <select name="language" id="language" class="form-control">
            <option value="en-US">en-US</option>
            <option value="en-UK">en-UK</option>
            <option value="fr">FR</option>
          </select>
      </form>
    </div>
  </div>
 </form>
</div>  

Answer 1

您的代码中有多个 <form></form> 值。由于这只是一种形式，因此您需要的只是开头的表单类和结尾的关闭。这就是它变得错位的原因。看看我的小提琴 http://jsfiddle.net/jxe78828/

Answer 2

根据HTML5 specs，您不能将一个表单嵌套在另一个表单中：

4.10.3 表单元素

...

内容模型： 流式内容，但没有表单元素后代。

Bootstrap 的设计假设您将使用有效的 HTML 结构。因此，您可能需要重新考虑您的 HTML 结构，以及是否有其他方法可以完成您尝试使用嵌套的 <form> 元素所做的事情。

Answer 3

试试这个：

<form class="form-horizontal" role="form">

 <div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
  <input class="form-control" name="fname" id="fname" type="text">
</div>
</div>

 <div class="form-group">
 <label class="col-sm-4 control-label" for="lname">Last name:</label>
 <div class="col-sm-8">
  <input class="form-control" name="lname" id="lname" type="text">
 </div>
 </div>

<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
      <select name="country" id="country" class="form-control">
        <option value="US">US</option>
        <option value="UK">UK</option>
        <option value="CA">CA</option>
      </select>
    </div>
 </div>

 <div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
      <select name="language" id="language" class="form-control">
        <option value="en-US">en-US</option>
        <option value="en-UK">en-UK</option>
        <option value="fr">FR</option>
      </select>
    </div>
  </div>
 </form>
 </div>

你也可以在这里看到我的JSFiddle

Answer 4

经过大量搜索，人们在没有清楚阅读问题并误解我需要什么的情况下回答。显然，这个问题意味着我需要单独的表单或表单内的子表单，这可以通过 HTML 5 属性form 以这种方式实现：

<select name="country" id="country" class="form-control" form="country-form">

你可以像这样在任何地方放空表格：

<form id="country-form"></form>

甚至连这个表单都不存在，提交容器表单的时候无论如何也不会包含上面的表单字段。