CSS : Forms - [5] Introduction

Forms make the Web go 'round. Without forms we wouldn't be able to log in to web-based email accounts, order books with one click, or trade stocks online. The downside to forms, however, is the generic way in which browsers display them. In short, HTML forms usually look ugly and boring. The default rendering of online forms usually includes beveled input and textarea fields, as well as boring-looking buttons. Such a look and feel might be acceptable if you are making a form for use on a small intranet or on a personal web page, but it is unacceptable if you want to project a professional image. Fortunately, with a few CSS rules, you can create forms that stand out from the pack. If you are designing a company web site, for instance, you can create forms in the same color as the company's logo. What's more, you can implement rollover effects on Submit buttons without having to replace the buttons with an image. CSS provides much control over the presentation of your forms and this chapter helps you get straight into the techniques. You will learn the settings for HTML user input elements such as buttons, text areas, and fields. Another technique covered is how to set up a submit-once-only button to keep site visitors from mistakenly sending several processes to the server. At the end of the chapter are two sample designs: a simple log-in form without tables and a long registration form with tables.

CSS : Forms - [5.1] Setting Styles for Input Elements

Problem

You want to change the appearance of input elements' background color. Such effects can take you from Figure 5-1 to Figure 5-2.

Figure 5-1. The form without styles

Figure 5-2. Styles applied to the input fields

Solution

Use a class selector to design the input elements of the form:

<h2>Simple Quiz</h2>

 <form action="simplequiz.php" method="post">

 <p>

  Are you 

   <input type="radio" value="male" name="sex" 

class="radioinput">

  Male or 

   <input type="radio" value="female" name="sex" 

class="radioinput"> 

  Female?

 </p>

<p>

 What pizza toppings do you like? <input type="checkbox" name="" 

value="l" class="checkbxinput"> Pepperoni <input type="checkbox" 

name="" value="mushrooms" class="checkbxinput"> Mushrooms <input 

type="checkbox" name="" value="pineapple" class="checkbxinput">

 Pineapple

 </p>

CSS : Forms - [5.2] Setting Styles for textarea Elements

Problem

You want to set styles for textarea elements in a web form to change the text's color, size, weight, and other properties of the element, as in Figure 5-4.

Figure 5-4. A textarea element with styles applied

Solution

Use a type selector to associate styles with textarea elements:

textarea {

 width: 300px;

 height: 100px;

 background-color: yellow;

 font-size: 1em;

 font-weight: bold;

 font-family: Verdana, Arial, Helvetica, sans-serif;

 border: 1px solid black;

}

Discussion

Associating styles to textarea elements is fairly straightforward through the use of a type selector:

textarea {

 background-color: blue;

}

By adding the :focus pseudo-class, you can change the style of the active textarea field:

textarea:focus {

 background-color: green;

}

So, as a user fills out a form, the textarea field he is currently filling out will change color.

The browsers that currently support :focus are Netscape Navigator 6+ and Opera 7.

CSS : Forms - [5.3] Setting Styles for Select and Option Elements

Problem

You want to alter the look of list menus in a form by changing the color and font, as in Figure 5-5.

Figure 5-5. The select and option elements with styles applied

Solution

Use a type selector to associate styles with select elements:

select { 

 color: white; 

 background-color: blue;

 font-size: 0.9em;

}

option {

 padding: 4px;

}

Discussion

CSS : Forms - [5.4] Creating Form Buttons

Problem

You want to stylize the color, padding, borders, and rollover effects for Submit and Reset buttons on a form. Figure 5-7 shows a form without styles applied to the buttons, and Figure 5-8 shows the form with stylized buttons.

Figure 5-7. The form buttons without styles applied

Figure 5-8. The form buttons with styles applied

Solution

First use a class selector to design the buttons:

<form action="simplequiz.php" method="post">

 <label for="question">Who is president of the U.S.?

</label>

 <input type="text" name="question" id="textfield"

 value="Type answer here" /><br /> 

 <input name="reset" type="reset"  value="Reset"

 class="buttonReset" />

 <input type="submit" name="Submit" value="Submit" 

class="buttonSubmit" />

</form>

Then use CSS to stylize the buttons:

.buttonReset {

 color: #fcc;

 background-color: #900;

 font-size: 1.5em;

 border: 1px solid #660;

 padding: 4px;        

}

CSS : Forms - [5.5] Setting Up a Submit-Once-Only Button

Problem

You want to keep people from clicking the Submit button more than once.

Solution

First create a class for keeping the button from being displayed:

.buttonSubmitHide {

 display: none;

}

Then use the following JavaScript programmed to switch styles by class selectors:

<script language="JavaScript" type="text/javascript">

function classChange(styleChange,item) {

 item.className = styleChange;

}

</script>

Now trigger the function by using an onsubmit event to remove the Submit button from the web document:

<h2>Order Confirmation</h2>

<form action="login.php" method="post"

 onsubmit="classChange('buttonSubmitHide',submit); 

return true">

 <div align="center">

  <p>Are you sure you want to purchase 12 cans of soda over the 

Web?</p>

  <label for="uname">Final Price:</label>

  <input type="text" name="uname" id="uname" value="$7.95" />

<br />

   (includes tax, s+h extra)<br />

  <input type="submit" name="submit" value="submit" 

class="buttonSubmit" />

 </div>

</form>

Discussion

The JavaScript function in the Solution triggers a change in which a style is applied to the element. You must use the form's onsubmit event to execute the function so that the form's action will still be executed. If the function were triggered with an onclick event on the Submit button, some browsers would execute only the class-changing function. Then, because the button is no longer visible, the user would not be able to trigger the form.

