Learning HTML 3.2 by Examples, section 5 Descriptions of HTML 3.2 tags:

FORM - fill-out form

Purpose

To present a fill-out form to be used for user actions such as registration, ordering, or queries. Forms can contain a wide range of HTML markup including several kinds of form fields such as single and multi-line text fields, radio button groups, checkboxes, and menus. Usually forms are processed by CGI scripts.

Typical rendering

Something that more or less resembles a fill-out form on paper.

Basic syntax

<FORM ACTION="URL">
contents of the form, including INPUT elements and possibly TEXTAREA and SELECT elements
</FORM>

Possible attributes

attribute name possible values meaning notes
ACTION URL address of the server-side form handler an HTTP server (typically, a CGI script) or a mailto: URL (which is not supported by all browsers)
METHOD GET, POST HTTP method to be used to send the contents of the form to the server default is GET, but POST is more common
ENCTYPE string media type used to encode the contents of the form default is application/x-www-form-urlencoded

Allowed context

Block container.

Contents

Anything that is allowed within a document body ( i.e. headings, text elements, block elements, and ADDRESS elements), with the exception that no FORM element is allowed within a FORM element.

In HTML 4.0 Strict, text elements may not occur directly within a FORM element but must be enclosed into e.g. a P element.

Notice in particular that there are some elements which may only appear within a FORM element. They can be used for various purposes as follows:

INPUT
single line text fields, password fields, checkboxes, radio buttons, submit and reset buttons, hidden fields, file upload, image buttons, etc
SELECT
single or multiple choice menus
TEXTAREA
multi-line text fields.
Notice that you can enclose these form field elements into any element which allows a text element, provided that they are ultimately within some FORM element. You can, for example, have a FORM element which contains a TABLE which has cells containing form field elements.

Examples

First a trivial example. This is hardly better than a simple mailto: link (using A element), but it hopefully illustrates the structure of form specifications in a very simple case.

Example FORM-1.html:

Tell me what you think about my document:

<FORM ACTION="http://www.foo.example/cgi-bin/mailto?jkorpela@cs.tut.fi"
 METHOD=POST>
<P><TEXTAREA ROWS=5 COLS=72 NAME=Comments></TEXTAREA></P>
<P><INPUT TYPE=SUBMIT VALUE=Send></P>
</FORM>

The example above, as well as the the two other examples below, uses a simple fictitious CGI script named mailto (not to be mixed up with mailto URLs!) and accessible using URL of the form http://www.foo.example/cgi-bin/mailto?addr where addr is an E-mail address. This hypothetical CGI script has been coded to send the contents of the form as an E-mail message containing name-value pairs in a format which is both legible by humans and easy to process automatically.

Thus, this form, and the next two forms, do not actually work, as the fancy top-level domain .example suggests. (There is a working feedback form for sending feedback to me.)

For a real, useful script, you need to check the information given by your Internet service provider (ISP); often there is at least some simple simple script for having form data sent to you by E-mail, but you need to check its parameters, i.e. what you need to put into the ACTION attribute and form fields. (There might be some public forms services that you can use, but they tend to be unreliable.)

The following more complicated example contains, in addition to an area for free text input, a selection menu. This might be a good way of getting evaluations, since for many people it is easier to fill a simple form than to write free comments.

Example FORM-2.html:

<FORM ACTION="http://www.foo.example/cgi-bin/mailto?jkorpela@cs.tut.fi"
 METHOD=POST>
<P>Please tell your opinion about the overall quality of
this document:
<SELECT NAME=evaluation>
<OPTION SELECTED>No opinion
<OPTION>Very poor
<OPTION>Rather poor
<OPTION>Average
<OPTION>Rather good
<OPTION>Very good
</SELECT>
</P><P>
You can also be more specific by writing a few comments:
<TEXTAREA NAME=Comments ROWS=5 COLS=72></TEXTAREA>
</P><P>
<INPUT TYPE=SUBMIT VALUE=Send></P>
</FORM>

The following example is more realistic, containing several fields of different kinds:

Example FORM-3.html:

This is a form for sending your personal evaluation of the document
<CITE>Learning HTML by Examples</CITE> as a whole.
<FORM ACTION="http://www.foo.example/cgi-bin/mailto?jkorpela@cs.tut.fi"
 METHOD="POST">
