Ask the CSS Guy

Scrolling boxes of terms: textarea vs div

I used to work for a bank, where checking a box to agree to a mile-long scrolling box of terms that go unread are a staple to all web forms. We used to put all those in a <textarea> tag, but eventually moved to putting them in a <div>, which still allows for the scrolling, but has the added benefit of being able to be styled as any other section of a web page. I still see many forms that use <textarea>, so I thought I'd show how to use the <div> method instead.

View demo

First, the textarea

Here's how the terms are normally listed:

<textarea
   rows="50"
   cols="20"
   readonly="readonly">
You do hereby acknowledge that...
</textarea>

An aside, I learned about the readonly attribute a little too late, as one customer told our service department that he could modify the terms (including pricing and fees) to be any way he wished before hitting submit. Not that he really believed that, but at least if we had used readonly we wouldn't have had any potential for customers getting the wrong idea.

So back to the matter at hand: scrolling boxes of legalese. Nobody I know ever reads those things, but they should at least be easy to scan. In a textarea, it's all the same formatted text. The only option for emphasis is to use all caps, and dashes or asterisks to designate list items.

It would be nice to be able to add <strong> and <em> tags throughout the document, and even make use of list items, headers, etc. This would at least allow customers to scan the form and look for items of interest. Styled <div> tags are perfect for this.

Divs

Divs can be styled to scroll just like textareas. Take the following html:

<div class="terms">
You do hereby acknowledge that...
</div>

Then style this div so that it scrolls:

div.terms {
   width:600px;
   height:200px;
   border:1px solid #ccc;
   background:#f2f2f2;
   padding:6px;
   overflow:auto;
}
div.terms p,
div.terms li {font:normal 11px/15px arial;color:#333;}
div.terms h3 {font:bold 14px/19px arial;color:#000;}
div.terms h4 {font:bold 12px/17px arial;color:#000;}
div.terms strong {color:#000;}

Now the Terms can be scanned much more easily with the use of extra markup.

View the example to see the comparison.

# February 5, 2007 5:43 PM