Designing Forms

Creating functional forms and getting them to work on your Web site is one thing. Once you have that figured out, you may notice that forms, by themselves, are not necessarily very attractive. In many instances, this will be perfectly okay, since forms seldom need to be more than functional. In those instances where you might want to create more "designed" forms, however, you will need to know a few tricks of the trade.

Aligning Forms Controls Using the PRE Element

Because the PRE element preserves spaces, you can use it to line up form controls in your form. For example, form input controls might be lined up in the following manner:

<pre><p>First Name: <input type="text" name="First_Name"
size="25">    Last Name: <input type="text" name="Last_Name"
size="25"></p></pre>
<pre><p>City:       <input type="text" name="City" size="25">
State:     <input type="text" name="State"
size="15"></p></pre>
<pre><p>Zip Code:    <input type="text" name="Zip" size="25">
Country:   <input type="text" name="Country" size="15"
value="USA"></p></pre>
<pre><p>URL:         <input type="text" name="Web_Address"
size="59"></p></pre>

An example is included with the example files that shows a form that is formatted using PRE elements. To check it out, open formdesign1.html in your Web browser from your MyHTML folder (see Figure 7.17).

Figure 7.17: PRE elements can be used to vertically align input controls in a form.

Note that the starting input control in each paragraph element is spaced over so they are vertically aligned. Other spaces are inserted to line up the second column of input controls. PRE elements bracket each of the paragraph elements, so unwanted hard returns won't be inserted and displayed. To see how the remainder of the form is formatted using PRE elements, just open and view formdesign1.html in your text editor.

Aligning Form Controls Using Tables

The main drawback of using the PRE element to vertically align form controls is that all nested text is displayed in the browser's default monospaced font (usually Courier New or Courier), which is not the most eye-appealing of fonts and may not complement the default font (usually Times New Roman or Times). The way around that problem is to use tables, rather than PRE elements, to vertically align form controls. For instance, the same form section that was formatted previously using the PRE element could be formatted using a table in this manner:

<table>
<tr>
  <td align="right">First Name:</td>
  <td><input type="text" name="First_Name" size="25"></td>
  <td>&#160;&#160;&#160;&#160;</td>
  <td align="right">Last Name:</td>
  <td><input type="text" name="Last_Name" size="25"></td>
</tr><tr>
  <td align="right">City:</td>
  <td><input type="text" name="City" size="25"></td>
  <td>&#160;&#160;&#160;&#160;</td>
  <td align="right">State:</td>
  <td><input type="text" name="State" size="15"></td>
</tr>
<tr>
  <td align="right">Zip Code:</td>
  <td><input type="text" name="Zip" size="25"></td>
  <td>&#160;&#160;&#160;&#160;</td>
  <td align="right">Country:</td>
  <td><input type="text" name="Country" size="15"
value="USA"></td>
</tr>
<tr>
  <td align="right">URL:</td>
  <td colspan="4"><input type="text" name="Web_Address"
size="56"></td>
</tr>
</table>

An example is included with the example files that shows a form that is formatted using a table. To check it out, open formdesign2.html in your Web browser from your MyHTML folder (see Figure 7.18).

Figure 7.18: A table can be used to vertically align input controls in a form.

Using Backgrounds with Forms

You can further dress up your forms using background colors or background images. While a background color or image is displayed behind the form, it is not displayed behind the form's input boxes. An example of the table-based form design, but with a background color set, is also included with the example files. To check it out, open formdesign3.html in your Web browser from your MyHTML folder (see Figure 7.19).

Figure 7.19: A background color can create a nice contrast between the page background and the form's input boxes and other controls.