11.12: Forms and CSS

Prior to CSS, tables were used to control the layout of form control elements. In fact it is not uncommon today to find form controls organized on a page using tables.However, the table approach is outdated and does not provide support for users with accessibility issues. An alternative and modern approach is to use CSS to format and display form controls. The advantage to using CSS is that it requires less code - elimination of table tags and the line break tag. The code below demonstrates how to layout form controls using CSS.

    <style>
  
    form {padding:10px}
    label {width: 120px; float:left; text-align:right;
            margin-top: 10px; padding-right:10px;clear:left}  
    input {margin-top: 10px;display:block}  
  
    #mySubmit {margin-top:10px;padding-bottom:10px}
  
    </style>
 
    ----------------------------------------------- 
  
    <div>

        <form>

        <label for="FName">First Name:</label>
        <input type="text" id="FName">
        <br>
        <label for="LName">Last Name:</label>
        <input type="text" id="LName">

        <input type="submit" value="Submit Form">

        </form>

    </div>

First Name:
Last Name:

 

Using the CSS method, label element selectors are key to aligning the text - this selector is configured to on the left with the text aligned to the right. The float causes the input controls to wrap around the right side of the labels. The input controls are also configured with a top margin. The submit button is styled using the "mySubmit" id selector. Left margin and bottom padding are applied to the submit button.

A more complex form is shown below. Notice that the same CSS can be used to control the layout of the form.

First Name:
Last Name:
State: Georgia Florida South Carolina 

Male
Female

    <style>
  
      form {padding:10px}
      label {width: 120px; float:left; text-align:right;
             margin-top: 10px; padding-right:10px;clear:left}  
      input {margin-top: 10px;display:block}  
  
      #mySubmit {margin-top:10px;padding-bottom:10px}
  
      </style>
 
     ----------------------------------------------- 
  
    <div>

    <form>

    <label for="FName">First Name:</label>
    <input type="text" id="FName">

    <br>

    <label for="LName">Last Name:</label>
    <input type="text" id="LName">
    
    <br>

    <label id="LState" for="State">State:</label>

    <select id="State">
    <option value="GA">Georgia</option>
    <option value="FL">Florida</option>
    <option value="SC">South Carolina</option>
    </select>
    
    <br>

    <label for="male">Male</lable>
    <input type="radio" name="gender" id="male" value="male">
    <br>
    <label for="female" id="lfemale">Female</label>
    <input type="radio" name="gender" id="female" value="female">
    
    <br>

    <input type="submit" value="Submit Form">

    </form>

    </div>

This demonstrates the flexibility of using CSS to control the layout of a form control. Regardless of the number of controls and labels, the same CSS can be used to organize the form controls with the use of a table or excessive line breaks.

In addition to the layout of the form, CSS can be used to enhance the overall look and usability of the form. The examples below illustrate how CSS is used to first organize the layout of the form, and then enhance the look and usability.

First, we begin with the basic form layout as described in the previous sections.

Name:Address:City:State: Georgia Florida South Carolina Zip:
 

Next, we add a fieldset and legend tag to group the related form control elements and include a caption. The entire fieldset is placed inside of a div element for further styling.

Mailing Address

Name:Address:City:State: Georgia Florida South Carolina Zip:

    <form>

    <div id="fieldset">
    <fieldset>
    <legend>Mailing Address</legend>

    <label for="FName">First Name:</label>
    <input type="text" id="FName">

    <label for="LName">Last Name:</label>
    <input type="text" id="LName">


    <label id="LState" for="State">State:</label>

    <select id="State">
    <option value="GA">Georgia</option>
    <option value="FL">Florida</option>
    <option value="SC">South Carolina</option>
    </select>

    <label for="male">Male</label>
    <input type="radio" name="gender" id="male" value="male">
    <br>
    <label for="female" id="lfemale">Female</label>
    <input type="radio" name="gender" id="female" value="female">

    <input type="submit" value="Submit Form">
    </fieldset>

    </div>
    </form>

First, we edit the CSS to style the <div>. The <div> is styled to include a background color, width, and a thin border.

<style>
    div#fieldset {background-color:tan;width:500px;border:solid black thin}
</style>

Mailing Address

Name:Address:City:State: Georgia Florida South Carolina Zip:

 

Next, the legend text is styled, and a background color is applied

    legend {font-size:20px;background-color:green;color:white;width:100%;}
    

Mailing Address

Name:Address:City:State: Georgia Florida South Carolina Zip:

 

Padding is added to increase the amount of space surrounding the legend text.

    legend {font-size:20px;background-color:green;color:white;width:100%;padding:5px}

Mailing Address

Name:Address:City:State: Georgia Florida South Carolina Zip:

 

Notice that the default fieldset border is still visible. We can remove this by setting the border width to 0.

    fieldset {border:0}

Mailing Address

Name:Address:City:State: Georgia Florida South Carolina Zip:

 

Finally, we adjust the fieldset margin settings so that the legend aligns properly.

    fieldset {border:0;margin: 0 0 0 -10px}