Pin Entry!

CSS

#keypad {
    margin:auto; 
    margin-top:20px;
}
#keypad tr td {
    vertical-align:middle;
    text-align:center;
    border:1px solid #000000;
    font-size:18px;
    font-weight:bold;
    width:40px;
    cursor:pointer;
    background-color:#666666;
    color:#CCCCCC;
}
#keypad tr td:hover {
    background-color:#999999; 
}
.pindisplay {
    width:130px;
    margin:10px auto auto auto;
    font-size:18px;
    border:1px solid #999999;
}

JS

function addCode(key){
    var code = document.forms[0].code;
    if(code.value.length < 4){
        code.value = code.value + key;
    }
}

Markup

<link rel="stylesheet" type="text/css" href="css/css.css">
<form action="code" method="get" align="center">
<input type="text" name="code" value="" maxlength="4" class="pindisplay" readonly="readonly" />
<table id="keypad" cellpadding="5" cellspacing="3">
    <tr>
        <td onclick="addCode('1');">1</td>
        <td onclick="addCode('2');">2</td>
        <td onclick="addCode('3');">3</td>
    </tr>
    <tr>
        <td onclick="addCode('4');">4</td>
        <td onclick="addCode('5');">5</td>
        <td onclick="addCode('6');">6</td>
    </tr>
    <tr>
        <td onclick="addCode('7');">7</td>
        <td onclick="addCode('8');">8</td>
        <td onclick="addCode('9');">9</td>
    </tr>
    <tr>
        <td onclick="addCode('*');"></td>
        <td onclick="addCode('0');">0</td>
        <td onclick="reloadPage()"></td>
    </tr>
</table>
</form>
<script type="text/javascript" src="js/entry.js"></script>