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 <form> tag is the container and so everything will be inside this tag. The <legend> tag is, in essence, the title of your form while the <fieldset> 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 <optgroup label> can be used to divide long dropdown menu lists into smaller segments.

<form>

<legend>Tell Us About Yourself</legend>

<fieldset>

About You

</fieldset>

<fieldset>

Education History, etc.

</fieldset>

</form>

2. Getting User Input

Four common ways of collecting user input are having them select an item from a dropdown menu, type in some text, answer yes or no to a question, or make a selection by placing a check mark in a box.

Selecting from a Dropdown

HTML form 2 Selecting from a Dropdown

In the coding below the user will select their birth month from a dropdown menu inside the <select> tag. To visually simplify the process for them the coding includes the <optgroup> tag to divide the months into two sections. The dropdown menu will default to In What Month Were You Born? since it is the first option in the list. If, however, you wanted it to default to March, you would add selected to the tag <option value="march" selected>.

Typing in a Response

The next action the user will be prompted to take is answer the question How did you hear about us?. They will type their answer inside a region coded as the <textarea>. This tag is reserved for areas where the inputted text is more than just a few words because <textarea> can hold an unlimited number of characters. The amount of space the <textarea> occupies on your form can be controlled by the HTML attributes cols and rows, but the preferred method is to use the width and height properties of CSS. You can also use the placeholder attribute to place text (usually instructions or a hint) inside the text area. This text will disappear once they begin to type.

Answering a Yes/No Question

The next prompt is a yes/no question. For this a radio button is used as the input type and a <label> tag is also used so if they click on the word instead of the circle the radio button will still fill in.

Selecting a Checkbox

HTML form 3 new Selecting a Checkbox

Lastly there is a series of checkboxes to let them choose their favorite sport(s). Since a user can select multiple checkboxes (as opposed to only one radio button in a group) you will need to set a limit on the amount by using a script to set to the maximum or minimum number of boxes you want selected.

<form>

<legend>Our Company</legend>

<fieldset>
<select>
<option value="generic">In What Month Were You Born?</option>
<optgroup label="First Half of Year">
<option value="january">January</option>
....
</optgroup>
<optgroup label="Second Half of Year">
<option value="july">July</option>
</optgroup>
...
</select>

</fieldset>
How did you hear about us?<br />
<textarea placeholder="How did you hear about us?"></textarea>

<br />
Are you over 18 years of age?<br />
<label for="yes">Yes</label>
<input type="radio" name="age" value="yes"><br />
<label for="no">No</label>
<input type="radio" name="age" value="no"><br />

Choose at least two areas of interest<br />

<label for="baseball">Baseball</label>
<input type="checkbox" name="sports" value="baseball"><br />

<label for="basketball">Basketball</label>
<input type="checkbox" name="sports" value="basketball"><br />

<label for="football">Football</label>
<input type="checkbox" name="sports" value="football"><br />

</form>

3. Submit Buttons and Slider Bars

Use the <option> tag to create a submit or go button. The text that appears on the button is pulled from the value attribute inside the <option> tag. For example, for a button that reads GO! The tag would be: <input type="submit" value="GO!"> Slider bars are a handy interactive feature for forms. To include a slider bar that lets the user rate an item (like how useful the form was) you need to use an <input> tag with a type of range. For a slider bar that prompts the user to rate the content on a scale of 1 to 10, use this snippet.

<label>1</label>

<input id="slider" type="range" min="1" max="10" step="1">

<label>10</label>

Making It Look Nice

The key to a well-designed form is twofold: functionality and style. Once the functionality is in place using the tags above, you can create styles that target each of the elements of the form. A common way is to create CSS classes for the various tags like fieldset, label, legend, etc. You can make your form more visually compelling by adding bold colors or graphics.

Tips for HTML Forms