Forms in HTML, Basic CGI

What a Form is | How Form Elements Work
Form Element List | Form Actions

WHAT IS A FORM?

A general form has the structure: 
  <form method=post action="what-to-do-with-contents">
  Form Elements
  </form>
If it does not have a submit button, there is (almost) no way for the information the user enters in the form to be processed.

There is also a method=get. Post sends all information to the action as input (more precisely, to <STDIN>); Get appends the name/value pairs to the action as an extended URL. Get is deprecated in HTML 4.0, so it might be a good call to avoid it.

Top

HOW DO FORM ELEMENTS WORK?

All form elements have a name, and a value, so that the form can tell the action what the user said. For example, if we have the form elements:
 Student
Zip code:
In the first case, we specify a name for the button (e.g., "student") and a value to assign if it is checked (e.g., "true"); in the second case, we specify a name for the text field (e.g., "zip") and the value assigned to it is the value that the use enters into the text field.

If we entered "68504" in the text field and checked the checkbox, the action would get the information

student=true
zip=68504
Top

WHAT FORM ELEMENTS ARE THERE?

Checkbox1
 <input type=checkbox name=cb value=true> Check me
Check me
Radio Button2
 <input type=radio name=yn value=yes> yes<br>
<input type=radio name=yn value=no checked> no
 yes
no
Text3
 Number: <input type=text name=num size=3>
 Number:
Textarea4,5
 Comments:<br> <textarea name="comments" rows="3" cols="8"></textarea>
Comments:
Select6
Pick 1:<br>
<select name="choice">
<option> choice 1
<option> choice 2
</select>
Pick 1:
Select6

Pick 1 or more:<br>
<select name="choice" multiple>
<option> choice 1
<option> choice 2
</select>
Pick 1 or more:
Submit
<input type="SUBMIT" value="submit me!">

Reset
<input type="reset" value="clear it!">

Hidden
<input type="hidden" name="form#" value="5">
 
 
footnotes:
  1. <input type="CHECKBOX" name="cb" value="T" checked> gives a checkbox that is checked by default.
  2. checked option on one radio button is optional.
  3. if a value is specified for a text tag, it is filled into the text field.
  4. if a value is included between the <textarea...> and </textarea> tags, it appears in the text field and becomes the default value.
  5. <textarea name="in" rows="3" cols="8" wrap=physical></textarea> causes line-wrap in the textarea.
  6. by default, the value assigned to the select field is the text after the <option> that the user selects. using <option value="value"> sends a value of value instead.
 

Top

WHAT ACTIONS ARE THERE?

The only simple action that doesn't require programming is a mailto action. This can be done with or without an enctype (encoding type) attribute in the form tag. It's probably best to use the enctype attribute. As an example, consider the form: 

  <form action="mailto:glarose@NebrWesleyan.edu"
    method=post> 
  Your name:<br>
  <input type="text" name="name" size=10><br>

  Your email address:<br>
  <input type="text" name="email" size=10><br>

  Your relationship to the department:<br>
  <textarea name="relate" rows=3 cols=60
    wrap="physical"></textarea><br>

  Comments:<br>
  <textarea name="comments" rows=10 cols=60
    wrap="physical"></textarea><br>

  <input type="submit" value="submit form"><br>
  <input type="reset" value="reset form"><br>
  </form><br>
With and without an enctype attribute, this e-mails:
Form tag Form tag with enctype
<form action="mailto:glarose@NebrWesleyan.edu" method=post> <form action="mailto:glarose@NebrWesleyan.edu" method=post enctype="text/plain">
E-mails E-mails 
  To: glarose@NebrWesleyan.edu
  Subject: Form posted from Mozilla
  Content-type:
    application/x-www-form-urlencoded
  Content-Length: 223
 
  name=Gavin+LaRose&email=glarose@Nebr
  Wesleyan.edu&relate=I+teach+here%21&
  comments=Nifty+Web+pages%21
  (the e-mail body is really all one line) 
  To: glarose@NebrWesleyan.edu
  Subject: Form posted from Mozilla
  Content-type: text/plain
  Content-Disposition: inline; form-data
  Content-Length: 209
 
  name=Gavin LaRose
  email=glarose@NebrWesleyan.edu
  relate=I teach here!
  comments=Nifty Web pages!

The catch with a mailto form is that it relies on the browser to correctly format the text that it sends you, which it might or might not actually do. The other catch is that it doesn't allow you to do anything with the data other than have it e-mailed to you, and doesn't send a "thank you note" or other reply to the user.

To get around these problems requires a foray into programming, to have a program that will take the input (the content of the left-hand e-mail message in the table above), decode it, and then do something with it.

 
Top

Forms in HTML
Last Modified: Fri May 31 09:51:30 EDT 2002
Comments to glarose@umich.edu