HTML form tags

The tags you need to know about when creating a form

There are quite a few specialist tags for forms. What follows is an attempt to cover the most commonly used ones, highlighting where necessary their potential to be customised for a particular use.

Every good form should have a structure not unlike the one about to be explained and illustrated. Form tags exist for a reason so we should always make sure we use them, and use them well.

Note: the <input /> tag is self-closing.


									
										<form action="">
										<fieldset>
										<legend>Your details</legend>
										<label for="firstname">First name</label>
										<input type="text" id="firstname" />
										<label for="lastname">Last name</label>
										<input type="text" id="lastname" />
										<label for="agerange">Age range</label>
										<select id="agerange">
										<option>16-21</option>
										<option>22-34</option>
										<option>35-45</option>
										<option>46 and over</option>
										</select>
										<label for="thoughts">Tell us what you think</label>
										<textarea id="thoughts"></textarea>
										<input type="submit" value="Submit" />
										</fieldset>
										</form>

Make a form. Use its tags wisely.

Forms. They've got form.

Every <form> tag needs the attribute action. It's only essential when you want the form to actually work. When you hand over the HTML the developer will know what to do with it.
Every form should have a <fieldset> or group of fieldsets. These enable us to group the form into meaningful sections.
Every fieldset should have a <legend>. This acts as the title of the fieldset, enabling you to tell the customer what the section is about. You're more than welcome to write a <p>-tags worth of extra copy after the legend if you feel it adds useful information.
Every <input /> (except those of type="submit"), <select> and <textarea> should have a <label>. The label contains the words that describe what the input box or selection drop-down means. Without it, customers won't know what they're being asked to fill in.
Every form needs a <input type="submit" value="Submit" />. A customer needs to be able to send the information they've entered somewhere, so you'll need to make sure this is present and styled appropriately.

That form in the visible spectrum (with no style)

A form!

Adaptable inputs

The <input /> tag is pretty versatile and can be attributed in a few different ways to offer alternative function.

Use the type="" attribute in the following ways:

Text input


									
										<input type="text" />

Type some text in the box.

Radio button


									
										<input type="radio" />

Radio buttons. When used in groups, only one can be selected at any time. In essence it works in the same way as a <select> tag.

Checkbox


									
										<input type="checkbox" />

Check out the checkbox. Enables multiple selections to be made.

The select tag

This form tag enables you to compose a list (like a list of countries of the world), kept in a drop down menu. Its functionality is the same as an <input> tag attributed with a type of radio. This effectively means you can only choose one of the available options. The tag must be constructed like so:


									
										<select>
										<option>Denmark</option>
										<option>Hungary</option>
										<option>Peru</option>
										</select>

Select an option. More countries are available...

The textarea

The <textarea> tag allows us to provide a free text field (i.e. one that enables customers to write anything they want). This can be useful if you're asking customers to answer a question.

You can set attributes for it that govern how many rows and columns it will take up. You are still able to use CSS to control its width and height, though. Here's the markup:


									
										<textarea rows="5" columns="10"></textarea>

The text area that could contain your debut novel...

Applying good form structure

Combining HTML form tags and other tags to optimise layout

When you're required to style forms it makes good sense to utilise other HTML tags within your <form>. This approach gives you more control over positioning and presentation of the form's elements without interfering with its underlying structure. The favoured element to use (along with it's required children) is the definition list: <dl>. Here it is wrapped around our form elements from the previous example:


									
										<form action="">
										<fieldset>
										<legend>Your details</legend>
										<dl>
										<dt>
										<label for="firstname">First name</label>
										</dt>
										<dd>
										<input type="text" name="firstname" />
										</dd>
										</dl>
										...
										</fieldset>
										</form>

A form with additional HTML tags. The ellipsis signifies the rest of the form, abbreviated to save space.

The reason we use other HTML elements is so that all our form elements do not end up with CSS that relates to their layout, only their look-and-feel. Because of the idiosyncrasies of how different browsers render form elements, we avoid their quirks (well, most of them) by separating the CSS onto more manageable elements.

As shown above, the definition list is used for each pair of <label> and <input />s. The <dt> (definition title) wraps around the <label> and the <dd> (definition description) wraps around the <input /> – both are held together by the <dl> (definition list).

Using the <dl> element in this manner means we still retain meaning, because logically the <label> is the title of its referenced <input> (or other type of form input, like <textarea> or <select>), and so the <dl>'s purpose is retained.

This greatly simplifies the challenges involved in styling forms; you can hook all your form layout CSS on the definition list, and style the look-and-feel of the form elements independently.

Other elements

It may be that your form has multiple buttons at its end – not just the required submit button.

Maybe you're creating a form that has more than one page. This is not an unusual approach these days, as it can greatly increase a form's usability and conversion rates when it is split into more manageable chunks of input. Customers are more likely to fill it in when they see a much simplified form.

With this in mind, your form will need pagination, so user's can jump to the form's next part, or even jump back if they need to amend something. Consider using an unordered list – <ul> – to contain the pagination, e.g. an <li> to hold each navigation element. It will increase your control when styling.

HTML forms

The tags and the logic