Example Navigation

Example 1: Date picker with no labeling

Best Practice Rating: Fail

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"/><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"/><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;
}  </style>