Welcome to FormGenics.com!

FormGenics is a HTML Form code generator. It creates the necessary HTML and JavaScript code for any form that you create using the easy question and answer styled wizard.

What kind of forms can you create with FormGenics? You can create email contact forms, membership sign-up forms, log in forms, application forms, cool HTML forms, download forms, comment forms, polls, support ticket forms, simple forms, complex forms...

If you have ever had difficulties creating a HTML form or are just too busy to write one from scratch, then you are in the right place!

Easy, simple, and free. Click here to get started right away or quickly view the Quick Start Instructions. For more advanced help, check out the Comprehensive Help Guide and our Support Forum.

create form
support forum
terms of use
Quick Start Guide
Comprehensive Help Guide
Support Forum

Back to Basics
Forms Part 1
Back to Basics
Advanced Forms Part 2
Back to Basics
Form Tips & Tricks Part 3
Designing Consistent Form Field Sizes
Getting the Most Out of Your Form
Form Processing - Working with CGI




Designing Consistent

Form Field Sizes

By William Bontrager

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;"

style="font-family: serif; font-size: 12px;"

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:

{ 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:

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:

value="Click Me">

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

Will Bontrager

Copyright Bontrager Connection, LLC

About the Author:

William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:[email protected]

forum  |  contact  |  articles  |  donate  |  privacy policy  |  site map  |  link to us
copyright ©2011 FormGenics.com | all rights reserved