Example Navigation
Example 3: Labeling date textbox using LABEL element
Best Practice Rating: Good
- The
label reference technique is compatible with assistive technologies and is defined in HTML specifications.
- The reference technique is consistent with how other input form controls are labeled and therefore developers only need to use one rule when using the
label element .
- The date format is part of the format and hidden using off screen positioning CCS technique.
Example Start
Example End
HTML Source Code
<div class="date">
<label for="date_start">Start Date
<span class="offscreen">, the date format is month / day / 2 digit year</span></label>
<input type="text"
id="date_start" name="date_start" size="8" /><span class="inst">(MM/DD/YY)</span>
</div>
<div class="date">
<label for="date_end">End Date
<span class="offscreen">, the date format is month / day / 2 digit year</span></label>
<input type="text"
id="date_end" name="date_end" size="8" /><span class="inst">(MM/DD/YY)</span>
</div>
CSS Source Code
<style type="text/css">
div.date {
margin: 0;
padding: 0;
padding-left: 20px;
padding-bottom: .5em;
display: block;
}
div.date label {
margin: 0;
padding: 0;
display: block;
padding-top: .25em;
}
div.date input {
margin: 0;
padding: 0;
display: inline;
}
span.inst {
font-size: 75%;
color: blue;
padding-left: .25em;
}
div.date input:active,
div.date input:focus,
div.date input:hover
{
border-color: gray;
background-color: lightyellow;
}
span.offscreen {
position: absolute;
top: -30em;
left: -300em;
}
</style>