Creating Forms in HTML

There are two distinct pieces of a FORM.
  1. is the form itself created using html codes
  2. is the background process, a computer program, usually written in Perl or C
  3. These two pieces interact with each other thru CGI-The Common Gateway Interface
You read of CGI/PERL scripts because the separation between the two isn't very clear. Don't worry about CGI because if you use the examples of the given forms, the data will be correctly interpreted by the example scripts and the output will be correctly dealt with and info sent back to the user in the form of an HTML page.

FORMS

A Form is created as part of a regular HTML page and is created between the <FORM> and </FORM> codes. You can have several forms on the same page, each doing different things. They generally take Input as radio buttons, checkboxes, scrolling menus, a line of text, or a box of text. Then the user can press a button to submit info to a server in the CGI (Common Gateway Interface) format. The server then sends the CGI stuff to a program, usually Perl, which then sends output back to the server in HTML format which is then displayed to the user's browser. The program part is covered under Scripts.

INPUTS

There are various sorts of INPUT tags. Most work by assigning a VALUE to a NAME. Data is passed to the server thru CGI as Name/Value pairs. You can often see this in the URL of pages retreived thru search engines.

For example, the code below (which is hidden from the user {type="hidden"}) after going thru the mailform program will return

<INPUT TYPE="hidden" NAME="subject" VALUE="Sample Mailto Form Subject">

because of the way I coded the NAME= and VALUE= as part of the INPUT tag.

Type=

Possible values for TYPE= are HIDDEN (shown above), RADIO, TEXT, RESET, SUBMIT, (which do Buttons), CHECKBOX, or IMAGE. Other data entry is done using the SELECT for menu lists and TEXTAREA for more than one line of data entry.

Radio Buttons

Radio Buttons let you click on one and only one of a set of options. You can use the CHECKED value to set one of the options as the default. Here is a sample:
SEX-You're only allowed to click on one of these
Male
Female
Both

And here is the source code:
<FORM> </FORM>

Checkbox

Checkboxes allow a yes or no entry for each box. They should probably each have a different NAME.
Check the the names of people you know personally
Bela Fleck Mike Moxcey Earl Scruggs Ralph Stanley
is created with this source code:
<FORM> </FORM>
Clicking on the first two lines and submitting to the mailform program returned this info to me: but has nothing for the other two NAMEs: knows_earl and knows_ralf.

BUTTONS: Submit and Reset

Use the INPUT, TYPE=SUBMIT or RESET to create buttons automagically.

These are created

(reset form)

with this source code


<FORM> </FORM>
and need to be a part of every form so you can sumbit it. Because this page form has no ACTION, the buttons are inactive.

Text

Text allows you to enter one line of text. For multiple lines, use TEXTAREA. VALUE is optional since the user should be entering something. Additional options are Size (length of the window) and Maxlength (of the data entered).

Here is a sample

Yo Dude, put in your email address so I know who to respond to:
And here is the source code.
<FORM> </FORM>

Textarea

TEXTAREA allows multiple rows for input of text. Use ROWS= and COLS= to designate the size.

Here is a sample with some default text entered:

and here is the source code
<FORM> </FORM>

SELECT

Select creates a menu or scrolling list of possible items. SIZE= is the number of elements to display. This defaults to one in the following example.
Choose one (you're only allowed one) of the following options

<FORM> </FORM>
Here is another sample with a size of two and a different default value (option selected). Scroll thru the list to verify I've selected the final option.
Choose one (you're only allowed one) of the following options

<FORM> </FORM>

ACTIONS

There are two types of ACTIONS available for calling a script: GET and POST. There are problems with GET so I always use POST which passeS data to a server program's stdin.

Here is the ACTION I use for the mailform script. You must put your own email address after the question mark or I will get the stuff and you will think it isn't working.

Here is the action used for the equine_survey script which requires no command line parameter: Read up on my scripts and other people's to process your HTML forms.
| basic layout | formatting codes | links to elsewhere | pictures | view files | tables |
Mike Moxcey May 1996