表單組內的Bootstrap表單

Question

是否可以在Bootstrap中的水平表單內插入帶有select元素的表單。

我需要在表單組內插入一個帶有select元素的表單。

在此處引導代碼

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

元素不對齊的問題。 這兩個代碼中未選擇的“國家/地區”和“語言”均未對齊，然后將它們弄亂。

代碼再次在這里：

<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規范 ，您不能將一種表單嵌套在另一種表單中：

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>

甚至不存在此表單，在提交容器表單時也不會包含上述表單字段。