Multimedia WWW Series:
Forms

What is a form?

A form is a web page or part of a web page that allows the user to enter data using the familiar elements of a graphical user interface. Visible parts of a form include pop-up menu's, radio buttons, selection lists, etc. . The information entered into the form is then sent somewhere for processing, emailed somewhere, or reflected right back to the user.

What you need to start:

• A list of the information you wish to collect.
• What you want to do with the information.
• A working knowledge of rudimentary html.

By the end of this session you will know:

• How to create a form.
• How to find form resources on the web.

Samples

How To

The HTML you need to create a form:

1. The <FORM></FORM> tag.
2. The <INPUT>, <SELECT>, or<TEXTAREA> tags.

The form tag has a beginning, <FORM>, and an end </FORM>. A simple <FORM> tag looks like this:

<FORM action=http://www.ucc.uconn.edu/~virtclas/formrefl.html>

Some other stuff

</FORM>

The URL http://www.ucc.uconn.edu/~virtclas/formrefl.html points to a file that tells you what your form contained. NOTE:Formrefl.html only works with the GET method. More on this later.

The <FORM> tag has 3 attributes:

Attribute	Description	Default
ACTION	Where the forms contents will be submitted	The page the form resides on.
METHOD	The method used to submit the form - either GET or POST	GET
ENCTYPE	Specifies the type of encoding - There is only 1 possible value, and it only applies to the POST method.	application/x-www-form-urlencoded

The <INPUT>, <SELECT>, or<TEXTAREA> tags.

The easiest way to learn these tags is by example. Below you will find a sample forms elements side by side with the HTML that created it. Of course, the HTML snippets below must reside inside the <FORM></FORM> tag set.

Some definitions that make the examples easier to understand:

type

The type of "widget" you want to use - test,password,checkbox,radio,submit,reset.

name

The symbolic variable name associated with a widget.

value

The defualt text value of a widget, if applicable.

checked

Causes the checkbox or radio button to be selected by default.

size

The physical size of a text box.

maxlength

The maximum number of characters a text field will accept.

• Text entry box

  A box that allows the user to enter things typed from keyboard.
  

  Name:	Name:<input type="text" name="sample4" >
  Name:	Name:<input type="text" name="sample4b" value="default value" >
  Name:	Name:<input type="text" name="sample4c" value="a longer box" size=60 >

  
  

• Checkbox

  A box that allows the user to check off multiple independent items.
  

  Hold the onions	Hold the onions<input type="checkbox" name="sample5" >
  Hold the pickles:	Hold the pickles:<input type="checkbox" name="sample5" checked >

  
  

• Radio button

  Allows to select from multiple exclusive items. The default item has the CHECKED option.
  

  Monday	<input type="radio" name="radio_set6" value="Monday" >
  Tuesday	<input type="radio" name="radio_set6" value="Tuesday" >
  Wednesday	<input type="radio" name="radio_set6" value="Wednesday" checked>

  
  

• Submit button

  Allows the user to submit a form. Necessary in all cases except when using a form with a single text box, in which case pressing RETURN submits the form. It can have any NAME value
  

  <input type="Submit" name="sample5" >

  
  

• Reset button

  Allows the user to reset a form, returning it to the initial state it was in when the page was loaded.
  

  <input type="reset" name="Reset Me" >

  
  

• Password text box

  Allows the user to type in text that will not be readable on the form.
  

  <input type="password" name="sample7" >

  
  

• Pop-up menu

  Allows the user to select an item from a pop-up menu.
  

  ABCD	<select name="sample8" > <option >A <option>B <option>C <option >D</select >

  
  

• Selection list

  Allows the user to select an item from a pop-up menu.
  

  123456

  <select name="sample9" size=5 > <option >1 <option>2 <option>3 <option >4 <option >5 <option >6</select >

  
  

• Text area

  Allows the user to enter paragraph sized amounts of data.
  

  default text

  <textarea rows=4 cols=60 name="sample10">default text</textarea>

Exercise

Create your own form combining parts from above. Send the form to http://www.ucc.uconn.edu/~virtclas/formrefl.html and see what you get. Alternatively you could send your results somewhere via email by using SENDFORM.

The Multimedia Lab provides a variety of software for your use. Animation, rendering, and media capture are all available. Stop by the lab for details!

virtclass@uconnvm.uconn.edu