Format accessible forms using CSS

In this CSS tutorial we will look deeper inside the building of a form. You see forms everywhere on the web and they are most often used to gather information about the visitors. The examples are everywhere: contact forms, polls, surveys, search forms.

There are a couple ways to produce a proper formatted form. A couple years back, I did the formatting with tables, because I simply didn’t hear from CSS (it was there, but not as popular as it is now!). It worked alright, but in today’s web-world you should better use CSS to do all your formatting.

Today, we will create a fully accessible, proper formatted form. This form should be accessible for almost everyone.

The beginning

We’ll start with the structure of the form. Take a look below:

HTML

<form id="info" method="post"> <fieldset>
<legend>General Information</legend>
<ul>
	<li> <label title="Name" for="name">Name <span>*</span></label> <input id="name" name="name" type="text" /></li>
	<li> <label title="Email" for="email">Email <span>*</span></label> <input id="email" name="email" type="text" /></li>
	<li> <label title="Address" for="address">Address </label> <input id="address" name="address" type="text" /></li>
	<li> <label title="Postcode" for="postcode">Postcode </label> <input id="postcode" name="postcode" type="text" /></li>
	<li> <label title="Comments" for="comments">Further Comments </label> <textarea id="comments" name="comments"></textarea></li>
</ul>
</fieldset>
<fieldset>
<input id="Submit" name="Submit" type="submit" value="Submit" />
<input id="Reset" name="Reset" type="reset" value="Reset" />
</fieldset>
</form>

HTML Explanation

The fieldset element is there to divide our complete form in different parts. Say a “General Information” part, a “Specific information” part etc. We give a name to that fieldset by adding a legend element to it. You’ll see what that will give in a working example.

<ul> and <li>

We are moving on; In the next codes, you’ll see the ul and li elements. This is an un-ordered list and is used to style all the question/answers in the same way. We “order” the questions and answer fields using a list.

Inside the <li> element

You will see that inside the li element a label, a span and input element are placed. The label element is there to connect the question to the answer field. When you click on the question your focus moves right to the answer field. The title is there to give your visitors more accessibility options.

Asterix

I’ve placed the asterix sign inside the span element to indicate which fields are required. The input element is the field where your visitor should answer your question. Nothing hard about that I guess.

As you might notice, I didn’t use any div elements in the structure. We don’t need them, as we are able to style our form using these basic codes.

Let’s format

If you understand the structure of our form, I will start explaining the formatting via CSS, if not, read the whole article again. Let’s go.

CSS

ul{
list-style:none;
margin-top:5px;}
ul li{
display:block;
float:left;
width:100%;
height:1%;}
ul li label{
float:left;
padding:7px;}
ul li input, ul li textarea{
float:right;
margin-right:10px;
border:1px solid #ccc;
padding:3px;
font-family: Georgia, Times New Roman, Times, serif;
width:60%;}
li input:focus, li textarea:focus{
border:1px solid #666; }
fieldset{
padding:10px;
border:1px solid #ccc;
width:360px;
overflow:auto;
margin:10px;}
legend{
color:#444;
margin:0 10px 0 0;
padding:0 5px;
font-size:100%; }
label span{
color:#f00;  }
fieldset input#Reset, fieldset input#Submit{
background:#E5E5E5;
color:f00;
border:1px solid #ccc;
padding:5px;}

CSS Explanation

I will explain some of the codes that might be hard to understand to the beginning CSS designer. ul li input:focus makes the form for non-Internet Explorer- users more accessibile. Read more about this in the following article.

The fieldset input#Reset, fieldset input#Submit style declarations are there to style the Submit and Reset button. They need a proper look as well, right?

I think the rest is quite understandable. If not, please leave a comment or email me.

There you are

And there is your nice looking, accessible CSS based form. This tutorial form is there to learn you the basics of an Accessible CSS based form, and it is up to you to think of the thousands of variants that are waiting to be designed! Good luck with experimenting your way to the top.