Example Navigation

Example 2: Labeling date textbox using TITLE attribute

Best Practice Rating: Poor

Example Start

Start Date
(MM/DD/YY)
End Date
(MM/DD/YY)

Example End

HTML Source Code

<div class="date">
  <div class="label">Start Date </div>
  <input type="text" name="date_start" size="8" title"Start Date, format is month / day / 2 digit year"/><span class="inst">(MM/DD/YY)</span>
</div>

<div class="date">
  <div class="label">End Date </div>
  <input type="text" name="date_end" size="8" title="End Date, format is month / day / 2 digit year"/><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 div.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
{
  background-color: lightyellow;
  border-color: gray;
}

  </style>