Form Presentation | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Unfortunately, often on the Web, little attention seems to be paid to making logical or even presentable forms. For example, take a look at the form in Figure 12-7; notice that nothing is grouped or lined up.

Figure 12-7: Example of a poorly laid-out form

Form Presentation with HTML

Form designers are reminded that other HTML markup elements can be used within forms, so there is no excuse for having a poorly laid-out form. For example, a form can be vastly improved by using a table, as shown in Figure 12-8. The markup for the form using a table is shown here:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" >   <head>   <title>  Form Layout with HTML Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h2>  Contact Form  </  h  2>   <form action="http://www.htmlref.com/scripts/formecho.php"   method="post" name="form1" id="form1">   <table border="1">   <tr>   <td>  First Name:  </td>   <td><input name="firstname" id="firstname" size="40" /></td>   </tr>   <tr>   <td>  Last Name:  </td>   <td><input name="lastname" id="lastname" size="40" /></td>   </tr>   <tr>   <td>  Company:  </td>   <td><input name="company" id="company" size="40" /></td>   </tr>   <tr>   <td>  Address:  </td>   <td><input name="address" id="address" size="40" /></td>   </tr>   <tr>   <td>  City:  </td>   <td><input name="city" id="city" size="25" /></td>   </tr>   <tr>   <td>  State:  </td>   <td><input name="state" id="state" size="2" /></td>   </tr>   <tr>   <td>  Country:  </td>   <td><input name="country" id="country" size="25" /></td>   </tr>   <tr>   <td>  Postal Code:  </td>   <td><input name="zip" id="zip" size="10" /></td>   </tr>   <tr>   <td colspan="2"><br />  Enter any comments below:  <br />   <textarea name="comments" id="comments" rows="5" cols="50"></textarea></td>   </tr>   <tr>   <td colspan="2" align="center"><br />   <input type="submit" value="Submit" />   <input type="reset" value="Reset" /><br /><br />   </td>   </tr>   </table>   </form>   </body>   </html>

Figure 12-8: Form layout improved with a table

Form Presentation and CSS

Obviously, CSS would be more suitable for controlling the look and feel of a form. As expected, under HTML and XHTML both the form element and the various fields defined by input , select , and so on support the class , id , and style attributes to allow access from style sheets. Simple control of look and feel such as font or color is straightforward using CSS, as you can see in the following example:

  <form>   <input type="text" value="but this text is blue"   style="font-family: Arial; color: blue;   font-size: 12px; background-color: lightblue;">   <br /><br />   <input type="submit" value="Submit" style="color: white;   background-color: green; font-weight: bold; font-size: 22px;">   </form>

Getting more ambitious you might want to set borders for a field or even set their dimensions using CSS.

 Field 1:  <input type="text" style="width: 150px; height: 35px;   border-style: solid; border-width: 1px; ">

Unfortunately, some browsers, particularly older ones, may not like sizing fields and many browsers still have trouble with positioned fields. Because of this, some designers stick with standard size attributes and use HTML tables to layout forms.

A very interesting use of CSS with forms is the use of style sheet properties to indicate when a field is selected, using the pseudo-element focus:

 input:focus {background-color: black; color: white;}

A text field that receives focus will thus render with white text and a black background. A complete example using this CSS property, which also uses a background color to indicate required fields, follows ; its rendering in Netscape 7 is shown in Figure 12-9.

Figure 12-9: Using a CSS to indicate field focus

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >   <head>   <title>  CSS Forms: Focus and Required Field  s</title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css" media="screen">  body {background-color: white;}    input.required {background-color: #f3a36d;}    input:focus {background-color: black; color: white;}    label {font-weight: bold;}    label.required {color: red;}  </style>   </head>   <body>   <form action="http://www.htmlref.com/scripts/formecho.php"   method="post">   <label class="required">  Name:  <input type="text" name="name" id="name" size="30" maxlength="50"   class="required" /> (*)</label>   <br /><br />   <label>  Company:  <input type="text" name="company" id="company" size="30" maxlength="50" />   </label>   <br /><br />   <label class="required">  E-mail:  <input type="text" name="email" id="email" size="50" maxlength="100"   class="required" /> (*)</label>   <br /><br />   <input type="submit" value="Submit">   <input type="reset" value="Clear">   </form>   <strong>* = Required Field</strong>   </body>   </html>

Of course, under many browsers advanced aspects of CSS are poorly supported; for example, the input:focus pseudo-element still primarily works only in Mozilla browsers at the time of this edition's writing. Until these issues are cleared up for commonly used browsers, page authors should carefully explore the use of style sheets with form elements before using them.

< Day Day Up >