sorry for my noobish program.. i really fail at this im not posting the whole code.. im just having problems in the caps button.. when u press caps the other buttons display should change too (a --> A) with its value (a>A). I hope you understand what im trying to pull.

Code:
<html>
<head><title>kb</title>
<style type="text/css">
input.color {color: red;}
textarea.align {text-align:center;
				resize: none; }
body{background-image: url("ph.jpg");
	 background-position: center;
	 background-repeat: no-repeat;}
</style>
<script type="text/javascript">

function oper(x){
document.form1.ta1.value += x;}
</script>
</head>
<body>
<form name="form1">
<textarea disabled="" maxlength="10" class="align" rows="7" cols ="40" name="ta1" ></textarea>
<br></br>
<input type="button" name="q" value="q" onclick="oper('q')"/>
<input type="button" name="w" value="w" onclick="oper('w')"/>
<input type="button" name="e" value="e" onclick="oper('e')"/>
<input type="button" name="r" value="r" onclick="oper('r')"/>
<input type="button" name="t" value="t" onclick="oper('t')"/>
<input type="button" name="y" value="y" onclick="oper('y')"/>
<input type="button" name="u" value="u" onclick="oper('u')"/>
<input type="button" name="i" value="i" onclick="oper('i')"/>
<input type="button" name="o" value="o" onclick="oper('o')"/>
<input type="button" name="p" name="q"value="p" onclick="oper('p')"/>
<input class="color" type="button" value="ABC" onclick="func()"/>
</body>
</html>