Differents Way To Structure Html Inputs And Labels In A Form

I'm wondering what are the best solutions to structure a html form with labels and inputs. I used to do this with float: left to the label and float: right for the inputs. And each

Solution 1:

Well it really depends on what you want the form to look like. For example, if you want a clear grid with borders I recommend using a table.

To duplicate what you have, you can do this:

<label for='textbox'>Label</label><input type='text' id='textbox' />

And then this css:

label { display: inline-block; width: 100px; }

This will make the label stay on the same line as in input element but will push it the appropriate distance.

Personally, I try to avoid using floats to align elements. I would rather use position absolute and set left or right and top or bottom. To me floating is like asking the browser to do it for you, and maybe some browsers (cough ie cough) will decide to draw it a little differently.

Solution 2:

Form markup and CSS will always be a personal choice. Sure, there are some rights and wrongs semantically and technically from a CSS point of view, but there certainly isn't one (or even a few) "right" techniques.

My personal preference is to float the label left and contain my inputs inside lists, which I personally consider more semantic than a div or p tag.

HTML:

<form>
    <fieldset>
        <ol>
            <li>
                <label for="input1">Label 1</label>
                <input type="text" name="input1" id="input1">
            </li>
            <li>
                <label for="input2">Label 2</label>
                <input type="text" name="input2" id="input2">
            </li>
            <li>
                <label for="input3">Label 3</label>
                <input type="text" name="input3" id="input3">
            </li>
        </ol>

        <button type="submit">Submit</button>
    </fieldset>
</form>

CSS:

li {
    clear: left;
    margin-bottom: 10px;    
}

label {
    float: left; /* You could use "display: inline-block;" instead. */
    margin-right: 10px;
    width: 80px;
}

Solution 3:

tables is also a solution.

also , Div with 2 inner divs( left and right)

or 1 div with both elements with float:left with margin-left.