Using Labels to select form elements

A label is descriptive text (or image) that supports the form elements not only in naming what the element will be used for, but also for ease of selecting the element.

by webdevem

HTML

<h3>Without Labels:</h3>
First Name <input type="text" id="fn" name="fn" value="WebDev" />
<br/>
Last Name <input type="text" id="ln" name="ln" value="EM" />
<br/>
Is Enabled?<input type="checkbox" name="en" />
<hr>
<h3>With Labels:</h3>
<label for="first-name">First Name</label>
<input type="text" id="first-name" value="WebDev" />
<br/>
<label for="last-name">Last Name </label>
<input type="text" id="last-name" value="EM" />
<br/>
<label for="enabled">Is Enabled?</label>
<input type="checkbox" id="enabled" />

CSS

body {
 margin-left: 10px;  
 margin-right: 10px;   
}
h3 { 
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

input, checkbox{
    margin-left: 10px; 
    margin-bottom: 10px;    
}