CODEWITHSUNDEEP
html
Mike
Mike

Reputation: 2923

HTML5 validation form with labels

I have a simple HTML5 form. but when I do a code validator (http://validator.w3.org/check) I get multiple errors

The for attribute of the label element must refer to a form control. What does this error mean? It is pointing to this line

 <label id="name0" for="Name" style="width: 180px;">Name</label>

This is my current form

<div id="contact-add" title="Add New Contact" style="display: none;">

        <div id="response-add"></div>
       <form method="post" id="add-form">

       <div class="label-input">
           <label id="name0" for="Name" style="width: 180px;">Name</label>
           <input type="text" id="fullname0" value="" name="name" placeholder="Enter full name..." />
           <input type="hidden" name="add_account_id" id="add_account_id" value="<?php echo $add_account_id; ?>" />

       </div>

       <div class="label-input">
           <label id="title0" for="title" style="width: 180px;">Title (Optional)</label>
           <input type="text" value="" name="title" placeholder="Enter title here..." />
       </div>      

       <div class="label-input">
           <label id="email0" for="email" style="width: 180px;">Email (Optional)</label>
           <input type="text" value="" id="email" name="email" placeholder="Enter email address..." />
       </div>


       <div class="label-input">
           <label id="phone0" for="phone" style="width: 180px;">Direct Number (Optional)</label>
           <input type="text" value="" id="phone_number" name="phone_number" placeholder="Enter direct number..." />
       </div>          
       <div class="label-input">
           <label id="extention0" for="extention" style="width: 180px;">Extention (Optional)</label>
           <input type="text" value="" id="phone_ext" name="phone_ext" placeholder="Enter extention number..." />
       </div>   

       <div class="label-input">
           <label id="shift0" for="shift" style="width: 180px;">Work Shift</label>
           <?php echo generateWorkShiftMenu($db, 'work_shift', 'Day'); ?>
       </div>   


       </form>
</div>

Upvotes: 2

Views: 1429

Answers (1)

Musa
Musa

Reputation: 97672

The for attribute of a label must be the id of a form control. i.e. 

<label id="name0" for="fullname0" style="width: 180px;">Name</label>
<input type="text" id="fullname0" value="" name="name" placeholder="Enter full name..." />

Upvotes: 1

Related Questions