Example 5: Multiple fields using LABEL element reference

<div class="date">
  <div class="label">Start Date </div>
  <label for="month_start">Start Month, 1 or 2 digit number</label>
  <input type="text"
         id="month_start"
         name="month_start"
         size="2"
         onkeydown="numberOnlyKeyDown(event)"
         onkeyup="sizeLimitKeyUp(event, 2, 'day_start')"
         /> -
   <label for="day_start">Start Day, 1 or 2 digit number</label>
   <input type="text"
         id="day_start"
         name="day_start"
         size="2"
         onkeydown="numberOnlyKeyDown(event)"
         onkeyup="sizeLimitKeyUp(event, 2, 'year_start')"
         /> -
   <label for="year_start">Start Year, 1 or 2 digit number</label>
   <input type="text"
         id="year_start"
         name="year_start"
         size="2"  
         onkeydown="numberOnlyKeyDown(event)"
         onkeyup="sizeLimitKeyUp(event, 2, 'month_end')"
         />
  <span class="inst">(MM-DD-YY)</span>
</div>

<div class="date">
  <div class="label">End Date</div>
  <label for="month_end">End month, 1 or 2 digit number</label>
  <input type="text"
         id="month_end"
         name="month_end"
         size="2"  
         onkeydown="numberOnlyKeyDown(event)"
         onkeyup="sizeLimitKeyUp(event, 2, 'day_end')"
         /> -
  <label for="day_end">End day, 1 or 2 digit number</label>
  <input type="text"
         id="day_end"
         name="day_end"
         size="2"
         onkeydown="numberOnlyKeyDown(event)"
         onkeyup="sizeLimitKeyUp(event, 2, 'year_end')"
         />-
  <label for="year_end">End year, 1 or 2 digit number</label>
  <input type="text"
         id="year_end"
         name="year_end"
         size="2"
         onkeydown="numberOnlyKeyDown(event)"
         onkeyup="sizeLimitKeyUp(event, 2, 'month_start')"
         />
  <span class="inst">(MM-DD-YY)</span>
</div>

  <script type="text/javascript">
//
//   Allow only number and edting keys in a text box
//

var move_focus_flag = false;

function numberOnlyKeyDown( event ) {
  // Get event object  if using Internet Explorer
  var e = event || window.event;  
  
  // Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
  if( e.target )
    target_node = e.target;
  else
    target_node = e.srcElement;
  
   // Cancel default action if not a number
   if( ((e.keyCode < 48) || (e.keyCode > 57)) &&
       (e.keyCode >= 32) &&
       ((e.keyCode < 33) || (e.keyCode > 40))
     ) {

     if( e.stopPropagation )
        event.stopPropagation();
        
     if( e.preventDefault )
        event.preventDefault();
        
     if( e.cancelBubble ) {
       e.cancelBubble = true;
       e.returnValue = false;
     } // endif
    
    return false;
    
   } else {
  
     if( target_node.value.length == 1 )
       move_focus_flag = true;
     else
       move_focus_flag = false;  
  
   } // endif
    
}

//
//   After a N characters move focus to next control
//
function sizeLimitKeyUp( event, max_digits, next_control_id ) {
  // Get event object  if using Internet Explorer
  var e = event || window.event;
  
  var target_node;
  
  // Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
  if( e.target )
    target_node = e.target;
  else
    target_node = e.srcElement;
    
    // If value is more than 2 digits trim value to 2 digits
  
   if( target_node.value.length > max_digits) {
      target_node.value = target_node.value.substr(0, max_digits);
   } // endif

   // Check length and move focus if size acheived
   if( target_node.value.length >= max_digits && move_focus_flag) {
  
      document.getElementById( next_control_id ).focus();

     if( e.stopPropagation )
        event.stopPropagation();
        
     if( e.preventDefault )
        event.preventDefault();
        
     if( e.cancelBubble ) {
       e.cancelBubble = true;
       e.returnValue = false;
     } // endif
    
    return false;
    
   } // endif
    

}


  </script>

  <style type="text/css">
div.date {
  margin: 0;
  padding: 0;
  padding-left: 20px;
  padding-bottom: .5em;
  display: block;
}


div.date label {
  position: absolute;
  top: -20em;
  left: -200em;
}


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>