Beginner's Guide to XHTML
Wednesday 22nd June 2005 - Saturday 7th January 2006
Categories: Guides, Internet, Code
Forms
So far, the topics covered have been fairly general - at one point or another, you'll probably need to use one. Forms, on the other hand, are not so frequently used, at least on smaller sites. Nevertheless, there are still plenty of uses for them. Note that this is a guide on the XHTML aspect of forms - creating scripts to handle the information won't be covered here.
First of all, we need to tell the web browser that we have a form. As you might expect, to do this, we use the <form> tag. There are also two attributes: method and action. Action is simply the path of the scipt/file/webpage that you want to use. You could use a Perl script, or send it to a PHP page. For the method, you can either use post or get. Generally, you should use post when you don't want information resent accidently by hitting the back button e.g. ordering a vase. If it is a simple form that has no lasting consequences e.g. a search, then use get. For example:
<form method="post" action="/cgi-bin/Submit.pl">
<form method="get" action="/index.php">
Obviously, you need something to put in your form - that code by itself produces nothing visible to the user. One of the most used tags in forms is the <input> tag. The most important attribute is the type. The most basic type is a text box. This should also the attribute name, which identifies the textbox, although not to the user. The attribute size tells the web browser how wide to make the box (in terms of characters), while the maxlength attribute defines the maximum number of characters allowed in the textbox. Note that you don't need the maxlength attribute.
<input type="text" name="colour" size="50" maxlength="40" />
The above code produces this:
You can also have a value entered by default, using the value attribute:
<input type="text" name="colour" size="5" maxlength="2" value="Green" />
The above code now does this:
We can also create a password box. This is identical to a textbox, except that you don't see the characters you've entered on the screen - instead you see asterixes, or something similar. The code is much the same, except the type is password:
<input type="password" name="credit" size="50" maxlength="40" />
The result:
We can also create a larger text box. We do this using the <textarea> tag. As always, this requires a name attribute. We can also define the number of rows and columns using the rows and cols attributes respectively. For example:
<textarea name="story" rows="5" cols="50"></textarea>
Which generates:
You can have a default value by placing some text between the opening and closing tags. For example:
<textarea name="story" rows="5" cols="50">Hello!</textarea>
Which generates:
Now we move on to a few slightly more complicated tags. First up are check boxes and radio buttons. They are both written in the same way, using the <input> tag, except that the type is different. To the user, the difference is that any number of check boxes can be selected, but only a single radio button from a group can be selected.
The other attributes needed are name and value. The name will be the same for the entire group of checkboxes and radio buttons. This is especially important for radio buttons, to make sure that you can only select one radio button of a group. Finally, to have a checkbox or radio button already checked, type checked="checked"As an example of checkboxes:
<input type="checkbox" name="colour" value="red" />Red
<input type="checkbox" name="colour" value="yellow" checked="checked" />Yellow
<input type="checkbox" name="colour" value="blue" />Blue
Note that the name and value attributes are for your use (for wherever the information is sent). To label the boxes or buttons will require ordinary text, or the use another tag that will be covered in a short while. The result is:
Red Yellow BlueFor radio buttons:
<input type="radio" name="favcolour" value="red" />Red
<input type="radio" name="favcolour" value="yellow" checked="checked" />Yellow
<input type="radio" name="favcolour" value="blue" />Blue
The result:
Red Yellow BlueRemember: with checkboxes, you can have as many as you want checked when the page loads, but only one radio button in the same group i.e. the same name can be checked.
The final way for the user to give you information is though a list. This can be a drop down list, or a menu. The format is like so:
<select name="colour">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
Remember that the attributes name and value don't appear to the user. The above code creates this:
If you'd rather have a menu than a drop down list, type size="number" into the <select> tag, replacing number with the number of rows you'd like. For example:
<select name="colour" size="3">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
The result:
You can also set a default value. If you use a drop down list, the default, if you don't set one, is the first option. In a menu, there is no default if not set by you. The deafult can be selected by adding selected="selected" to the relevant option tag, like so:
<select name="colour" size="3">
<option value="red">Red</option>
<option value="yellow" selected="selected">Yellow</option>
<option value="blue">Blue</option>
</select>
Remember that selecting a default is the same with a drop down list. The result:
There are two last types of input, both of which are buttons. The first is a submit button, the second a reset button. In this case, the only other attribute besides the type is value - this is merely the text that will be displayed on the button. For example:
<input type="submit" value="Send" />
<input type="reset" value="Clear" />
You end up with:
That's all you need to create form. However, there is another tag that you will probably want: <label>. This is particularly useful for radio buttons and checkboxes. When you try and select a checkbox or radio button, you expect to be able to click the text next to it to activate that box or button. This is where the label comes in. There are two main ways to use a label. The first is to surround the input with the label, for example:
<label><input type="radio" name="worstcolour" value="red" />Red</label>
<label><input type="radio" name="worstcolour" value="yellow" checked="checked" />Yellow</label>
The result (try clicking the text):
The label can be used with almost any inputs. The other method is to use the attribute for. First of all, each input you want to be labelled needs an id e.g. <id="red">. In the opening label tag, you would then write: for="red". For example:
<input type="radio" name="bestcolour" value="red" id="red" /><label for="red">Red</label>
<input type="radio" name="bestcolour" value="yellow" checked="checked" id="yellow" /><label for="yellow">Yellow</label>
Which produces this:
And that more or less ends this section... unless you use PHP.
PHP
If you do send the form to a PHP page, then you can use two commands to retrieve the information: $var = $_GET['name'] or $var = $_POST['name'], depending on whether you used post or get. The 'name' is simply the name of input/drop down list.
When you do use get, the PHP page will have the URL will have the form inputs appended to it. For example, if you had a box called 'number' with the value '40' entered, and the form was written to submit to index.php, the URL it would generate would be index.php?number=40. The addition of another input might produce the URL index.php?number=40&colour=green, and so on.