Designing Consistent Form Field Sizes

It can be frustrating to design a form so it looks good, then test it on another browser and have the design fall apart.

Some browsers calculate the amount of horizontal space taken up by the size and cols attributes differently than other browsers do.

That's why the horizontal spacing of name="text" fields and textarea fields can vary from browser to browser. Even the same brand of browser on Mac and on PC can display fields differently.

Some browsers calculate the horizontal space using one font family metric for name="text" fields and another for textarea fields, which might be arial for type="text" and courier for textarea, for example. It can be an especially vexing design problem when both type="text" and textarea fields are present in the same form.

CSS can be used to make things more consistent.

The idea is to specify one common font for both type="text" and textarea fields. Then, a type="text" size number and a textarea col number will both result in nearly identical field width (provided the same number is used in both size and col attributes). If finer control is desired, a common font size can be specified, too.

If you already use a style sheet, add something like this to it:

INPUT,TEXTAREA { font-family: serif; font-size: 12px; }

Important note: If the INPUT tag is specified in a style sheet, it will have an effect on the submit button, too, because the submit button is also an INPUT tag. If the submit button needs to be changed, inline CSS can be used (see immediately below) or a separate class defined in your stylesheet for the submit button INPUT field.

If you don't have a style sheet, inline CSS can be used, like:

<input 
   type="text" 
   style="font-family: serif; font-size: 12px;" 
   size="20"
   name="something">

<textarea 
   style="font-family: serif; font-size: 12px;" 
   cols="20"
   name="something">
</textarea>

It's important to use a font family name available on all computers where the web page will be displayed. "serif," "sans-serif," and "monospace" are generic font family names directing the browser to select one compatible font name from those available on the computer it's running on.

Although specific font names may be used, like arial and helvetica, the design might fall apart when the computer the browser is running on doesn't have the named font available. This would requiring the browser to insert it's own defaults -- which might be arial for type="text" and courier for textarea, as examples.

In cases where your design requires a certain font, and you're relatively certain the computers of most of your site visitors have the font available, you might specify the font as the primary font and then use a generic font family name as a secondary. Example:

INPUT, TEXTAREA 
{ font-family: verdana, sans-serif; font-size: 12px; }

When the browser renders the page on a computer where verdana isn't available, the browser will then use the sans-serif font it has selected as a default for that web page. While the actual horizontal spacing of the type="text" and textarea fields might be adjusted, at least they'll all adjust by a consistent amount.

In forms where the INPUT and TEXTAREA fields have the same font specified, a type="text" attribute of size="20" and a textarea attribute of cols="20" will have almost the same horizontal dimensions. The difference is the way the browser (again, browser dependent) calculates the potential for a vertical scroll bar in the textarea field -- which on some browsers may be different for different fonts.

It can be frustrating. But if both the INPUT type="text" and TEXTAREA fields have the same font family specified, the horizontal dimensions of the two types of fields will be the most consistent. (If you specify a font size, specify the same font size for both types of fields in order to maintain the consistency.)

As mentioned earlier, when CSS is used to specify a font for the INPUT field, it has an effect on the submit button, too. If the specified font is not what you want for the submit button, it's easy enough to change.

Inline CSS can be used, like that for the INPUT type="text" and TEXTAREA fields. Example:

<input 
   type="submit" 
   style="font-family: monospace; font-size: 26px;" 
   value="Click Me">

Or, a stylesheet can be used to create a class specifically for the submit button. Example:

.mysubmit { font-family: monospace; font-size: 26px; }

The submit button field would then be:

<input 
   type="submit" 
   class="mysubmit" 
   value="Click Me">

Now, form fields can be consistent. Well, mostly.

Will Bontrager