Bootstrap form inside form group

Question

Is it possible to insert a form with select element inside horizontal form in Bootstrap.

I need to insert a form with select element inside form group.

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

The problem the element becomes not aligned. The two selects for Country and Language in the code not aligned and messes the code after them.

enter image description here

The code is here again:

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

It's not valid to have a form inside a form (http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form). This works fine: http://bootply.com/tRLP42L4Zr — Carol Skelly, Jan 16 '15 at 13:50

score 3 · Answer 1 · answered Jan 16 '15 at 01:53

3

You have multiple <form></form> values in your code. Since this is only one form all you need is the form class at the beginning and the close at the end. This is why it's becoming misaligned. Check out my fiddle http://jsfiddle.net/jxe78828/

answered Jan 16 '15 at 01:53

Jake Taylor

4,246
3
15
16

score 3 · Answer 2 · answered Jan 16 '15 at 02:21

According to the HTML5 specs, you can't nest one form inside another:

4.10.3 The form element

...

Content model: Flow content, but with no form element descendants.

Bootstrap is designed with the assumption that you will be using valid HTML structure. So you may want to rethink your HTML structure and if there is another way to accomplish what you are trying to do with nested <form> elements.

score 0 · Answer 3 · answered Jan 16 '15 at 02:53

Try this:

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

You can also see my JSFiddle here

Your code wasn't rendering properly because you cannot have multiple forms inside of another form. — Jason Bassett, Jan 16 '15 at 02:54

score 0 · Answer 4 · answered Jan 16 '15 at 15:16

0

After a lot of search with people answering without reading the question clearly and misunderstanding what I need. Clearly the question means I need separate forms or sub forms inside forms, this can be possible with HTML 5 attribute form in this way:

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

where you can just put empty form any where like this:

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

or even this form does not exist, the above form field will not be included anyway when submitting the container form.

answered Jan 16 '15 at 15:16

daliaessam

1,636
2
21
43

I think the reason people misunderstood what specifically you were trying to achieve is simply because you didn't state that you were trying to nest a form inside another form....which is not valid markup according to the W3C. There are workarounds for this but you've obviously found your own answer that you're comfortable with. – Jake Taylor Jan 17 '15 at 00:51

Bootstrap form inside form group

4 Answers4