Home » Tutorials » Accessible, Usable, and Good Looking CSS Forms

Accessible, Usable, and Good Looking CSS Forms

Things that a form should have

In order to make your form nice, accessible, and usable it should have some or all of these things implemented.

1. Fieldsets with legends

Having a form broken down into fieldsets labeled with a legend makes it easy for a user glance at the form and see what is needed. Having fieldsets makes the form logical and gives each field context. To break your form into fieldsets simply decide what kind of information is being asked for. If a user is registering you might need personal information, login information, and some contact information. Those will be the fieldsets. Wrap each section with fieldset tags and then add a legend tag right after the opening fieldset tag to label the fieldset.

2. Make it line up nicely

A well aligned form is pleasing and zen to any user filling it out. I choose to make my form follow a bulleted list format. I like this form flow because most people are used to using a bulleted list and it emphasises the fieldsets. Whether you chose to align the labels to the left or the right, that is up to you. In order to get the form to align the way the picture shows I had to float the labels to the left with a fixed pixel width and left margin. This way the labels and the input boxes both lign up to the left side. If you wanted the input boxes to fallow immediately after the labels then don’t set a pixel width for the left margin on the labels.

form {
width: 400px;
}
form fieldset {
margin: 0;
padding: 10px;
border-width: 1px;
border-style: solid;
border-color: #666666;
background-color:#F5F5F5;
}
form label {
float:left;
width: 100px;
margin-left:50px;
}
input:focus {
border: 3px solid #900;
}

3. Use Access Keys and Tab indexes

Many people who use their computers all of the time or who have mobility isues with thier hands and wrists quickly find it painful and slow to navigate around sites using the mouse. Using the keyboard is much faster and not as stressful on the metacarpals. Keyboard navigation and good keyboard shortcuts are one of the biggest reasons why I love using my Mac. Allowing users to tab through the form is a must and at a minimum your form should have a tab index. Set the tab index by inserting tabindex=”1″ into the opening tag with the number setting the order in which pressing the tab key will bring focus to the element. An access key is setting a keyboard shortcut to set the cursur focus to a specific location or to activate an action. To set an access key for a form, insert into the opening tag of the label: accesskey=”z” That will allow Mac users to use “control” and PC users to use “alt” + the letter that is set in quote. Setting the access keys will allow any user to jump around in the form using keyboard shortcuts. After the access key has been set the user needs to know about it. I chose to inform the user about the shortcut by underlining the corresponding letter in the label. It might also be a good idea to make a note at the top of the form for the user that the shortcuts are there and how to use them. Going this extra mile shows the user that your site or company really cares about them.

4. Show focus

The show focus function is one that I learned recently that I am really excited about. Many browsers by default show the focus in a form my altering the coloring of the text box but you can take control of it to make it match you site’s design and color scheme. The CSS to control this function looks like the following:

textarea:focus, input:focus {
border: 3px solid #900;
}

This CSS focus styling looks like this in FireFox.

5. Prefill with text that disappears when focused on

Pre-filling the input box with hits, help, and examples can be very useful. Not every form needs to utilize this function and should be used on a need only basis. The input tag should include value=”Super Helpful Hint” onfocus=”this.value=”; this.onfocus=null;” to make it work. Example:

6. Form Checks

No, these are not money checks. The input of the user needs to be checked and validated! It is important to check the input both on the client side and the server side. Checking the form is beyond the scope of this article but I wanted to put it here because it is an important aspect of building a safe form.

The form is simple, easy to read, tab-able, and accessible. This Form is laid out completely using CSS and it is easy to set up. You can download the HTML file or view the source code below. If you have any suggestion to make the form better please let me know. I would also love to know about other forms that are unique and nice.

<form>
    <form action="" method="" id="" onsubmit="">
    <fieldset>
        <legend>Personal Information</legend>
            <label for="first" accesskey="f"><u>F</u>irst Name: </label>
            <input type="text" name="first" id="first" tabindex="1" size="20"/>
            <br/>
            <label for="last" accesskey="l"><u>L</u>ast Name: </label>
            <input type="text" name="last" id="last" tabindex="2" size="20"/>
            <br/>
    </fieldset>
    <fieldset>
        <legend>Login Information</legend>
            <label for="password" accesskey="p"><u>P</u>assword: </label>
            <input type="password" name="password" id="password" tabindex="" size="20"/>
            <br/>
            <label for="email" accesskey="e"><u>E</u>mail: </label>
            <input type="text" name="email" id="email" tabindex="" size="20"/>
            <br/>
    </fieldset>
    <fieldset>
        <legend>Contact Information</legend>
            <label for="areacode" accesskey="o">Ph<u>o</u>ne: </label>
            <input type="text" name="areacode" id="areacode" tabindex="" size="3"/>
            <label for="phone"></label>
            <input type="text" name="phone" id="phone" tabindex="" size="13"/>
            <br/>
            <label for="state" accesskey="s"><u>S</u>tate: </label>
            <input type="text" name="state" id="state" tabindex="" size="20"/>
            <br/>
            <br/>
            <label for="button"> </label>
            <input type="submit" value="Submit" id="button"/>
    </fieldset>
</form>

Useful Links -

    * http://css-tricks.com/tips-for-creating-great-web-forms/
    * http://www.websiteoptimization.com/speed/tweak/forms/
    * http://www.cs.tut.fi/~jkorpela/forms/accesskey.html
    * http://www.w3schools.com/htmldom/prop_text_tabindex.asp

Why all the break tags in between each input?

If the form, labels, and the input are are just the right size then the form will look just fine with out all of the break tags that I am using. I inserted the break tags to make sure that each input would be on its own line. With out the break tags the form does fine until the labels and input get to small. When that happens the form turns into this:

source: blog.michaelgrace