O'Reilly logo

Web Design in a Nutshell by Jennifer Niederst

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Affecting the Appearance of Forms

Form elements are automatically rendered by the browser, giving the designer little control over the appearance of the controls themselves. Not surprisingly, the same element may be rendered slightly differently on different browsers and platforms (see Table 12.2).

To make things even more interesting, Netscape will resize form elements containing text (text fields, text areas, and scrolling lists) when the constant width font is resized in the browser preferences. So, if a user’s fonts are set to 18 points, a <textarea> could suddenly become huge, and exceed the space you’ve allotted. Like many things on the Web, the way your forms will look is somewhat unpredictable.

Table 12-2. The Appearance of Form Elements on Major Browsers

The Appearance of Form Elements on Major Browsers

Aligning 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> tag

Unlike 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required