HTML Forms III

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

<select id="selectlist" name="selectlist">
    <option value="">Select an Option</option>
    <option value="Red">Red</option>
    <option value="Blue" selected="selected">Blue</option>
    <option value="Green">Green</option>
</select>

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

<textarea id="textbox" name="textbox" rows="5" cols="40">Default content here</textarea>

Which would give us

Default content here

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:

<form id="commentform" method="post" action="somepage.php">
    <fieldset><legend>Leave a Comment</legend>
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" size="30" />
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email" size="30" />
        </div>
        <div>
            <label for="url">Website:</label>
            <input type="text" id="url" name="url" size="30" />
        </div>
        <div>
            <label for="comment">Comment:</label>
            <textarea id="comment" name="comment" cols="30" rows="5"></textarea>
        </div>
    </fieldset>
    <div><input type="submit" id="submit" name="submit" value="Submit Comment" /></div>
</form>

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:

#commentform label {
    width: 125px;
    float: left;
}
#commentform div {
    clear: both;
    margin: 5px 0;
}

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.

#commentform label, #commentform input, #commentform textarea {
    display: block;
    margin: 2px 0;
}
#commentform label {
    margin-top: 10px;
}

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

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

1