Breadcrumbs
Too Easy XHTML - Forms [6]
- Author
- 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.