4.10 FORMS Element for fill-out Forms

The HTML Language contains several elements that allow for user input. The simplest of these is ISINDEX, which can take a single line of text as user input. Much more sophisicated is the FORM element and its associated sub-elements INPUT, TEXTAREA, and SELECT, which allow for more sophisticated user input via fill-in FORMs. These allow for author specified radio and checkbox buttons (using INPUT elements), single-line text input fields (again using INPUT), selectable lists (via SELECT) and block text input regions (via TEXTAREA).

The data input into a FORM are sent to a server, although in this case the FORM element contains an attribute, ACTION, which specifies the URL to which the data should be sent. In addition, the FORM element can select the HTTP method by which the data are sent -- the GET HTTP method means that the data are appended to the URL like a query string, while the POST method means that the data are sent as a message body, much as data are sent from the server to the browser, but in the opposite direction.

I have not written a long on-line description of forms, although this topic is covered in detail in my printed book, and there are several FORM examples in the online supporting Web site. This online collection contains (1) a simple introduction to what FORMS do and (2) a link to the more detailed NCSA document (containing serveral examples)

4.10.1 What do FORMS do?

The FORM element allows you to create a fill-out form: the user reading the HTML document will see the FORM elements as user input elements -- he or she can then type information into the fields or select from buttons and pull-down menus to input their data. WHen the user submits the FORM, the data are encoded and transmitted to a server, where it must be interpreted and processed by a program. In general, this is done by so-called CGI, or Common Gateway Interface programs, residing on an HTTP server.

An example (if rather idiotic) FORM is:

<FORM ACTION="http://bla.bla.edu/cgi-bin/some-prgm" METHOD=POST>
First entry field: <INPUT NAME="entry1"> <BR>
Second entry field: <INPUT NAME="entry2" VALUE="bloop"> <BR>
Third entry field: <INPUT NAME="entry3">  --- 
Select Option: <SELECT NAME="entry4">
<OPTION VALUE="no1">Frogs
<OPTION VALUE="no2">Peaches
<OPTION VALUE="no3">Cream
<OPTION VALUE="no4">Newts
</SELECT>


To submit the query, press: 
<INPUT TYPE="submit" VALUE="Submit Query">. <P>
</FORM>

(note that you can use TABLEs to format the layout of the form). The above FORM is rendered as follows:

The user simply fill in the blanks or selects items from the list and presses "submit" (note that this form tries to access a nonexistent remote resource!)

FORMS are supported by practically all browsers. If you see nothing above here that looks like a form, then your browser must be very old!

4.10.2 Meanings of FORM Attributes

The ACTION specifies the url to which the form results will be sent: this URL should point to a cgi-bin/ script or program. If absent, the ACTION is taken to be the url of the current document -- that is, the data is returned to the same place from whence the document came.

The METHOD specifies the HTTP method to be used to submit the form information to the server. METHOD can have two arguments:

The ENCTYPE attribute specifies the way in which the data are to be encoded. This attribute is only relevant when METHOD="post", as the GET method only allows one type of encoding. For "post", the two possible values are:

The latter is useful for big forms, for forms that include files sent from the browser (using file upload), or for document written in non ASCII characters (for example, Japanese or Hebrew).

If you are writing your own FORMS you also need to write a cgi-bin script or program to interpret the FORM entries -- after all, something has to understand the data sent to the server. You will therefore also want to look at the cgi-bin section and related documents.