For a form to work, you must enter a <FORM> tag before any of the form inputs, and then conclude with a closing </FORM> tag immediately after the last element. Don't forget these! The IE browser will likely still show your form, but Netscape will not.

Note that each input is effectively a "variable," and thus requires a unique name. You can use any naming convention that you desire, as long as they are unique.

1. Input. This requires or asks the user to input some text or a number. It could be useful for an order quantity, or a name, email address, etc.

The code looks like this:

<input name="firstname" type="text" size=20 maxlength=40>

The size="" attribute allows you to specify how wide you want the input area to be. The size should depend on the length of the anticipated input, but a maxlength="" attribute can also be specified to allow the input box to atcually accommodate more characters than it is wide. Use this feature to keep your input boxes neat and tidy, and from occupying too much screen real estate. The type="text" attribute tells the browser and server that standard text is being inputted by the user.

2. A small input, like:

The code looks like this:

<input name="qty" type="text" size=2 maxlength=2>

This example is the same as above, but is for a much smaller input field.

3. Password input, which looks like this:

The code looks like this:

<input name="password" type="password" size=8 maxlength=10>

The type="" attribute is normally set to "text," although "password" can be used for sensitive inputs. This value will cause the screen to show an asterisk for each character typed, but will actually send the real character(s) typed.

4. A hidden input, like:

The code looks like this:

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

This feature is usually only used when the form developer needs to pass along certain information that really is of no interest to the user. For example, suppose I have an online form from which I collect information on a regular basis. Suppose further that I either print the results of the form, or send it to a database. It might be nice for me to have a "hidden" variable that shows the semester and year, so that I have an idea when that particular data form was received.

5. A textarea, which allows users to input a longer section of text:

The code looks like this:

<textarea name="textsample" rows=5 cols=40></textarea>

This type of input is appropriate when you expect the user to submit more than one sentence. It can handle a large amount of text, and will automatically scroll (i.e., expand) to fit whatever the user inputs. The textarea itself does not visually expand...a scrollbar becomes visible, meaning that the remainder of the text is hidden beneath the bottom of the textarea.

6. A dropdown menu, which allows users to select one from a long list, but the list is compacted into as little as one line:
Texas Oklahoma Colorado Kansas New Mexico

The code looks like this:

<select name="dropdownsample" size=1>
<option selected value="Texas">Texas
<option value="Oklahoma">Oklahoma
<option value="Colorado">Colorado
<option value="Kansas">Kansas
<option value="New Mexico">New Mexico
</select>

This is a very compact way to offer your users a long list of options, but without cluttering up the page in the process. The dropdown is named in the SELECT tag; each OPTION tag specifies the value of that option, and then after the ">" the word(s) that are to appear in the dropdown are entered. The attribute "selected" means that the browser will automatically highlight (i.e., pre-select) that option for your users, although they can certainly select a different option if they wish.

7. The checkbox question, which allows users to select one or more from a list of options:
Check which foods you like:
Chocolate Chip Cookies
Chocolate Brownies
Cheesecake
Tiramisu
Cannoli

The code looks like this:

<input selected type="checkbox" name="var1">Chocolate Chip Cookies
<input type="checkbox" name="var2">Chocolate Brownies
<input type="checkbox" name="var3">Cheesecake
<input type="checkbox" name="var4">Tiramisu
<input type="checkbox" name="var5">Cannoli

A checkbox allow you to ask a question to which the user may have more than one valid reply. Because of this feature, each response itself is now a unique "variable," meaning each option must have a unique value for its name="" attribute.

8. The radio button question, which allows users to select only one option. In this case, each option has the same name="" attribute.
Check your favorite:
Chocolate Chip Cookies
Chocolate Brownies
Cheesecake
Tiramisu
Cannoli

The code looks like this:

<input selected type="radio" name="var6">Chocolate Chip Cookies
<input type="radio" name="var6">Chocolate Brownies
<input type="radio" name="var6">Cheesecake
<input type="radio" name="var6">Tiramisu
<input type="radio" name="var6">Cannoli

This type of question requires a discrete reply, meaning that only one option may be selected. Thus, the name="" attribute must be the same for each of the options, as opposed to a checkbox question in which each option has a unique name.

9. Submitting or Resetting the form. These two buttons are very important. The first allows users to submit the form, while the latter allows them to reset it (i.e., clear it completely).
  

The code looks like this:

<input type="reset" name="reset" value="Reset">  <input type="submit" name="submit" value="Submit">

One important point: Even if you follow these directions explicitly with your form, it will still not work. There are two missing attributes in the opening FORM tag that have not been introduced to you. They are the method="" and action="" attributes. These are for more advanced tutorials, but for now you should be able to build a simple form that at least looks functional.