Form example

Form tag has Action attribute whose value is the name of the CGI program that will execute on the server when the form data is submitted back to the server. Method attribute indicates how the data is to be submitted. Note that the form works the same in the browser without the Action and Method attributes.

<form action="/cgi-bin/showdata.pl" method="post">
This action is at the same server this page came from. Normally with a form you have an Action atribute which has the URL of the CGI script that will be be run by the server when it gets the form's submitted data.

A form could instead be submitted by email using the mailto action:
<form action="mailto:whoever@asdfasdf.com" method="post" enctype="text/plain">
The received email will be URL-encoded (i.e. messy looking).

If you don't want the form to be submitted to a CGI script you can leave the Action and Method attributes out of the Form tag.
<form>
Clicking the Submit button then merely resets the form.

Input, Select, and Textarea tags can only be inside a Form.

The Input tag is overloaded, it's used for Radio buttons, Checkboxes, Text, Submit button, Reset button, Button, and Hidden elements. Type is required attribute that distinguishes which kind of Input "widget"/"control". (A widget is a user input thingee.)
Name attribute will be needed for CGI. Each widget should have a unique Name value.
Input is an empty element.

<input type="text" name="username" size="30" maxlength="100" />
Size (number of characters wide) is optional, defaults to 40.
Maxlength is optional, defaults to infinity.
What is your name?

<input type="text" name="age" size="2" maxlength="2" />
Maxlength allows user to enter no more than 2 characters.
How old are you?

A set of Radio buttons. Only one can be selected at a time (enforced by browser). Note they all have the same Name (that makes them a set). They look like:
<input type="radio" name="freq" value="daily" />
Value is the value that gets submitted back to the server. It's usually different for each button. One Radio button could by default be checked by adding the attribute checked="checked".

How often do you do this?
Hourly
Daily
Weekly
Fortnightly
Monthly
Yearly
Never

A set of Checkboxes. Any number of them can be selected. Like a set of Radio buttons they will all have the same Name. A Checkbox can be checked by default if it has the checked="checked" attribute. They look like:
<input type="checkbox" name="emporia" value="Baskin-Robbins" />

What ice cream stores do you patronize?
Baskin-Robbins
Blue Seal
Dairy Queen
A&W

A Select menu of Options. The Select tag looks like:
<select name="vote">
The Options look like:
<option>Vanilla</option>
Note that here the text Vanilla is not part of the tag. (Option does have a Value attribute though).

What is your favorite flavor of ice cream?
End Select tag is required: </select>

To allow more than one Option to be selected, the Multiple attribute is needed:
<select name="mags" multiple="multiple">
To have an option be selected by default, add the Selected atrribute:
<option selected="selected">Weight Watchers</option>

Which ice cream journals do you subscribe to?

A Textarea tag. Rows and Cols are required attributes; they are the displayed size of the textarea. Use an optional maxlength attribute to limit the number of characters.
<textarea name="poem" rows="6" cols="60" maxlength="360" >

Compose an ode to ice cream
End Textarea tag required: </textarea>

A Submit button. When clicked the form is submitted to its Action. Value is optional; without it the blurb on the button is 'Submit'.
<input type="submit" value="Submit the survey" />

A Reset button. When clicked all the form elements (ie. widgets) are reset to their default values. Value is optional; without it the blurb on the button is 'Reset'.
<input type="reset" value="Clear your choices" >

A "regular" button. When clicked nothing happens! Javascript can make something happen though. Value is optional; without it there's no text on the button.
<input type="button" value="This is a button button" />

Hidden element is used in some CGI applications to "remember state". Note that a hidden element displays nothing, it's hidden (but it's in the source).
<input type="hidden" name="myhiddenfield" value="something meaningful in app" />

</form>