Often people will want some sort of form on a webpage. The form/s discussed here is/are the type which will be submitted to the webpage owner by e-mail.

GeoCities has a pretty good Help Page for Forms and also has a link to the NCSA (National Center for Supercomputing Applications) which is authoritative regarding HTML.

The FORM Tag

The FORM tag specifies a fill-out form within an HTML document. More than one fill-out form can be in a single document, but forms cannot be nested.

<FORM ACTION="url"> ... </FORM>

The attributes are as follows:

• ACTION is the URL of the query server to which the form contents will be submitted; if this attribute is absent, then the current document URL will be used.
• METHOD is the HTTP/1.0 method used to submit the fill-out form to a query server. Which method you use depends on how your particular server works; we strongly recommend use of (or near-term migration to) POST.

The valid choices are:
• GET -- this is the default method and causes the fill-out form contents to be appended to the URL as if they were a normal query.
• POST -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.
• ENCTYPE specifies the encoding for the fill-out form contents. This attribute only applies if METHOD is set to POST -- and even then, there is only one possible value (the default, application/x-www-form-urlencoded) so far.

Inside a FORM you can have anything except another FORM. Specifically, INPUT, SELECT, and TEXTAREA tags are used to specify interface elements within the form.

Because forms are not automatically visually differentiated from the rest of a document it is recommended to use the HR (horizontal rule) tag before and after a form to cleanly differentiate it from surrounding text and/or other forms.

The first thing necessary to have a useable FORM is to insert the HTML for the METHOD and ACTION.

• The METHOD is used to submit the fill-out form to a query server. The METHOD used with GeoCities is POST -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.
• ACTION is the URL of the query server to which the form contents will be submitted; if this attribute is absent, then the current document URL will be used.

Putting the two together in an HTML tag gives us this:

<FORM METHOD=POST ACTION="/cgi-bin/homestead/mail.pl?user_name"> (Will send to your Yahoo/GeoMail address and your mail can be set to FORWARD the FORM to your e-mail address)

You can "copy & paste" the above HTML directly into a document where you wish to begin a FORM. Just "substitute" YOUR Geo Username for the "user_name" used in the HTML.

You can also use the following to send a FORM, but it will go directly to the "e-mail address" you specify and NOT use the GeoCities CGI at all. In many ways it is more convenient and simpler.

<FORM ENCTYPE="text/plain" NAME="test" METHOD=POST ACTION="mailto:yourname@my.home.net"> (Using this type HTML tag will send the form DIRECTLY to your the e-mail address you enter and not use the GeoCities CGI at all)

Next, inside a FORM you can have anything except another FORM. Specifically, INPUT, SELECT, and TEXTAREA tags are used to specify interface elements within the form.

The INPUT Tag

The INPUT tag is used to specify a simple input element inside a FORM. It is a standalone tag; it does not surround anything and there is no terminating tag -- i.e., it is used in much the same way as IMG.

The attributes to INPUT are as follows:

• TYPE must be one of:
  • "text" (text entry field; this is the default)
  • "password" (text entry field; entered characters are represented as asterisks)
  • "checkbox" (a single toggle button; on or off)
  • "radio" (a single toggle button; on or off; other toggles with the same NAME are grouped into "one of many" behavior)
  • "submit" (a pushbutton that causes the current form to be packaged up into a query URL and sent to a remote server)
  • "reset" (a pushbutton that causes the various input elements in the form to be reset to their default values)

• NAME is the symbolic name (not a displayed name -- normal HTML within the form is used for that) for this input field. This must be present for all types but "submit" and "reset", as it is used when putting together the query string that gets sent to the remote server when the filled-out form is submitted.
• VALUE, for a text or password entry field, can be used to specify the default contents of the field. For a checkbox or a radio button, VALUE specifies the value of the button when it is checked (unchecked checkboxes are disregarded when submitting queries); the default value for a checkbox or radio button is "on". For types "submit" and "reset", VALUE can be used to specify the label for the pushbutton.
• CHECKED (no value needed) specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes and radio buttons.
• SIZE is the physical size of the input field in characters; this is only appropriate for text entry fields and password entry fields. If this is not present, the default is 20. Multiline text entry fields can be specified as SIZE=width, height; e.g. SIZE=60,12. Note: the SIZE attribute should not be used to specify multiline text entry fields now that the TEXTAREA tag is available.
• MAXLENGTH is the maximum number of characters that are accepted as input; this is only appropriate for text entry fields and password entry fields (and only for single-line text entry fields at that). If this is not present, the default will be unlimited. The text entry field is assumed to scroll appropriately if MAXLENGTH is greater than SIZE.

