How to correctly style a form? - html

Question

I'm really not that good at CSS, and I want to know how to correctly style a form in a manner that it puts each single text input and label in a line. like this :
<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
and it would be shown in the webpage like :
(label)(input)
(label)(input)
(label)(input)
(label)(input)

Answer 1

<label>foo</label>
<input type="text"/>
<label>foo</label>
<input type="text"/>​
<style>
input, label { float:left }
label { clear:left; }
</style>
​
http://jsfiddle.net/RpRS5/

Answer 2

I recommend this tutorial by A List Apart about Prettier Accessible Forms. You can also use a definition list with some custom styling, e.g.,
<dl><dt><label></label></dt>
<dd><input></dd></dl>
And something like:
dl dt {
float: left;
width: 8em;
}
Edit: to sum up the A List Apart article, they suggest you put form fields in an ordered list ol. Labels are displayed as inline-block so they appear horizontally next to their associated fields.

Answer 3

Put them in a list, or in a structure like a list (that is to say, wrap each "row" in a div).

Answer 4

Put your inputs inside the label element and then you can simply display: block them or float them, I prefer display but it would be easy enough to change.
<label>Hello <input type="radio" name="what" value="Hello" /></label>
http://jsfiddle.net/Bpxfp/

Answer 5

http://jsfiddle.net/ud7YE/1/
you can control the space between the label and input by varying the width of the wrapper. Just set the height of the label and the top margin of the input same in value but negative

Answer 6

I find enclosing label and input or select tags in a div or list. And the label and select tags should be of type inline-block
<div>
<label>Name: </label><input type="text" />
</div>
<div>
<label>Place: </label><input type="text" />
</div>
CSS:
label {
display: inline-block;
}
input {
display: inline-block;
padding: 2px;
}
div {
display: block;
margin: 2px 0;
}
This would work out well.