15. Label is not connected to a form control

1.3.1

Disconnect label incorrect example

Description: The label for the form control is not explicitly connected to anything, since it refers to an element ID that does not exist on the page.

Context: Label elements should be used to provide context to a form element, they should not exist on their own.

<div>
    <label for="email">UH Email Address</label>
    <!--Content-->
</div>
<input type="email" id="uhemail" name="email" size="38" class="required">

How to fix it: When using the ‘label’ it must be explicitly connected to a form control, such as an input field, a text field, a combo box, a radio button or a check box. Using standards like this helps user agent render content properly to the user.


<div>
    <label for="email">UH Email Address</label>
    <!--Content-->
</div>
<input type="email" id="email" name="email" size="38" class="required">                        

Techniques: H44