Header here

The <FORM> Tag:

The form is built up from various input tags and are enclosed by <FORM> and </FORM> tags. An example of a simple form is:

<FORM METHOD="POST" ACTION="/your-directory/your-script">
Name: <INPUT NAME="fullname"> <P>
Phone: <INPUT NAME="phone"> <P>
<INPUT TYPE="submit">
</FORM>

Which looks like this:

Name:
Phone:
 

 

 

 

Notes:

  • Inside a FORM you can have anything except another FORM. Specifically, INPUT, SELECT, and TEXTAREA tags are used to specify interface elements within the form.

The <INPUT> Tag

The INPUT tag is used to specify a simple input element inside a FORM. It is a standalone tag; it does not surround anything and there is no terminating tag -- i.e., there is no need for a </INPUT> tag.
The INPUT tag has a number of options:

  • NAME - the symbolic name for the input field. This must be present for all types except "submit" and "reset".
  • TYPE - one of text (default), checkbox, radio, password, submit, reset.
  • VALUE - the default contents of the field. For radio and checkboxes, the return value for a selected button is "on" unless the VALUE option is specified.
  • CHECKED - specifies that a checkbox or radio button is checked by default.
  • SIZE - is the physical size of the input field in characters.
  • MAXLENGTH - the maximum number of characters that are accepted as input.

Simple input field

Type in your name:

 

<INPUT NAME="name">

Input field with default entry

Type in your City:

 

<INPUT NAME="city" VALUE="Sydney">

Input field with default entry and maximum length

Phone number:

 

<INPUT NAME="phone" SIZE=13 MAXLENGTH=13 VALUE="01483000 ">

Checkboxes

Pizza topings:
 1. Pepperoni.
2. Sausage.
3. Anchovies.

 

 

 

<OL>
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="pepperoni" CHECKED> Pepperoni.
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="sausage"> Sausage.
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="anchovies"> Anchovies.
</OL>

Mutually exclusive Radio buttons:

Payment:
 Cash.
Cheque.
Credit card:
Mastercard.
Visa.
American Express.

 

 

 

 

<OL>
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="cash" CHECKED> Cash.
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="cheque"> Cheque.
<LI> Credit card:
<UL>
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="mastercard"> Mastercard.
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="visa"> Visa.
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="amex"> American Express.
</UL>
</OL>

Submit and Reset buttons

<INPUT TYPE="submit"> <INPUT TYPE="reset" VALUE="Reset Form">

The <SELECT> Tag

SELECT has both opening and closing tags. Inside SELECT, only a sequence of OPTION tags, each followed by an arbitrary amount of plain text (i.e. no other HTML markup tags), is allowed.
The attributes to SELECT are as follows:

  • NAME - the symbolic name for the SELECT element. This must be present.
  • SIZE - if SIZE is 1 or if the SIZE attribute is missing, by default the SELECT will be represented by a pull-down menu.
  • If SIZE is 2 or more, the SELECT will be represented as a scrolled list; the value of SIZE then determines how many items will be visible.
  • MULTIPLE - specifies that the SELECT will be represented as a scrolled list and should allow multiple selections.

The attributes to OPTION are as follows:

  • SELECTED - specifies that this option is selected by default. If the MULTIPLE attribute is specified, multiple options can be specified as SELECTED.

Pull Down Menus

Pizza Survey:

 

 

<SELECT NAME="service">
<OPTION> Excellent
<OPTION> Good
<OPTION SELECTED> Average
<OPTION> Below average
<OPTION> Poor
</SELECT>

Scrolling Selection Lists (Mutually Exclusive)

What would you like to do today?

 

 

 

 

<SELECT NAME="what-to-do" SIZE=6>
<OPTION VALUE="drink"> Drink Coffee
<OPTION VALUE="read" SELECTED> Read A Book
<OPTION VALUE="walk"> Take A Walk
<OPTION> Watch TV
<OPTION> Attend A Concert
</SELECT>

Scrolling Selection Lists (Multiple Selections)

What items of clothing do you plan to wear?

 

 

 

 

 

(Ifusing Mosaic, hold down Control to select or deselect items.)

<SELECT NAME="what-to-wear" MULTIPLE SIZE=8>
<OPTION>T-shirt
<OPTION SELECTED> Jeans
<OPTION> Wool Sweater
<OPTION SELECTED> Sweatshirt
</SELECT>

The <TEXTAREA> Tag

The TEXTAREA tag can be used to place a multi-line text entry field with optional default contents in a fill-out form. The TEXTAREA element requires both an opening and a closing tag.
The attributes to TEXTAREA are:

  • NAME - the symbolic name of the text entry field.
  • ROWS - the number of rows (vertical height in characters) of the text entry field.
  • COLS - the number of columns (horizontal width in characters) of the text entry field.

Multi-line Text Entry Areas

Please enter any comments below:

<TEXTAREA NAME="comments" ROWS=10 COLS=40>Default text goes here</TEXTAREA>

Other Fancy TAGS

The File Field

There are several other tags you can use in your form. These are just some.

What file would you like to upload?

<input type="file" name="file">

The Hidden Field

Hidden fields are handy to have if you need information that you do not want your form user to see. For example, you have several forms and you could name your form "form1". You can assign a hidden field to report on the form name. No visual example as it is hidden.

<input type="hidden" name="hiddenField">