Web Site Building · HTML Advanced Topics · Forms 1

What this is about:

The first thing that needs said about forms on the Web is they require server-side scripting to provide intended functionality. If you want a form to send email, or take a poll, or transact a sale, there must be programs on the web server to process the information. So if you aren't operating your web site yourself, check with your hosting service to see what kind of forms processing scripts they have available.

Forms Processing

Processing Forms Constructing a form is far less intimidating than it may appear at first. If you've already set up web pages using HTML, then you'll move naturally into setting up forms, which are also written using tags embedded right in an ordinary page. As with all other HTML, the appearance of a form can be dramatically altered by the browser used to view it. A great way to learn Forms, as with other HTML, is to examine the work of others: feel free to look at the source of these tutorials, or that of any other forms you run across.


Enter your name:


Here's the source HTML for the above form:

<FORM METHOD=GET ACTION="http://webreference.com/cgi-bin/html/formdump.cgi">
Enter your name: <INPUT NAME=your_name>
<INPUT TYPE=submit VALUE="Test this form">

Let's take a close look at each of the elements of this form.

<FORM METHOD=GET ACTION="[name of program]"></FORM>

These tags start and end a form (all input fields of the form are placed between these tags). METHOD specifies which technical protocol the web server will use to pass the form data to the program which processes it, and ACTION tells the server exactly which program that is. Note: METHOD value must be capitalized, otherwise the method defaults to "GET".

In our example, the action is a program called formdump.cgi. This program is one supplied by Webreference.com for forms processing. It simply echoes back the names and contents of all input fields on a form submitted to it. A web page may include multiple forms; however, forms may not be nested (you cannot create a form within a form). You must end the current form with </FORM> before you can start a new one.

Enter your name: <INPUT NAME=your_name>

When the user clicks the submit button, the browser collects the values of each of the input fields and sends them to the server.

The above code creates the text input box for the user's name in our example form. Most form fields begin with <INPUT NAME=[field_name] and end with >. NAME defines the name of the data for the field; it's how the program which processes the form references the data from this field. You can pick any name for your fields, just make sure it is not one of the pre-defined Forms parameters. These variables, when set to have values, perform certain specialized tasks. For instance, one of the most common errors in creating forms is to have an input field ask for a client's email address, and using the variable email to store the address in. The word 'email', however, is one of the predefined parameters. Giving email a value tells the Forms Processing Program to send the form's results to that email address — not what is intended.

The Submit Button

<INPUT TYPE=submit VALUE="Test this form">

Each form must have exactly one field of type submit. This creates the button the user pushes when they're done filling out a form, and should come after all the other input fields. If a form doesn't have a submit button, it is useless since once the user finishes typing in the data they won't have any way of sending it to a server. You can put whatever words you like on the submit button, using the VALUE keyword. If you omit the VALUE keyword, the button will be labeled "Submit" by default.

When the user clicks the submit button, the browser collects the values of each of the input fields (text typed by the user, etc.) and sends them to the web server identified in the ACTION keyword of the FORM open tag (and that web server passes that data to the program identified in the ACTION, using the METHOD specified).

You may at some point get the urge to create a form with two or more submit buttons, each of which you'd like to perform a different task (say one to subscribe to a mailing list, and another to unsubscribe.) This is a natural inclination, but unfortunately you can't do it with the current WWW standards. Sometimes you can simulate this behavior by having multiple forms on one page, each with its own submit button, and perhaps nothing else. But if you associate multiple submit buttons with the same input fields by putting them on the same form (that is, between the same FORM tags), all the submit buttons will do exactly the same thing, namely pass the data of that form to the program specified by the ACTION identifier.


Enter your feedback here:


TEXTAREA signals the browser to produce a potentially multi-line field, and the ROWS and COLS tags tell it how many lines long and how wide the field should be. Note that NAME is still required at the beginning of every input field, to signal in what variable the input will be stored and returned to the browser. These tags don't limit the length of a line someone can enter, or how many lines of text they can enter. They simply describe the appearance of the form.

Proceed to HTML Forms Tutorial Page 2.

go to the next page

Find out how to benefit from a comprehensive solution with managed hosting services.