How to Creat Labels for Controls and the <label> Element ?

[chinmay]

When you are creating a form it is absolutely ***** that you provide good labeling so that the user knows what data he or she should be entering where.

Forms can be confusing enough at the best of times; I’m sure an insurance company or tax form has left you scratching your head at some point. So unless your visitors are completely sure what information they should be providing and where that information should be, they will not be as inclined to fill in your forms.

Some form controls, such as buttons, already have labels. For the majority of form controls, however, you will have to provide the label yourself.

For controls that do not have a label, you should use the <label> element. This element does not affect the form in any way other than telling users what information they should be entering .

You can see that this form has been placed inside a table; this ensures that even if the labels are of different lengths the text inputs are aligned in their own column. If a list of text inputs has different indentations, it is very hard to use.

<form action=”http://www.example.org/login.aspx” method=”post” name=”frmLogin”>
<table>
<tr>
<td><label for=”Uname”>User name</label></td>
<td><input type=”text” id=”Uname” name=”txtUserName” /></td>
</tr>
<tr>
<td><label for=”Pwd”>Password</label></td>
<td><input type=”password” id=”Pwd” name=”pwdPassword” /></td>
</tr>
</table>
</form>

As you can see here the <label> element carries an attribute called for, which indicates the form control associated with the label. The value of the for attribute should be the same as the value of the id attribute on the corresponding form control. For example, the text box form control, where a user enters his or her username, has an id attribute whose value is Uname, and the label for this text box has a for attribute whose value is also Uname .

The label may be positioned before or after the control. For text boxes, it is generally good practice to have the label on the left, whereas for checkboxes and radio buttons it is often easier to associate the label with the correct form control if they are on the right .

You should have a new <label> element for each form control .

Another way of to use the <label> element is as a containing element. This kind of label is sometimes known as an implicit label. For example:

<form action=”http://www.example.org/login.asp” method=”post” name=”frmLogin”>
<label for=”Uname”><input type=”text” id=”Uname” name=”txtUserName” /></label>
<label for=”Pwd”><input type=”password” id=”Pwd” name=”pwdPassword” /></label>
</form>

The drawback with this approach is that you cannot control where the label appears in relation to the form control, and you certainly cannot have the label in a different table cell from the form control, as the markup would not nest correctly.

[mikiway93]

this is a difficult question