Example 3: Labeling date textbox using LABEL element

Best Practice Rating: Good

Example Start

(MM/DD/YY)
(MM/DD/YY)

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>