Example Navigation

Example 5: Text input control label references form control id

Best Practice Rating: Good

Text box form controls are labeled using the label element, the label.for attribute and the input.id attribute.
The input.id attribute values on form controls need to be unique within the web page (Note: all id attribute values need to be unique for a eb page to validate).
CSS is used to align labels above the text boxes and to provide vertical separation between the text boxes.

Example Start

Name

E-mail

Comment

Example End

HTML Source Code

<div class="text">
    <label for="name">Name</label>
    <input type="text" size="30" name="name" id="name"/>
</div>

<div class="text">
    <label for="email">E-mail</label>
    <input type="text" size="25" name="email" id="email"/>
</div>

<div class="text">
    <label for="comment">Comment</label>
    <textarea rows="5" cols="50" name="comment" id="comment"></textarea>
</div>

CSS Source Code