example form

FLEAT III Forms Workshop

Analyze a Form

Here is simple survey form:

What is your name:

What kind of personal computer do you use:
Intel-compatible PC
Macintosh or compatible

Here is the HTML to create it:

<P>What kind of computer do you use:<BR>
<INPUT TYPE="checkbox" NAME="WhichComputer" VALUE="PC">Intel-based PC<BR>
<INPUT TYPE="checkbox" NAME="WhichComputer" VALUE="Mac">Macintosh or compatible

And here is a brief explanation of how it works:

Explanation

HTML code

Start the web page

These tags appear at the start of any web page. The form must be in the body of the page.

<HTML>
<HEAD><TITLE>My Page</TITLE></HEAD>
<BODY>

Start the form

I've chosen a simple action. When the user clicks the submit button, the browser emails the information in the form to the specified address with the subject line provided. The ENCTYPE property tells the email program how to decode the message it gets, rather than treat it as an attached text file. The METHOD property tells the browser how to send the information.

<FORM ACTION = "mailto:sarneil@uvic.ca?subject=mail-in form" ENCTYPE = "text/plain" METHOD = "post">

Ask the user to type in his or her name

The INPUT tag creates a new form element as specified by the properties (type, name, size etc).

<P>
What is your name:<BR>
<INPUT TYPE="text" NAME="name" VALUE="" SIZE=30>

Ask the user to choose from a list

I decided to use checkboxes. If the list were longer, I might have used a scrolling list instead.
If I wanted the options to be mutually exclusive, I would use either radio buttons or a popup list.

<P>
What kind of computer do you use: <BR>
<INPUT TYPE = "checkbox" NAME = "WhichComputer" VALUE = "PC"> Intel-compatible <BR>
<INPUT TYPE = "checkbox" NAME = "WhichComputer" VALUE = "Mac"> Macintosh or compatible

Include the submit button

When the user clicks on the submit button, it tells the browser to do whatever is specified in the ACTION attribute of the FORM tag.

<P>
<INPUT TYPE="submit" NAME="submit" VALUE="Send information">

End the form

This tag ends the form.

</FORM>

End the web page

These are the tags used to end a web page.

</BODY>
</HTML>

I filled in the form with my first name and both checkboxes checked and sent it to myself.

This box shows exactly what the form generates - one long line of text with no spaces and some odd characters mixed in.

name=Stewart&WhichComputer=PC&WhichComputer=Mac&submit=Send+information

By including the ENCTYPE property, the email program is able to decode the raw output into something that is easier to read.

name=Stewart
WhichComputer=PC
WhichComputer=Mac
submit=Send information

OK enough of this, time to make a form.

Explanation	HTML code
Start the web page
These tags appear at the start of any web page. The form must be in the body of the page.	<HTML> <HEAD><TITLE>My Page</TITLE></HEAD> <BODY>
Start the form
I've chosen a simple action. When the user clicks the submit button, the browser emails the information in the form to the specified address with the subject line provided. The ENCTYPE property tells the email program how to decode the message it gets, rather than treat it as an attached text file. The METHOD property tells the browser how to send the information.	<FORM ACTION = "mailto:sarneil@uvic.ca?subject=mail-in form" ENCTYPE = "text/plain" METHOD = "post">
Ask the user to type in his or her name
The INPUT tag creates a new form element as specified by the properties (type, name, size etc).	<P> What is your name:<BR> <INPUT TYPE="text" NAME="name" VALUE="" SIZE=30>
Ask the user to choose from a list
I decided to use checkboxes. If the list were longer, I might have used a scrolling list instead. If I wanted the options to be mutually exclusive, I would use either radio buttons or a popup list.	<P> What kind of computer do you use: <BR> <INPUT TYPE = "checkbox" NAME = "WhichComputer" VALUE = "PC"> Intel-compatible <BR> <INPUT TYPE = "checkbox" NAME = "WhichComputer" VALUE = "Mac"> Macintosh or compatible
Include the submit button
When the user clicks on the submit button, it tells the browser to do whatever is specified in the ACTION attribute of the FORM tag.	<P> <INPUT TYPE="submit" NAME="submit" VALUE="Send information">
End the form
This tag ends the form.	</FORM>
End the web page
These are the tags used to end a web page.	</BODY> </HTML>

I filled in the form with my first name and both checkboxes checked and sent it to myself.
This box shows exactly what the form generates - one long line of text with no spaces and some odd characters mixed in.	name=Stewart&WhichComputer=PC&WhichComputer=Mac&submit=Send+information
By including the ENCTYPE property, the email program is able to decode the raw output into something that is easier to read.	name=Stewart WhichComputer=PC WhichComputer=Mac submit=Send information