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.
The standard markup of a form consists of the following HTML tags:
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:
- A form must have either one of two method values, either ‘get’ or ‘post’.
- 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.
- 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’.
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:
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.
This defines a title for the fieldset and must be used within a fieldset, right after the opening fieldset tag, eg.
The legend appears within a gap in the fieldset box/border, and is usually bold by default.
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.
[sourcecode language=”html”] [/sourcecode]
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.