Horizontal Form Within a Legend Form

Question

How would I add a horizontal form to a legend form? When I try to do it, the horizontal form doesn't look as it should: https://i.stack.imgur.com/m9jGv.png

Here's my code:

<form>
 <fieldset>
 <legend>Legend Text</legend>
 <form class="form-horizontal">
   <div class="control-group">
   <label class="control-label" for="inputEmail">Email</label>
   <div class="controls">
   <input type="text" id="inputEmail" placeholder="Email">
   </div>
   </div>
   <div class="control-group">
   <label class="control-label" for="inputPassword">Password</label>
   <div class="controls">
   <input type="password" id="inputPassword" placeholder="Password">
   </div>
   </div>
   <div class="control-group">
   <div class="controls">
   <label class="checkbox">
   <input type="checkbox"> Remember me
   </label>
   <button type="submit" class="btn">Sign in</button>
   </div>
   </div>
 </form>
 </fieldset>
</form>

All of the CSS is the bootstrap default CSS.

how do you want it , and how is it , please create some image and post — Hussain Akhtar Wahid 'Ghouri', Mar 25 '13 at 01:53

score 1 · Accepted Answer · answered Mar 25 '13 at 01:56

1

Remove the outer <form> tag.

<fieldset>
 <legend>Legend Text</legend>
 <form class="form-horizontal">
   <div class="control-group">
   <label class="control-label" for="inputEmail">Email</label>
   <div class="controls">
   <input type="text" id="inputEmail" placeholder="Email">
   </div>
   </div>
   <div class="control-group">
   <label class="control-label" for="inputPassword">Password</label>
   <div class="controls">
   <input type="password" id="inputPassword" placeholder="Password">
   </div>
   </div>
   <div class="control-group">
   <div class="controls">
   <label class="checkbox">
   <input type="checkbox"> Remember me
   </label>
   <button type="submit" class="btn">Sign in</button>
   </div>
   </div>
 </form>
</fieldset>

answered Mar 25 '13 at 01:56

pstuart2

362
1
5

New dilemma. I want the horizontal form within a custom form I made, but again, the horizontal form isn't showing up as it should. Here's the link to the JSFiddle: [http://jsfiddle.net/VzTxM/8/](http://jsfiddle.net/VzTxM/8/) – ShadyPotato Mar 25 '13 at 02:01
1

@ShadyPotato It is invalid to have a form inside another form element. [Form inside form](http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form) You will need to rethink your layout. What exactly are you trying to achieve from a form inside another form? – pstuart2 Mar 25 '13 at 11:22
I fixed it. For some reason I was using
instead of
– ShadyPotato Mar 25 '13 at 14:37

Horizontal Form Within a Legend Form

1 Answers1