Forms

Forms are one of the more complex objects that we can add to our web pages. Instead of a single tutorial on adding forms I have instead decided to write a series of tutorials that start by showing you how to create a form that has nothing but a submit button and we will gradually add additional fields of different types until we have covered all of the different types of fields that we can add.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Forms</title>
</head><body>
<h1>Forms</h1>
<form action="index.html" method="get">
<div>
<input type="submit" value="Home" />
</div>
</form>

</body></html>

Here's what the Single Button Form page looks like in your web browser.

All form fields in XHTML must be contained within a form container. The form container must have an action attribute that indicates the action that is to be taken if the form is submitted. If a form is being used for a purpose that does not require that it ever be submitted then the action attribute is still required but can contain a simple placeholder (action="#").

The method attribute is required when the form is one that will be submitted and is not required if the form will not be submitted. The method attribute controls how the form fields are submitted. If method="post" then the form fields are passed in the HTTP header to the following web page. That page must support some form of server side processing in order that the posted fields can be extracted and made available in the page. The alternative method="get" passed the fields in a query string added to the end of the address of the next page. The query string follows the ? that the form adds to the end of the address in the action attribute and consists of a series of field=value entries separated by ampersands.

There are two ways to submit a form, one using XHTML and one using Javascript. The XHTML method involves adding a submit button to the form. This button is the first form of the input tag that we are adding to our form. There are several different types of input fields that can be added using input tags and what type we want is selected using the type attribute that must appear in each input field. Input tags produce the entire field based on the supplied attributes and should therefore always have a slash preceding the end of the tag in order to make the tag self closing.

While not mandatory the value attribute will be entered for most input fields to define the value associated with the field. Depending on the type of input field this value may or may not be displayed on the page and may or may not be updatable. In the case of a submit button the value is displayed as the text in the button.

There is one attribute that you will need to specify for most of your input fields and that is the name attribute. The name of the input field determines the name that is associated with the field when it is passed to the following page when the form is submitted. Fields that are not named will not be passed. While you can give the submit button a name it is not necessary unless you have multiple submit buttons within the same form and you wish to have the subsequent processing take different actions depending on which submit button was pressed. To do that you would give all of the submit buttons the same name and different values. If you do decide to name the submit button then you can use any name that you like provided with one exception. The one name that you cannot give to any field in your form is name="submit". Giving any field that name will result in the form not being able to be submitted at all in some browsers as the submit field will override the submit action. This will definitely be the case in Internet Explorer where the Javascript method of submitting a form is disabled when a field named submit is contained within the form.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate