Forms

Home

Forms are used to receive input from your web vistors. They can include text boxes, check boxes, radio buttons, passwords, and pull down menus. You can even pass information between forms.

<FORM> ... </FORM>

The first step is to add the <FORM> ... </FORM> tags in the body of your web page, where you want the form to appear. The <FORM> tag has several attributes:

the METHOD can be either "GET" or "POST". The default is "GET".
the ACTION is the URL of the script that will process the form.
ENCTYPE which is used by the "post" method, always takes the default "application/w-www-form-urlen-coded" so you need not worry about it.

METHOD="Get" sends the information in the form to the server at the URL. It is the default method.
METHOD="Post" sends the information in the form to the server as a data body.

<INPUT>

Text entry field

The next step is to define the data that will be passed by the form. This is done by using <INPUT> tags. There are variious types of inputs, and the TYPE atribute is used to specify which. The simplest is a text entry field. It is denoted by specifying "TEXT="text". You then also need a submit button to allow the user to go ahead and trigger the action, and a reset button to allow them to reset the contents of the field. For example, the following code allows you to go to the Internet Public Library's list of online newspapers from the UK. Or, you can type in the name of another country instead of the UK before pressing "Go". If you do change your mind, you can click on "reset" to return to the UK.


<form action="http://www.ipl.org/cgi-bin/reading/news.out.pl?co=">

    <input type="type" name="co" size="20" value="United Kingdom">

    <input type="submit" name="go_button" value="Go">

    <input type="reset" name="reset_button" value="Reset">

  </form>

When you click on submit, your browser will send the contents of the form to the HTTP server as data in the following form:

action?name=value&name=value

In each of the above, the NAME is a variable that you can use to reference the information later, and the value is the value of the variable. The browser expects input tags within the form tags, but there can also be other tags.

Text box

A text entry box is a scrollable text entry field. To create one, use the <TEXTAREA> ... </TEXTAREA> tags within the form. You can use more than one text entry box, and use other HTML tags between them. The following code enables the user to submit a job search to the JobServe web site. Just type in some criteria.


<form action="http://www.it.jobserve.com/jobserve/searchresults.asp">

    Enter type of job:      <input type="type" name="jobType" size="1" value="P">

    Enter days to search:   <input type="type" name="d"       size="1" value="1">

    Enter search order:     <input type="type" name="order"   size="8" value="DateTime">

    Enter page to start at: <input type="type" name="page"    size="1" value="1">

    <TEXTAREA NAME="q" ROWS="5" COLS="60">Your job search criteria go here</TEXTAREA>

    <input type="submit" name="submit_button" value="Go">

    <input type="reset" name="reset_button" value="Reset">

</form>

Radio Button

It is a little clumsy having the user type in the job type above (P = permanent, C = contract, * = either). It would be better to use radio buttons instead. These allow the user to choose just one from a few options. I've replaced the Enter type of job: <input type="type" name="jobType" size="1" value="P"> line above with the following:


  Enter type of job: <input type="radio" name="jobType" value="P">Permanent

	                  
<input type="radio" name="jobType" value="C">Contract

	                  
<input type="radio" name="jobType" value="*" CHECKED>Either

The "CHECKED" attribute is optional: it makes the page default to having that option checked unless and until the user changes it.

Check box

Sometimes you will want your users to be able to select more than one option at a time. For this, a check box is used instead of a radio button.


Choose your favourite dessert(s):

	 <input type="checkbox" name="dessert1" value="1" CHECKED>Death by Chocolate

	                  
<input type="checkbox" name="dessert2" value="0">Rhubarb Crumble

	                  
<input type="checkbox" name="dessert3" value="1" CHECKED>Jam Sponge

The value is what the attribute is set to if it is checked.

Find a useful working example

Password

Using a password field allows the user to be able to type in text without anyone being able to read it. Here's the text field entry example again, only with the field contents are now disguised by asterisks. It still works!


<form action="http://www.ipl.org/cgi-bin/reading/news.out.pl?co=">

    <input type="password" name="co" size="20" value="United Kingdom">

    <input type="submit" name="go_button" value="Go">

    <input type="reset" name="reset_button" value="Reset">

  </form>

Find a useful working example

Pulldown Menus

Pulldown Menus are used to allow users to select one item from a list. This is particularly useful if there is a long list, or you want to prevent them from typing in anything that is not on the list. They also take up less space. The following example lets you select a country from a long list, and the Internet Public Library displays a list of newspapers for that country.

The code is as follows:


<form Action="http://www.ipl.org/cgi-bin/reading/news.out.pl">

      <SELECT Name = "co">

	    <option value="Albania" SELECTED>Albania

	    <option value="Algeria">Algeria

	    <option value="American%20Samoa">American Samoa

	    ...

	    <option value="Zambia">Zambia

	    <option value="Zimbabwe">Zimbabwe

      </SELECT>

    <input type="submit" name="go_button" value="Go">

    <input type="reset" name="reset_button" value="Reset">

</form>

It is possible to select more than one option at a time.

cover how

Under construction

cover how to stop it sending "&submit_button=Go"