CSS : Forms - [5.6] Designing a Web Form Without Tables

Problem

You want to include form fields and labels on rows without using an HTML table, thereby ensuring a pure CSS-enabled layout without using any markup for presentation.

Solution

First use labels in conjunction with the form fields in the markup (see Figure 5-10):

<form action="login.php" method="post">

 <label for="uname">Username</label>

 <input type="text" name="uname" id="uname" value="" /><br />

 <label for="pname">Password</label>

 <input type="text" name="uname" id="uname" value="" /><br />

 <label for="pname">Remember you?</label> 

 <input type="checkbox" name="recall" id="recall"  

class="checkbox" /><br />

 <input type="submit" name="Submit" value="Submit" 

class="buttonSubmit" />

</form>

Figure 5-10. The form without styles applied

Then set the display and label properties for the label elements to block, float the label elements to the left, and justify the text on the right (see Figure 5-11):

input {

 display: block;

CSS : Forms - [5.7] Sample Design: A Login Form

Login forms are all over the Web. For instance, you need a login and a password to check your email on the Web, order books from Amazon.com, and even pay that parking ticket online.

Only a few components of a login form are visible to the user: the input field's Submit button and labels as well as the username and password fields themselves. Here is the markup of the form to be stylized (Figure 5-12 shows the input field without styles applied):

<form action="login.php" method="post">

 <label for="uname">Username</label>

 <input type="text" name="uname" id="uname" value="" /><br />

 <label for="pword">Password</label>

 <input type="text" name="pword" id="pword" value="" /> <br /> 

 <input type="submit" name="Submit" value="Submit" />

</form>

Figure 5-12. The login form without styles

First, add a character after the text in the label element. Use the :after pseudo-class property to autogenerate the character:

label:after {

 content: ": ";

}

Next, to make the labels stick out from the form fields, change the background color of the labels and the weight of the font. Through CSS, change the labels so that they have a gray background and black text set in bold type (see Figure 5-13):

label {

 background-color: gray;

 color: black;

 font-weight: bold;

}

Figure 5-13. Styles for color applied to the label elements

CSS : Forms - [5.8] Sample Design: A Registration Form

For some forms you might want to place the form elements into a two-column table, with the labels in one column and the fields in the other. Example 5-1 provides the code. Figure 5-21 shows the form and tables without styles applied.

Example 5-1. Stylized long form

<form action="registration.cfm" method="post"> 

  <table cellspacing="0"> 

    <tr class="header"> 

      <th colspan="2">Account Information</th> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Login Name*</th> 

      <td><input name="uname" type="text" size="12" 

maxlength="12" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Password*</th> 

      <td><input name="pword" type="text" size="12" 

maxlength="12" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Confirm Password* </th> 

      <td><input name="pword2" type="text" size="12" 

maxlength="12" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Email Address*</th> 

      <td><input name="email" type="text" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Confirm Email*</th> 

      <td><input type="text" name="email2" /></td> 

    </tr> 

    <tr class="header"> 

      <th colspan="2">Contact Information</th> 

    </tr> 

    <tr class="required"> 

      <th scope="row">First Name* </th> 

      <td><input name="fname" type="text" size="11" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Last Name* </th> 

      <td><input name="lname" type="text" size="11" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Address 1*</th> 

      <td><input name="address1" type="text" size="11" /></td> 

    </tr> 

    <tr> 

      <th scope="row">Address 2 </th> 

      <td><input type="text" name="address2" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">City* </th> 

      <td><input type="text" name="city" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">State or Province*</th> 

      <td><select name="state"> 

          <option selected="selected" 

disabled="disabled">Select...</option> 

          <option value="alabama">Alabama</option> 

        </select></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Zip*</th> 

      <td><input name="zipcode" type="text" id="zipcode" 

size="5" maxlength="5" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Country*</th> 

      <td><input type="text" name="country" /></td> 

    </tr> 

    <tr class="required"> 

      <th scope="row">Gender*</th> 

      <td> <input type="radio" name="sex" value="female" /> 

        Female

        <input type="radio" name="sex" value="male" /> 

        Male </td> 

    </tr> 

    <tr class="header"> 

      <th colspan="2">Misc. Information</th> 

    </tr> 

    <tr> 

      <th scope="row"> Annual Household Income </th> 

      <td> 

       <select name="income" size="1" > 

         <option selected="selected" disabled="disabled">

Select...</option> 

          <option value="notsay">I'd rather not say</option> 

        </select> </td> 

    </tr> 

    <tr> 

      <th scope="row">Interests</th> 

      <td><input name="interests" type="checkbox" 

value="shopping-fashion" /> 

        Shopping/fashion

        <input name="interests" type="checkbox" 

value="sports" /> 

        Sports

        <input name="interests" type="checkbox" 

value="travel" /> 

        Travel</td> 

    </tr> 

    <tr> 

      <th scope="row">Eye Color</th> 

      <td><input name="eye" type="checkbox" value="red" /> 

        Red

        <input name="eye" type="checkbox" value="green" /> 

        Green

        <input name="eye" type="checkbox" value="brown" /> 

        Brown

        <input name="eye" type="checkbox" value="blue" /> 

        Blue Gold</td> 

    </tr> 

  </table> 

  <input type="submit" name="Submit" value="Submit" 

id="buttonSubmit" /> 

  <input type="reset" name="Submit2" value="Reset" 

id="buttonReset" /> 

</form>

Figure 5-21. The form and table without styles applied

The first element to style is the table element. Set the border model as well as the text color and border around the table itself (see Figure 5-22):

table {

 border-collapse: collapse;

 color: black;

 border: 1px solid black;

}