Creating Fancy design forms using CSS

Designing a great looking website tailored to meet the present day admirable styles will add wonders to the website. Often you will find form elements that are derived from native operating system widgets that make it particularly difficult to style. The forms also get critical to the functioning of the website - as they are most often employed as search boxes, inquiry forms and shopping cart checkouts - and need to function as smoothly as possible in order to meet user expectations.

Forms are the most attractive part of the website where you must invest most of your time and energy to ensure perfect level of user accessibility and user friendliness. Forms are capable of representing one of the most complex interactions that can occur on a web page and most of the time these forms are represented visually - through the proximity of a form element to its label, or grouping by borders and also background color sets. User accessibility becomes highly essential as screen users might often fail to see these visual clues, unless user accessibility is perfect. The primary element behind providing an accessible form is to have descriptive labeling of all the sections and input elements. In other words, it means proper utilization of two important elements - label and legend.

Labeling form elements

All form elements and their labels conform to a general pattern:

1. The form element itself
2. A text label for the element
3. A proper connection between the element and its textual description

This connection is made through visual grouping, visual alignment or some other visual indicator.

The main question that arises is how can a user, unable to see a web page, succeed in creating a connection between a form element and its text label, without the visual cues of grouping and proximity. The answer is simple - label element! Label is a special type of element that is applied to the form element to allow its textual description to be semantically linked to the element itself, so that any screen reader can read out the text while encountering its partner form elements.

To use a label, you need to wrap the textual description in a pair of label tags, add an attribute to the label. However, the value for attribute must be the id of the form element with which you want to create a connection.

    <label for="firstName">First name</label>
    <input id="firstName" name="firstName" type="text" />

When a screen reader encounters the firstName field, it will also read the text “Firstname” to the user, so he or she will know exactly what to type into that field.

However, a label should be applied to any form elements that does not automatically include descriptive texts like:

• Checkboxes
• Radio buttons
• Text fields
• Select boxes
• Textareas

Legend - Grouping related elements

Legend is compatible with fieldset. A fieldset is a group of related form elements. For example, state, country, street address, zip code, and suburb can be grouped under “postal address”.

<form action="example.php">
    <fieldset>
        <legend>Postal Address</ legend>
            <label for="street">Street address</label>
            <input id= "street" name= "street" type= "text" />
            <label for = "suburb">Suburb</ label>
            <input id= "suburb" name= "suburb" type= "text" />
    </fieldset>
</form>

So with fieldset’s legend elements in place, it becomes quite easy to determine visually which field should fall under which group, even on an unstyled form.

So a proper combination of label and legend, gives visually impaired users, the perfect ability to navigate and fill in forms easily. Using this combination as the basic structure for forms, you will ensure that not only they look fantastic; they will be accessible as well.

Popularity: 61% [?]

Categories: CSS Forms, CSS Tips, Posted on January 30, 2008 by Choppr | Login