Well formatted date of birth input field

A DD/MM/YYYY date input with placeholder text and dashes between the characters.

HTML

<script src="http://www.mathachew.com/downloads/jquery.autotab-1.1b.js"></script>
<!--
Notes:
I have included the min, max, pattern and required attributes as validation instruction, all three inputs will have to be validated as a date.
-->

<label for="day">Date of Birth (autotab):</label>
<div id="date1" class="datefield">
    <input id="day" type="tel" maxlength="2" placeholder="DD"/> /              
    <input id="month" type="tel" maxlength="2" placeholder="MM"/>/
    <input id="year" type="tel" maxlength="4" placeholder="YYYY"/>
</div>

<br/><br/><br/>

<label for="day">Date of Birth (normal):</label>
<div id="date2" class="datefield">
    <input id="day" type="tel" maxlength="2" placeholder="DD"/> /
    <input id="month" type="tel" maxlength="2" placeholder="MM"/> /
    <input id="year" type="tel" maxlength="4" placeholder="YYYY" />
</div>

CSS

body { 
    margin: 2em; 
    font-family: sans-serif; 
    font-size: 90%; 
    background: #f8f7f7; 
}

label { 
    float: left; 
    display: block; 
    width: 11em; 
}

.datefield { 
    display: inline; 
    padding: 0.3em; 
    border: inset 1px #CCC; 
    background: #FFF; 
    border-radius: 4px;
    color: #666;
}

.datefield * { 
    display: inline-block;
}

.datefield input { 
    width: 1.7em; 
    padding: 0 0.4em; 
    border: none; 
    font-size: 100%; 
    background: none;
    color: #000;            
}

.datefield input#year { width:2.5em; }
.datefield input:focus { outline:none; }

JavaScript

// Uses jQuery autotab plugin 
// - auto tabs to next field when input is full
// - filters/removes all input to specific values ig. numbers only
// http://www.mathachew.com/sandbox/jquery-autotab/

$('#date1 input').autotab_magic().autotab_filter('numeric');
$('#date1 input').datepicker()