Breadcrumbs

Too Easy XHTML - Forms [6]

Author
Ethan Poole
Date
Thu 14 Apr 2005 at 19:02

In the previous parts of this guide you've learned how to display data, but never how to take input from the user. Using web forms XHTML offers you an array of form elements to take user input. Here in Part 6 of Lowter's XHTML Guide, we'll look at XHTML's form tag and form elements.

Form Tag

To begin your form markup you first must declare a form using XHTML's <form> tag:

Code: XHTML

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

XHTML Strict applies a heavy set of rules to form tags (and elements). Form tags are required to have the action attribute. The action attribute holds the location of where the form data and user will be sent when submitted. XHTML does not offer capabilities of working with data, but rather you would pass the data to a scripting language such as PHP or ASP.

If you look in the above code you'll also see the method attribute. This holds the method by which the form data will be sent. By default this attribute's value is get.

Also make note that <form> tags cannot be nested. Form element tags also cannot be directly within the <form> tag, but rather nested in another tag. For the sake of simplicity, for the remainder of this tutorial we will place form elements within a paragraph tag (<p>).

Input Tag

Most form elements use the <input> tag, with the exception of the multi-lined text area and drop down list that we'll touch on later. Each specific form element is further defined using the type attribute, which you'll see shortly. Make note that <input> tags are self closing.

Input Fields

The most common form elements that you will use are input fields, simple one lined text fields to collect an assortment of data. They make use of the <input> tag:

Code: XHTML

<input type="text" name="inputname"/>

Defining the <input> tag as a text field is done by simply making "text" the value of the type attribute. Input tags also require a name attribute that gives a label for the data when it is passed to the processing page. Make sure that the name of the input field describes the data thoroughly, this makes it easier when you process forms using PHP or ASP.

Radio Buttons and Checkboxes

If you want to limit the user to a certain list of choices then you have radio buttons and checkboxes. Radio buttons allows a user to choose only one option from a list, while checkboxes allow the user to selection multiple options. Both use the <input> tag:

Code: XHTML

<form method="post" action="process.php">
    <p>
        <input type="radio" name="hair" value="brown"> Brown<br />
        <input type="radio" name="hair" value="blonde"> Blonde<br/ >
        <input type="radio" name="hair" value="red"> Red
    </p>
</form>

Code: XHTML

<form method="post" action="process.php">
    <p>
        <input type="checkbox" name="hair" value="brown"> Brown<br />
        <input type="checkbox" name="hair" value="blonde"> Blonde<br/ >
        <input type="checkbox" name="hair" value="red"> Red
    </p>
</form>

Radio buttons use "radio" as the value of the type attribute. Checkboxes uses "checkbox" as the value of the type attribute. Both also collectively use the same name spanned over multiple tags. This shows that they're related to each other and sends the data as one variable, which is useful when you're processing data.

You also see a new attribute, the value attribute. This is the value of the checkbox/radio button that will be sent when the data is submitted. You can use the value attribute on any input tag. With the text field it sets predefined text within the input area.

Submit Buttons

Submit buttons trigger the browser to send the data within the form to the destination specified in the action attribute of the <form> tag. They make use of the <input> tag:

Code: XHTML

<form method="post" action="process.php">
    <p>
        <input type="submit" name="submit" value="Submit" />
    </p>
</form>

Setting the type attribute's value to "submit" will display a submit button. Both the name and value attributes are not required. The value attribute specifies the text that the browser will display on the button. The name attribute serves no purpose, and is not required in XHTML Strict.

When a visitor clicks the submit button the form contents are then submitted. A form without a submit button cannot be sent (depending on the web browser). Forms without submit buttons can be useful in DHTML and JavaScript, but otherwise are considered "useless".

Drop Down Lists

Unlike other form elements, drop down lists don't use the <input> tag, but rather the <select> tag. With the combination of the <select> tag and <option> tags, nested within it, you can define selectable lists:

Code: XHTML

<form method="post" action="process.php">
    <p>
        <select name="dropdown">
            <option value="one">One</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
        </select>
    </p>
</form>

Above you see two new tags, <select> and <option>. Select defines the drop down list and uses the name attribute, which is identical to the name attribute of the <input> tag.

The <option> tags define the various options of the drop down list. The <option> tag should always have, although it isn't required, a value attribute. This attribute sets the value that will be sent if that value is selected. So if I select "One", then the value "one" will be sent.

Text Areas

Text areas are similar to input fields, except are multi-lined. They also use their own tag and set of attributes:

Code: XHTML

<form method="post" action="process.php">
    <p>
        <textarea name="text" rows="30" cols="20"></textarea>
    </p>
</form>

The <textarea> tag is required to have the rows and cols attributes, each defines rows and columns of the text area. XHTML Strict requires these two attributes. The name attribute isn't required, but makes form processing an easier job. To set predefined text within the text area, place the text between the opening and closing tags and it will appear in the text area.

Summary

You've skimmed the surface of XHTML forms in Part 6 of the XHTML Guide. Although you've covered the main topics of forms, the field is vast and there is more yet to be covered. In Part 7, the last article of the series, we will take a final look at tables in XHTML to organize tabular-data.