244 Chapter 12 – FormsAffecting the Appearance of Forms
Web Design in a Nutshell, eMatter EditionAligning Form Elements
A page with lots of form elements can get real ugly in a hurry. The best favor you
can do for a form is to align the elements in some orderly fashion. There are two
methods for doing this: using the<pre> tag and using a table.The <pre> tagUnlike standard HTML body text, preformatted text (delimited by<pre>tags) is
displayed exactly as it is typed in, honoring multiple character spaces and line
breaks. Using characters wrapped in<pre>tags has been a long-time favorite
cheat for aligning elements on a web page, going back to the Web’s infancy.
If you put your entire form within<pre>tags, you can align the elements by
columns of characters. The drawbacks to this method are that it does not offer
much flexibility for page design and it may be tedious work. The advantage is that
it will be viewed the same way by all viewers, even those using browsers that
don’t support forms in tables (early browser versions, especially early versions of
the AOL browser).Using tables for form alignmentTables are really the best tool available for tidying messy form elements. There is
nothing special about tables used for forms; the same principles and guidelines
outlined in Chapter 10,Tables, apply for this use. However, there are a few points
to keep in mind for better results:- Form elements tend to be rendered with extra space above and below. This
can be problematic when trying to fit a form into a tight table cell. If you
want to lay out a form with a table, it is better to put theelement
within the