HTML Character limiting code for html text area boxes.?

I am working on a html contact form that consists of a html page for the form and a php page to process the form. The contact form works. I have not designed the page so it is just a white page with the contact for on it. I have put a html counter on the one box of the form which counts the number of characters... show more I am working on a html contact form that consists of a html page for the form and a php page to process the form.
The contact form works.
I have not designed the page so it is just a white page with the contact for on it.
I have put a html counter on the one box of the form which counts the number of characters in the box and i would now like to limit the number of characters that can be entered in to the box. I know this is possible.
I would like it so that there is a pop up box that comes up when the max number of characters is reached and then not let any more characters be entered but i do not need the pop up that is just an extra i just need a limit.
How can i do this?
This is the code for the box and the counter that i have so far (this is not the whole contact page it is just the box that i need the limit on and the counter that is with it:

<tr>
<td valign="top">
<label for="comments">Message *</label>
</td>
<td valign="top">
<!-- Created by Barrett at RRPowered.com -->
<!-- File name contcar.html -->
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/lib...
1.4.4/jquery.min.js"></script>
<title>Contact Form</title>
<script type="text/javascript">
$(document).ready(function() {
$(".counter").text("Characters used: 0/100");
});

$(document).keyup(function() {
var text=$(".text_field").val();
var counter=text.length;
$(".counter").text("Characters used: "+counter+"/1000");
});
</script>
<style type="text/css">
body{
margin:10.5px;
}

.counter{
font-weight:normal;
color:black;
}

.text_field{
border:solid grey1px;
width:300px;
height:100px;
}
</style>
</head>
<body>
<h1></h1>
<textarea class="text_field"></textarea>
<div class="counter"></div>

</body>
</html>
</td>


Thanks for your help...
Update: I have but in the max length tag that you said for the text area as so:
it still allows more than 10 characters to it. the text area is called text_field as stated in the coding... What do i do? Thanks
show more I have but in the max length tag that you said for the text area as so:

<textarea class="text_field"></textarea>
<div class="counter"></div>
<textarea maxlength="10"></textarea>

it still allows more than 10 characters to it.
the text area is called text_field as stated in the coding...
What do i do?
Thanks
Update 2: were in the long script above do i put the max length?
3 answers 3