How do I put a label to the left of a select box to indicate its purpose?

3 answers

PaulBM 103
<label for='fName'>Forename</label>
<input type='text' id='fName' />
<label for='sName'>Surname</label>
<input type='text' id='sName' />

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.

Answered about 8 years ago by PaulBM

Just write your text before the input tag e.g.:

your text here <input type="checkbox" id="chk" name="chk" checked/>
Answered about 8 years ago by Ammaroff
  • when i did that it showed up at the top of the screen. now how do i move it the left of it? canyonchase1 about 8 years ago

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" />
Answered about 8 years ago by Avram Eisner
  • I disagree about the convention being to float the labels to the right of the input. I have never added them to the right and every site I've made has had at least five separate forms on it, all with the labels to the left of the inputs. The only time I would consider putting the labels to the right is when the language was right-to-left. danwellman about 8 years ago