Textareas and readability
If, like me, you are accustomed to receiving your site email via a form to your inbox then you’d appreciate a little fricken’ order. There are times in our lives when we salivate over the prospect of hurling ourselves at our inbox, most notably when we are bored or are missing interaction, and relish even trite comments on a carbon copy from someone you’ve never met. But for those occasions, when you’d rather pour scalding butter down your pants, than read clients’ emails, spam subjects, or queries on how to spell CSS, well-formed emails are the difference between sanity and becoming a nutty moon bat.
I had noticed that, in a few form driven applications, text sent through the <textarea> element were narrow, about two or three words per line. My ire at reading diatribes eight to ten paragraphs in length that stretched 4000px down the page was indescribable, but one persists and even cedes to curiosity. Why was this happening? Am I that pedantic?
At first I thought that perhaps a few sneaky carriage returns had been injected, or that the person who was typing perhaps had a nervous twitch in their right pinkie, but no, it was the simple and obvious fact that the cols attribute had not be applied to the textarea. In elementary terms, the approximate number of characters appearing across the line of text had not been declared. Admittedly, I had only seen this occur in the output of a textarea on screen, within a task log application, and via gmail and outlook mail clients. But given even this most perfunctory of analyses, I feel that is justified to speak out.
Controlling width with CSS is great to achieve your visual effect, and it should be used thus. But designers complaining that specifying the cols and rows attributes is a waste of their sweet-ass time and pointless anyway, should think again. They are valid attributes and serve the purpose to tell both the screen and anything communicating with the page the dimensions of a block of form text.
The very least you could do is apply cols="15".
<textarea id="comments" name="comments" cols="15"></textarea>
I found 15 to be satisfactory for my purposes, but test it for yourself. Height will of course be determined by the amount of text and will flow down accordingly.