Tips for HTML Forms

Charlie R. Claywell
Reviewed by Vikki Olds
HTML form 4

Forms will probably not go down in any designer's life as the most enjoyable task to tackle. They can be a pain to deal with, from organizing what content to collect to creating a well-designed appearance. Forms, though, tend to play an important role on many websites, so learning how to build one is often a necessity.

Before You Code

The first step to creating an online form is organizing what you are attempting to collect. The form needs to be organized so that the user progresses through the steps as quickly and easily as possible. This usually means using options like radio buttons to preselect answers, using dropdown menus for lists, and keeping the user's typing down to a minimum.

Parts of a Form

Although forms serve one main purpose -- passing data to the web server -- they can still have quite a few elements in them. Since forms will be communicating with a web server, they need to be connected to an action and a method - so when the user clicks Submit, the form knows what to do.

1. Creating the Framework

HTML form 1 Creating the Framework

The form, legend and fieldset tags create the overall structure of your form. The

tag is the container and so everything will be inside this tag. The

tag is, in essence, the title of your form while the

tag is used to segment out your form in a logical manner on the coding side. For example, if the form has a section for About You, Education History and Work Experience -- each of the three sections would get its own fieldset tag. In much the same way, the

can be used to divide long dropdown menu lists into smaller segments.

<form>

<legend>Tell Us About Yourself</legend>

<fieldset>

About You

Tips for HTML Forms