How do I put a label to the left of a select box to indicate its purpose?
<form> <fieldset> <legend>Name<legend> <ul> <li> <label for='fName'>Forename</label> <input type='text' id='fName' /> </li> <li> <label for='sName'>Surname</label> <input type='text' id='sName' /> </li> </ul> </fieldset> </form>
is roughly how I would markup a label for a textbox.
I usually style labels with text-align:right and a suitable margin to align the label close to the relevant input field.
Just write your text before the input tag e.g.:
your text here <input type="checkbox" id="chk" name="chk" checked/>
You should use the
<label> element and then you can float it left. However, the convention is to have the label on the right side, in which case you would float the
<input> element left instead. Also notice that the
for attribute in the
<label> associates that label text with the input because it matches the input's id. This makes the form accessible for people with screen-readers and also let's you click on the label to toggle the input in most browsers.
I put the float and margin styles inline on the
<label> for didactic purposes, but it would be better to use an external stylesheet.
<label for="chk" style="float:left; margin-right:3px;">Click Me!</label> <input type="checkbox" id="chk" name="chk" />