Search code examples
javascriptjqueryhtmlformstwitter-bootstrap

How to use bootstrap form layout without actually using <form>?


We need the formatting and layout that comes with using something like the following but we don't want the traditional HTML form (we use ajax, javascript to pull/set data on our controls). The problem is when you hit 'enter' the page assumes you are submitting a form, probably because there is form tag (but there was no submit button, so maybe it is defaulting to one of the buttons, but that's a different story):

<form role="form" class="form-horizontal">      
        <legend>Product Header Information</legend>
        <div class="form-group form-group-sm">
            <label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
            <div class="col-xs-8 col-sm-4 col-md-4">
                    <input class="form-control" id="pid" />
            </div>
        </div>
.....
</form>

Solution

  • Here is the answer, simply replace "form" with "div", that seems to work great in firefox, IE & Chrome. It does makes sense.. I need css classes, I use css classes, who cares on what tag?

    <div class="form-horizontal">      
            <legend>Product Header Information</legend>
            <div class="form-group form-group-sm">
                <label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
                <div class="col-xs-8 col-sm-4 col-md-4">
                        <input class="form-control" id="pid" />
                </div>
            </div>
    .....
    </div>