One of the challenges in creating usable forms on HTML pages is presenting to the user information about limits on the data they’re entering, without making the form overly verbose.
One example of this is where an input element is limited to a maximum number of characters. In the past I’ve implemented a little counter next to the field, which counted down as you typed and showed the total and remaining characters. It worked just fine, but I always found it difficult to fit it neatly into the form layout.
So as you can see, the bar increments as you type: when it hits the right-hand side of the box, you have no more characters left. It only works on elements that can have a ‘maxlength’ attribute, ie. text and password boxes. I thought that you could do something similar with a textarea (only maybe top-bottom instead of left-right) but textarea elements don’t support maxlength.
It’s just a proof-of-concept but I quite like the idea: although it’s not as specific as saying ‘you have 10 of 20 characters left’ it does give a nice, simple visual cue without changing the layout of the form at all.
I’ve tested it successfully on Firefox (1.5 and 2), IE6 and Opera 9. Any feedback on whether it works with Safari or Konqueror would be appreciated. If you choose to use it, the usual licence applies: do what you want with it; please leave the credit and my web address in there; don’t blame me if it breaks anything.