Advanced forms

In you read the article about creating simple contact forms than you know what the most web designers will ever need. For those of you who need some advanced forms, this is the article for you. In this article I will not cover many things, because if you know the basics you could combine the knowledge for creating more powerful forms. When you’re done reading this article you will be able to create advanced forms such as registration form. I wanted to show you how to create nice looking form including text inputs, textarea and checkboxes. I will also show you how to group checkboxes and create description text for the text inputs.

The code

We created some sort of form with three main areas that we grouped using fieldsets. First, we would like to collect some general information from our visitors so we used simple input fields. You can see that we used a <small></small> tag to display a description for each input field. We could use some other tag also, but as <small></small> is rarely used, we decided to use it instead.

After that we wanted to get some information about the interests of our visitors. Each checkbox in this section will be displayed on its 33% of the fieldset area. Finally, we created the last

to put a textarea in it. Notice that in this form, we didn’t include a submit button inside the fieldset. This is because in our case the fieldsets are used to group similar elements. And notice that the form will be equally readable with the styles switched off too.

The styles

fieldset {
	padding:20px;
	border:none;
}
h3 {
	font-size:1.5em;
	padding:0px;
	color:#278DD1;
	font-weight:normal;
}
label, textarea {
	display:block;
}
label {
	font-size:1.1em;
	margin-bottom:10px;
	color:#333;
}
fieldset.group label { 
	display:inline; 
	float:left; 
	width:33%; 
}
input, textarea {
	margin-top:5px;
}
.text {
	width:100%;
	border:1px solid #E5E5E5;
	padding:5px;
}
.button {
	margin-left:20px; 
}
small {
	float:right;
	margin-top:-1.3em;
	font-size:1em;
	color:#888;
	margin-right:-10px;
}

Okay, let me explain the styles. The styles for the fieldset stayed the same as in the simple contact form example. Next style is about the headings that describe each of the groups.

Our labels acts like a containers for the inputs. Inside the labels we have the label text, input field description (<small></small>) and input itself. We would like our labels and textarea to display as blocks. Only the labels inside a fieldset with a “group” class, will be displayed inline and floated left. To have the three checboxes in a row, we used width:33%;. If you want more or less checkboxes just define it here.

The last thing I want to explain in this article is a description text. I used the <small></small> tag for this. Nevertheless you could use some other tag for this kind of need, you should use the tag that won’t be used elsewhere. So, we used <small></small>, floated it right and gave it a negative top margin of 1.3em. float:right; and margin-top:-1.3em; are the most important for displaying the description text. Without these styles the description would display in the continuation of the label text.

The example

Here is our advanced form example.

Further reading

List of CSS-Based forms
Fancy checkboxes and radio buttons at Maratz.com

Update

After the comment from Igor Jelen (on Croatian though), I decided to write an update to the article. If you wish to write semantically correct code, then you should use the tag instead of

. There is a problem when using a LEGEND tag, though. There is absolutely no way, as I can see, that you can force an LEGEND in the next row with CSS (except of using the tag, but not with CSS).

The next thing Igor mentioned to me is usage of <small></small> tag for the description. He said you could use the instead, and address it with fieldset span {...}. I completely agree with him.

So, it’s up to you to choose which method you would use. I like the H3 (you use some other heading as well), because it helps me to control the Content Management Systems we use and the client inputs.