PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

HTML Forms III

Posted by on 5th Mar 2009 | 1 comment

The final installment of this series about forms, their usage and markup. You can catch up on the previous posts at Part 1 and Part 2.

Last week we covered the main form input type which was, appropriately named, the input tag. This now leaves us with select lists, textareas and then a couple of standard layouts.

Select Lists

A select list is a cross between the radio buttons and checkboxes seen last week. If you force a select list to only allow one item to be selected, then it’s a compact version of a group of radio buttons, however, if you allow multiple options to be selected then it’s similar to a group of checkboxes. The attributes for the select tag are:

id
This is the id of the tag and needs to be the same as the value of the label’s for attribute. It also needs to be the same as the value of the name attribute (below)
name
This should contain the same value as the id attribute.
disabled
This denotes whether the list is disabled or not. It can only accept one value of ‘disabled’
multiple
If used this allows users to select multiple options. It can only accept one value of ‘multiple’
size
This sets the height of the select list. If the value is 1 (the default if the attribute is omitted) then the select list is a drop down list. Any value above 1 and the select list is a scrolling box

Options

Options are contained with a select list. They have a value which is hidden from view, and contain the option content which is displayed in the select list. The two main attributes for an option are

value
Contains the hidden value for the option.
selected
Denotes if the option has been selected. This can only accept one value of ‘selected’

An example of a select list is

[sourcecode language=”html”][/sourcecode]

Which would give us

Textareas

A textarea is similar to a text input except instead of a 1 line box for the text you can specify how many rows and columns to have, creating a box for the text. The main attributes available for the textarea tag are:

id
This is the id of the tag and needs to be the same as the value of the label’s for attribute. It also needs to be the same as the value of the name attribute (below)
name
This should contain the same value as the id attribute.
rows
How many rows the text box should display on screen (this doesn’t limit how many rows the user can add)
cols
How many columns the text box should display on screen (again, this doesn’t limit how much the user can type, however their content will wrap when it reaches the final column)
disabled
This denotes whether the textarea is disabled or not. It can only accept one value of ‘disabled’

Unlike a text input, a textarea doesn’t accept the value in an attribute. Instead the textarea wraps around the value/content for it. Example usage would be

[sourcecode language=”html”][/sourcecode]

Which would give us

Standard Layouts

So now we’ve covered all of the main aspects of marking up a form we can look at 2 standard layouts. These are

  1. Labels to the left and corresponding inputs/select/textarea to the right
  2. Labels above their corresponding input/select/textarea

From a markup point of view, both of these layouts can use the same markup with different styling applied (note, there are plenty of ways to mark up forms, this is just the method I find the easiest). For example, a simple comment form on a blog post:

[sourcecode language=”html”]

Leave a Comment




[/sourcecode]

As you can see, each input has a label and each label/input pair is surrounded by a div. This is to help us control the spacing and clearing. To set up a form with labels to the left and the inputs to the right we can use code similar to the following:

[sourcecode language=”css”]#commentform label {
width: 125px;
float: left;
}
#commentform div {
clear: both;
margin: 5px 0;
}[/sourcecode]

To have a form display with the label above the input/select/textarea we can use the following CSS. Note, we could actually remove the div tags around the label/input pairs and the CSS below would continue to work fine.

[sourcecode language=”css”]#commentform label, #commentform input, #commentform textarea {
display: block;
margin: 2px 0;
}
#commentform label {
margin-top: 10px;
}[/sourcecode]

For further information on layouts and how to style and mark them up I recommend reading Style:Phreak’s Standard Form Layout Revisited.


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

1 comment - Leave a reply
  • Posted by Barbara Ling, Virtua on 6th Mar 2009

    Putting default content into text boxes can help guide readers should they be confused. It's one of my favorite techniques when trying to handhold visitors on particular pages.