How to properly format a form using twitter bootstrap

Question

I understand there are .form-inline and .form-horizontal classes etc. but this leads me to a few questions:

1. These seem to only relate to how the label aligns to it's corresponding text field/checkbox etc. Is that correct?
2. I need to create a form that has:
   • potentially a lot of fields and
   • align them to the bootstrap 12 col grid.

Do I need to wrap each field and its label within a div, and give that div a class name such as span3?

Answer 1

Your question is not so much clear.. I'll try to answer it anyway!
How do you want to dispose the input elements throught the page?

Here are two HTML code snippets that creates two forms. The first is an inline form, where all the inputs are on the same row. The second is an horizontal form wich splits the form in two parts, the left one that holds the labels and the right one that contains the input elements.

<form class="form-inline">
    <label>Input One: </label><input type="text" placeholder="Input One" />
    <label>Input Two: </label><input type="password" placeholder="Input Two" />
    <input type="submit" value="Submit" />
</form>

<form class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="input1">Input One:</label>
            <div class="controls">
                <input id="input1" type="text" placeholder="Input One" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Input Two:</label>
            <div class="controls">
                <input type="text" placeholder="Input Two" />
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Submit</label>
            <div class="controls">
                <input type="submit" value="Submit" />
            </div>
        </div>
    </fieldset>
</form>​

If you could be more specific, I'll be glad to help you.