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
|
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:
mailto:
link
(using A element), but it hopefully illustrates
the structure of form specifications in a very simple case.
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.
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.
<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:
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.
<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.
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,
application/x-www-form-urlencoded
format by default.
Finally the browser
processes the resulting URL as if it were a link anchor.
application/x-www-form-urlencoded
format by default.
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
TYPE=SUBMIT
(which is typically presented as a grey box, with text inside as specified
in the HTML code) or
TYPE=IMAGE
(which is presented by graphical browsers using an image specified
in the HTML code) or
TYPE=TEXT
; one condition for this
is that there are no other single-line input elements in the form,
but for more details on this, consult
Alan Flavell's
document
FORM submission and the ENTER key?