HTML Forms Part I

Forms provide a way for you to get feedback from your site visitors, perhaps as a contact form or a comment form on your blog posts. They’re a more advanced part of your site but very useful to have.

A form can consist of text inputs, checkboxes, radio buttons, select lists, textareas, hidden inputs and file uploads, all of which will be explained next week. This week I’m going to explain the basic layout/markup of a form.

Standard Markup

The standard markup of a form consists of the following HTML tags:

form

The form tag surrounds the entire form. It has at least 2 required attributes and a number of optional ones, the more common are listed below:

method

A form must have either one of two method values, either ‘get’ or ‘post’.

action

The action attribute value contains a URL of where to send the form data to for processing. It can also contain a mailto link to enter the data into an email.

enctype

The enctype attribute is optional, and usually only used when you want to allow file uploads within the form, taking the value of ‘multipart/form-data’.

id

A form can contain an id attribute to identify the form for styling and scripting (JavaScript). The value must follow the rules of only unique IDs allowed on a page.

A popular but deprecated attribute for the form tag is ‘name’. This is still very commonly used however instead of name, the id attribute should be used.

An example form markup is:

<form id="formname" method="post" action="form-process.php">
...
</form>

fieldset

The fieldset tag logically groups together specific field elements, for example, a form asking for personal details and then comments could have two fieldsets, one to group the personal details together, and the second to group the comments section together.

By default a fieldset will draw a box around the grouped elements. Fieldsets can also be nested within each other.

legend

This defines a title for the fieldset and must be used within a fieldset, right after the opening fieldset tag, eg.

<form id="formname" method="post" action="form-process.php">
    <fieldset><legend>Personal Details</legend>
        ....
    </fieldset>
    <fieldset><legend>Comments</legend>
        ....
    </fieldset>
</form>

The legend appears within a gap in the fieldset box/border, and is usually bold by default.

label

Every form element, except buttons, should have a label associated with it. A label contains the text relating to the element. There are two ways to connect the label and the element; you can wrap the text and the field element within the label tag, however the more ideal way is to use the for attribute. The value of the for attribute should be equal to the value of the id attribute on the field element eg.

<label for="firstname">Firstname:</label> <input type="text" id="firstname" name="firstname" />

By default the label tag has no styling associated with it (of course this can be targeted in the CSS). The purpose of the label tag is to connect the text label to the input, and from an accessibility and usability point of view, if the user clicks on the label text it will insert the cursor into the field, check a checkbox or radio button, or select the select list (for further use with the arrow keys).

As mentioned, you can also just wrap a field element and its text within the label tag, which is fine for most of the field elements, however this can stop select lists from working in certain browsers, so it’s usually a better idea to use the for attribute as explained above.

Next week I’ll explain the various field elements that you can use, and how/when to use them.

Written by Sarah from Stuff By Sarah
Posted on February 19th, 2009 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

10