[Introduction to HTML]

HTML Forms

"GET" and "POST"

The first thing you have to decide is whether to use the GET or the POST command. GET and POST commands determine how the form input will be sent to the server. Rather than go into all the technical details, much of which I still do not understand, I will simply state that most books on HTML say to use the POST command. The reason being that it allows for more flexibility and a larger amount of input.


<FORM> goes inside the <BODY>...</BODY> element--all the elements of a form are placed between the opening <FORM> tag and the closing </FORM> tag. <FORM> informs the browser that the following information is an HTML form. The opening <FORM> tag usually includes two attributes: METHOD and ACTION--ENCTYPE is assumed and not entered unless it is different than the application/x-www-form-urlencoded MIME content-type.

Here is an example of what we have covered so far:


Text fields let you create areas whereby text can be entered. Text fields only allow a single-line of text to be entered. You use the <INPUT> tag to create a text field. There are four attributes that can included; TYPE, NAME, SIZE, and MAXLENGTH.

Here are two examples of text input fields, go ahead and type in the fields:

1. Ask me a brief question:

HTML code: <INPUT TYPE="text" NAME="question" SIZE="50">

2. Enter you password, it must be no longer than 8 characters:

HTML code: <INPUT TYPE="password" NAME="password" SIZE="20" MAXLENGTH="8">


Text areas allow the users to type multiple lines of text. To create a Text Area element you must include the <TEXTAREA> start tag and the </TEXTAREA> end tag. The <TEXTAREA> start tag contains four attributes:


Please provide us a detailed reference questions, including any keywords that we can use to search for information:

HTML mark-up:<TEXTAREA NAME="refquestion" ROWS="15" COLS="50" WRAP="VIRTUAL"


Radio Buttons allow you to create a list of items. Radio Buttons use the <INPUT> tag like Text Input Fields, with "radio" in the TYPE attribute. Radio Buttons must also include a VALUE attribute. The VALUE attribute indicates the selections value. Radio Buttons can be used inside list elements.

Radio Buttons limit the user to one choice per group. This means that you must plan your buttons carfully. Below is an example:

Choose the area that applies to your reference question:

  1. Basic Skills
    1. Reading
    2. Math
    3. Science
  2. ESL
    1. Basic
    2. Advanced
  3. Family Literacy
    1. Parenting Skills
    2. Child Development

You will notice that the buttons with a Roman Numeral constitute a group of radio buttons. They all share the NAME attribute "SUBJECT". The radio buttons with a capital letter comprise another group of radio buttons. They all share the NAME attribute "AREA". A user can only check one item with a Roman Numeral and one item with a Capital Letter. This is how it looks in HTML:

<OL TYPE="I" START="1"><LI><INPUT TYPE="radio" NAME="subject" VALUE="BASICSKILLS>Basic Skills
<OL TYPE="A" START="1"><LI><INPUT TYPE="radio" NAME="area" VALUE="READING">Reading</LI>
<LI><INPUT TYPE="radio" NAME="area" VALUE="MATH">Math</LI>
<LI><INPUT TYPE="radio" NAME="area" VALUE="SCIENCE">Science</LI></OL></LI>
<LI><INPUT TYPE="radio" NAME="subject" VALUE="ESL">ESL
<OL TYPE="A" START="1"><LI><INPUT TYPE="radio" NAME="area" VALUE="BASIC">Basic</LI>
<LI><INPUT TYPE="radio" NAME="area" VALUE="ADVANCED">Advanced</LI></OL></LI>
<LI><INPUT TYPE="radio" NAME="subject" VALUE="FAMLYLIT">Family Literacy
<OL TYPE="A" START="1"><INPUT TYPE="radio" NAME="area" VALUE="PARENTSKILLS">Parenting Skills</LI>