<P>
Your home page URL (if any):
<INPUT TYPE=TEXT SIZE=30 NAME=Home VALUE="http://">
</P><P>
Please rate the overall <EM>usefulness</EM> of the document (to you):<BR>
<INPUT TYPE=RADIO NAME=Useful VALUE="No opinion" CHECKED>No opinion<BR>
<INPUT TYPE=RADIO NAME=Useful VALUE="Very little">Very little (or none)<BR>
<INPUT TYPE=RADIO NAME=Useful VALUE="Little">Little<BR>
<INPUT TYPE=RADIO NAME=Useful VALUE="Some">Some<BR>
<INPUT TYPE=RADIO NAME=Useful VALUE="Great">Great<BR>
<INPUT TYPE=RADIO NAME=Useful VALUE="Very great">Very great
</P><P>
What about general <EM>understandability</EM>?
<SELECT NAME=Understandability>
<OPTION VALUE=undef SELECTED>(No opinion)
<OPTION VALUE=verydifficult>Very difficult
<OPTION VALUE=difficult>Difficult
<OPTION VALUE=avg>Average
<OPTION VALUE=easy>Easy
<OPTION VALUE=veryeasy>Very easy
</SELECT>
</P><P>Please feel free to add any comments you like:<BR>
<TEXTAREA ROWS=5 COLS=72 NAME=Comments></TEXTAREA>
<INPUT TYPE=HIDDEN NAME="Via" VALUE="FORM-3">
</P><P>
<INPUT TYPE=CHECKBOX NAME="*** Response requested! ***">
Would appreciate a personal answer; E-mail address:
<INPUT TYPE=TEXT SIZE=25 NAME=From>
</P>
<P>When you are finished with filling the form, select this:
<INPUT TYPE=SUBMIT VALUE=Send></P>
</FORM>
<P>You should get a response saying that a message was sent to
jkorpela@cs.tut.fi. If you want to get back to the page
from which you came to this form, please use the "Back"
function of your browser twice.</P>

Notice the use of a HIDDEN field named Via. It is invisible to users filling the form but allows the recipient of the E-mail message to recognize the origin (form) from which the message was generated.

The next example has a very different theme. It illustrates how one can easily create a customized interface to a search engine, in this case AltaVista.

Example FORM-4.html:

<P>You can search for aquarium-related documents on the Web
using search engines like
<A HREF="http://www.altavista.com/">AltaVista</A>.
The following simple form gives you a simple interface for that;
just append, after the second + sign, a keyword and submit the form:</P>
<FORM method=GET  action="http://www.altavista.com/cgi-bin/query">
<INPUT TYPE=hidden NAME=pg VALUE=q>
Search the Web
for
<INPUT NAME=q size=45 maxlength=200 VALUE="+aquar* +">
<INPUT TYPE=SUBMIT VALUE=Submit><BR>
<INPUT TYPE=RESET VALUE="Reset the form">
</FORM>
Notice that in a case like this, with a text input field prefilled with useful content, a RESET button can actually be useful.

Notes

The Intermediate HTML tutorial contains an excellent presentation of forms. See also my document How to write HTML forms which provides additional annotated links to tutorials, references, and specialized documents about HTML forms.

The value of the METHOD attribute specifies the HTTP method (as defined in the HTTP specification) to be used to send the contents of the form to the server (when the ACTION attribute specifies an HTTP server). In principle, the GET method is to be used when the processing of the form is "idempotent", i.e. has no lasting observable effect on the state of the world; this applies typically by query forms, the processing of which may involve extracting information from a database but no changes to the content of the database. If the processing of the form has side effects (such as modification of a database or subscription to a service), the method should be POST. In practice, the POST method is often used even if the form submission has no side effects. As regards to technicalities,

In general, you need a CGI script in order to use HTML forms.

Writing CGI scripts is probably not difficult to learn for anyone who has written computer programs before. However, many HTML authors do not know (and need not know) about programming, and learning a suitable scripting language takes time. Moreover, Web server maintainers may have strict policies on CGI scripts for security reasons. Thus, please contact your local Web server documentation or local webmaster for information about CGI scripts made available at your site, read their documentation, and write your forms so that you take into account the requirements of the script you have chosen to use.

If you decide to write your own CGI scripts or install scripts written elsewhere, there is plenty of material on the Web, for instance:

If the possibilities mentioned above are not feasible in your situation, you may wish to consider using a CGI script on a remote server. There are some services which allow you to use CGI scripts on their site, usually for some fee, but there are also free services.

Although the HTML 3.2 specification allows the ACTION attribute to refer to a mailto: URL, providing an easy way of creating forms for submitting information via E-mail, notice that this facility is not supported by all browsers. For example, a browser might just invoke its internal E-mail composer from scratch, ignoring the way in which the form has been filled! (This applies to several versions of Internet Explorer, for example.) Moreover, even if a browser supports this feature, the generated E-mail message is in the x-www-form-urlencoded form (which is confusing although not completely illegible). To summarize, avoid using an ACTION which refers to a mailto: URL.

The forms concept in HTML 3.2, despite some complicated details, is essentially rather simple. In particular, it provides no way of checking form content (such as requiring some field to be filled or contain numerical data) before submitting it. Any checking which is considered necessary must take place in the server to which the form content is submitted.

You can have more than one form in the same document.

The ISINDEX element predates the FORM element and was used for simple keyword searches.

Form submission takes place

The practical implication of the last item above is that you may, as an author, provide to some users a convenient way of submitting a form if you can organize things so that there is only one single-line text input field. You should not rely on this, however, so you should provide a normal submit field, too. Moreover, if you wish to take precautions against some people accidentally submitting a form before they have really finished filling it, organize things so that your form contains either no single-line text input fields or at least two of them. In any case, if you have only one such field, make it the last field in the form in order to minimize the risk of premature submission.

Date of last update: 2010-12-16.
This page belongs to the free information site IT and communication, section Web authoring and surfing, by Jukka "Yucca" Korpela.