Forms

Perhaps the biggest advance that the HTML 2.0 specification made over its predecessors was the inclusion of elements that allowed for users to input information. These elements are the Form elements. They provide for the inclusion of objects like text boxes, choice lists, etc., and have proved invaluable for recent HTML applications, particularly search engines, database query entry and the like.

It should be noted that while these HTML elements can be used to easily define the presentation of the form to the user, the real value behind any form is in what it does with the information that is entered. For a form to do anything more than send a straight text dump of the form data (including control characters) to an e-mail address, the form data will need to be passed to some kind of CGI script, or server based executable for processing. (CGI scripting is outside of the scope of this reference and ample reference material is available elsewhere for those interested).

The following elements are used to create forms :

<FORM> - A form within a document
<INPUT ...> - One input field
<OPTION> - One option within a Select element
<SELECT> - A selection from a finite set of options
<TEXTAREA ...> - A multi-line input field
<LABEL ...> - Active Control Labels

Each variable field is defined by an INPUT, TEXTAREA, or OPTION element and must have a NAME attribute to identify its value in the data returned when the form is submitted.

A very simple form for eliciting user response (as shown below) would be :

<H1 ALIGN="center">Comment Form</H1>
<FORM METHOD="POST" ACTION="http://www.htmlib.com/formscript.cgi">
<CENTER>
Your name: <INPUT NAME="name" size="20">
Your e-mail address: <INPUT NAME="email" size="20">
<P>I think the HTML Reference is :
<SELECT NAME="Choice">
<OPTION>Outstanding
<OPTION>Very good
<OPTION>Good
<OPTION>Average
<OPTION>Below Average
<OPTION>Awful
<OPTION SELECTED>My response would be "indecent" under the CDA Act.
</SELECT>
<P>If you have any further comments, please enter them here:<BR>
<TEXTAREA NAME="Comments" ROWS="10" COLS="40">
</TEXTAREA>
<P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</CENTER>
</FORM>

Comment Form

Your name: Your e-mail address:

I think the HTML Reference is :

If you have any further comments, please enter them here:

Different platforms will have different native systems for navigating within the input fields of a form. (e.g. Windows users can use the Tab key to move from one field to the next through the order that the fields appear within the form). Different browsers may also display different text on any buttons included in the form. For example, Netscape defaults to displaying '"Submit Query" for a button specified by <INPUT TYPE=SUBMIT>, while the Internet Explorer and Mosaic display just "Submit" on such a button.

HTTP File Upload
It is possible to write forms that ask for files as input, rather than data input by input boxes and other simple elements such as checkboxes and radio buttons.

An example of such a form would be:

<FORM ENCTYPE="multipart/form-data" ACTION="_URL_" METHOD=POST>
Send this file: <INPUT NAME="userfile" TYPE="file">
<INPUT TYPE="submit" VALUE="Send File">
</FORM>

NOTE : This method of file upload is Netscape specific and is essentially adoption of another IETF Internet Draft by the Netscape authors. The Internet Draft in question, "Form based file upload in HTML", details adding the FILE option to the TYPE attribute of the INPUT element, allowing an ACCEPT attribute for the INPUT element (which would be a list of MIME types - essentially detailing what files are allowed to be uploaded as the contents of the form) and allowing the ENCTYPE of a form to be "multipart/form-data". This MIME type essentially wraps the form data (including that presented in any other input fields) as a data stream, with discrete boundaries between the information sections. For a more detailed description, readers should check the HTTP file upload specification.

The display method is largely at the discretion of the browsers that support this method. Netscape (Windows versions) display a "Browse" button beside the input box which brings up the standard open/save dialog box, allowing the choice of any local file for upload.