Many times Radio Buttons are simply to limiting. If this is so, then you should try Check Boxes. Check Boxes allow you to create lists that provide your user the ability to choose more than one item. Each Check Box is either "on" or "off". Check Boxes use the <INPUT> tag with "checkbox" as the TYPE attribute. It is also wise to assign the VALUE "checked" to the element. Here is an example:

Check as many items as pertain to you:


PROFESSION (choose all that apply):

HTML code:

<P><STRONG>Check as many items as pertain to you:</STRONG></LI>
<UL><LI><INPUT TYPE="checkbox" NAME="18-25" VALUE="checked">18-25</LI>
<LI><INPUT TYPE="checkbox" NAME="26-35" VALUE="checked">26-35</LI>
<LI><INPUT TYPE="checkbox" NAME="36-45" VALUE="checked">36-45</LI>
<LI><INPUT TYPE="checkbox" NAME="46-55" VALUE="checked">46-55</LI>
<LI><INPUT TYPE="checkbox" NAME="56-65" VALUE="checked">56-65</LI></UL>
<P>PROFESSION (choose all that apply):</P>
<UL><LI><INPUT TYPE="checkbox" NAME="LITERACYEDUCATOR" VALUE="checked">Literacy Educator</LI>
<LI><INPUT TYPE="checkbox" NAME="ESLEDUCATOR" VALUE="checked">ESL Educator</LI>
<LI><INPUT TYPE="checkbox" NAME="FAMLITEDUCATOR" VALUE="checked">Family Literacy Educator</LI>
<LI><INPUT TYPE="checkbox" NAME="ADMINISTRATOR" VALUE="checked">Administrator</LI>
<LI><INPUT TYPE="checkbox" NAME="LIBRARIAN" VALUE="checked">Librarian</LI>


Selections allow the user to select an item from a preset list. Selections use the <SELECT>...</SELECT> element combined with the <OPTION> tag.

Here is an example of a single select option with the SIZE attribute empty and no values placed in the OPTION tags:

Select a subject area:

Here is how the HTML code looks:

<P> Select a subject area: <SELECT NAME="subject"
<OPTION>General Literacy
<OPTION>Family Literacy
<OPTION>Workplace Literacy
<OPTION>Civic Education
<OPTION>Staff Training

Here is an example of a multiple select option with the SIZE attribute set to "3" and values placed in the OPTION tags:

Select the catagories that apply to you:

<P>Select the categories that apply to you: <SELECT NAME=schoolstatus SIZE=3 MULTIPLE>

Up-Loading Files from the User's Computer to the HTTP Server

Netscape 2.0+ provides for a way to allow users to upload files from their hard drive to your HTTP server. You do this by using the ENCTYPE, METHOD, ACTION, INPUT, and TYPE attributes. You can also specify the types of files you will allow to be uploaded by using the ACCEPT attribute and providing a list of MIME content-types separated by commas. Here is an example:

Send us a graphic image, must be in gif, jpeg(jpg), or tiff(tif) format:

HTML code:
<IMG SRC="../images/smile.gif"><STRONG>Send us a graphic image, must be in gif, jpeg(jpg), or tiff(tif) format.
<FORM ENCTYPE="multipart/form-data"
METHOD="POST" ACTION="URL of your cgi-script"><BR>
<INPUT NAME="usergraphic" TYPE="file" ACCEPT="image/gif, image/jpeg, image/jpg, image/tiff, image/tif"><BR>
<INPUT TYPE="submit" VALUE="Send image to server"
<INPUT TYPE="reset" VALUE="Reset, Try Again"

Submit and Resets Buttons

You need to place a submit button in your form to process the information. It is also helpful to have a reset button so that your users have the option to re-enter information. The "Submit" and "Reset" buttons are created using the <INPUT> tag. The VALUE attribute determines the text to be placed on the buttons.

Here is the HTML code:

<P><INPUT TYPE="submit" NAME="example" VALUE="Submit Form"> <INPUT TYPE="reset" NAME="example" VALUE="Reset Form"></P>

Example of an actual form

Back Arrow