<INPUT TYPE="TEXT" NAME="NAME" SIZE=30,1 MAXLENGTH=30> The SELECT Tag

Inside <FORM> ... </FORM>, any number of SELECT tags are allowed, freely intermixed with other HTML elements (including INPUT and TEXTAREA elements) and text (but not additional forms).

Unlike INPUT, SELECT has both opening and closing tags. Inside SELECT, only a sequence of OPTION tags -- each followed by an arbitrary amount of plain text (no HTML markup) -- is allowed; for example:

<SELECT NAME="a-menu"> <OPTION> First option. <OPTION> Second option. </SELECT>

The attributes to SELECT are as follows:

• NAME is the symbolic name for this SELECT element. This must be present, as it is used when putting together the query string for the submitted form.
• SIZE: if SIZE is 1 or if the SIZE attribute is missing, by default the SELECT will be represented as a Motif option menu. If SIZE is 2 or more, the SELECT will be represented as a Motif scrolled list; the value of SIZE then determines how many items will be visible.
• MULTIPLE, if present (no value), specifies that the SELECT should allow multiple selections (n of many behavior). The presence of MULTIPLE forces the SELECT to be represented as a Motif scrolled list, regardless of the value of SIZE.

The attributes to OPTION are as follows:

• SELECTED specifies that this option is selected by default. If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED.

The TEXTAREA Tag

The TEXTAREA tag can be used to place a multiline text entry field with optional default contents in a fill-out form. The attributes to TEXTAREA are as follows:

• NAME is the symbolic name of the text entry field.
• ROWS is the number of rows (vertical height in characters) of the text entry field.
• COLS is the number of columns (horizontal width in characters) of the text entry field.

TEXTAREA fields automatically have scrollbars; any amount of text can be entered in them.

The TEXTAREA element requires both an opening and a closing tag. A TEXTAREA with no default contents looks like this:

<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA> A TEXTAREA with default contents looks like this: <TEXTAREA NAME="foo" ROWS=4 COLS=40> Default contents go here. </TEXTAREA> The default contents must be straight ASCII text. Newlines are respected (so in the above example there will be a newline both before and after "Default contents go here.")

Form Submission

For Method = GET

When the submit button is pressed, the contents of the form will be assembled into a query URL that looks like this:

action?name=value&name=value&name=value

"action" here is the URL specified by the ACTION attribute to the FORM tag, or the current document URL if no ACTION attribute was specified.)

Strange characters in any of the "name" or "value" instances will be escaped as usual; this includes "=" and "&". Note: This means that instances of "=" that separate names and values, and instances of "&" that separate name/value pairs, are not escaped.

For text and password entry fields, whatever the user typed in will be the value; if the user didn't type anything, the value will be empty but the "name=" part of the query string will still be present.

For checkboxes and radio buttons, the VALUE attribute specifies the value of a checkbox or radio button when it is checked. An unchecked checkbox is disregarded completely when assembling the query string. Multiple checkboxes can have the same NAME (and different VALUEs), if desired. Multiple radio buttons intended to have "one of many" behavior should have the same NAME and different VALUEs.

For Method = POST

The contents of the form are encoded exactly as with the GET method (above), but rather than appending them to the URL specified by the form's ACTION attribute as a query, the contents are sent in a data block as part of the POST operation. The ACTION attribute (if any) is the URL to which the data block is POSTed.

Putting It All Together

The two links below are examples of FORMS using most of the various attributes listed above. These examples are given as aids in how to set up your forms.

Just added! A Javascript version of the first form which requires NO CGI script. You can have the form sent DIRECTLY to your REGULAR mail server and NOT rely on FORWARDING from the Yahoo!GeoCities mail server. This form requires SOME understanding of Javascript to modify it to YOUR needs.

Form Number One An "extensive" Survey-type form

Form Number Two A "simple" Survey-type form

Form Number Three A form for soliciting "comments" or "suggestions" on your webpage

Javascript Form Can be modified with some JS knowledge

Main HTML Help

Site© 1996-2003 Copyright by dcrum@infionline.net