Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

The ENCTYPE attribute was introduced by Netscape for the purpose of providing a file name to be uploaded as form input. You set ENCTYPE equal to the MIME type expected for the file being uploaded. ENCTYPE does not create the input field for the filename; rather, it gives the browser a cue as to what kind of file it is sending. When prompting for a file to upload, you need to use an <INPUT> tag with TYPE set equal to FILE.

As an example of these three <FORM> tag attributes, examine the following HTML:

<FORM ACTION=”logo_upload.cgi” METHOD=POST ENCTYPE=”image/gif”>
Please enter the name of the GIF file containing your logo:
<INPUT TYPE=”FILE” NAME=”logo”>
<INPUT TYPE=”SUBMIT” VALUE=”Upload”>
</FORM>

The form header of this short form instructs the server to process the form data using the program named logo_upload.cgi. Form data is passed using the POST method, and the expected type of file being submitted is a GIF file.

New <FORM> tag attributes in HTML 4.0 include TARGET, which is used to direct the response from the processing script to a particular frame; ACCEPT, which denotes the MIME types of files that the server processing the form can handle correctly (this is useful when a user is submitting a set of files to the server because you can then check to make sure that all the submitted files are of an acceptable MIME type); and ACCEPT-CHARSET, which specifies the character sets the server understands. Incorporating these attributes, the code above might look like this:

<FORM ACTION=”logo_upload.cgi” METHOD=POST ENCTYPE=”image/gif”
  ACCEPT=”image/gif,image/jpeg” TARGET=”main”
  ACCEPT-CHARSET=”EUC-JP”>
Please enter the name of the GIF file containing your logo:
<INPUT TYPE=”FILE” NAME=”logo”>
<INPUT TYPE=”SUBMIT” VALUE=”Upload”>
</FORM>

The EUC-JP value for the ACCEPT-CHARSET attribute suggests the use of a Japanese character set to the server that processes the form.

The <FORM> tag can also take two event handlers—onSubmit and onReset. This gives you the capability to execute some script code when the form is submitted or reset, respectively. If you write a JavaScript function that validates the data a user enters into a form, for example, you could invoke the script using an event handler as follows:

<FORM ACTION=”upload_logo.cgi” onSubmit=”validateform()”>

• To learn more about using JavaScript to validate form input, see “Using JavaScript to Create Smart Forms,” p. 513.

Named Input Fields

The named input fields typically compose the bulk of a form. The fields appear as standard GUI controls, such as text boxes, check boxes, radio buttons, and menus. You assign each field a unique name that eventually becomes the variable name used in the processing script.

If you are not coding your own processing scripts, be sure to sit down with your programmer to agree on variable names. The names used in the form should exactly match those used in coding the script.

You can use different GUI controls to enter information into forms. The controls for named input fields appear in Table 8.2.

The <INPUT> Tag

You might notice in Table 8.2 that the <INPUT> tag handles the majority of named input fields. <INPUT> is a standalone tag that, thanks to the many values of its TYPE attribute, can place most of the fields you need on your forms. <INPUT> also takes other attributes depending on which TYPE is in use. These additional attributes are covered for each type, as appropriate, over the next several sections.

---

NOTE:  The <INPUT> tag and other tags that produce named input fields create only the fields themselves. You, as the form designer, must include some descriptive text next to each field so that users know what information to enter. You might also need to use line breaks (<BR>), paragraph breaks (<P>), and nonbreaking space (&nbsp;) to create the spacing you want between form fields.

---

Because browsers ignore whitespace, lining up the left edges of text input boxes on multiple lines is difficult because the text to the left of the boxes is of different lengths. In this instance, HTML tables are invaluable. By setting up the text labels and input fields as cells in the same row of an HTML table, you can produce a nicely formatted form. To learn more about forms using table conventions, consult Chapter 6, “Tables.”

Text and Password Fields Text and password fields are simple data entry fields. The only difference between them is that text typed into a password field appears onscreen as asterisks (*).

---

CAUTION:  

Using a password field protects users’ passwords from the people looking over their shoulders, but it does not protect the password as it travels over the Internet. To protect password data as it moves from browser to server, you need to use some type of encryption (usually by Secure Sockets Layer, or SSL, on the Web server) or a similar security measure. Authentication of both the server and client by using signed digital certificates are two other steps you can take to keep Internet transactions secure.

---

A text or password field is produced by the HTML (attributes in square brackets are optional):

<INPUT TYPE=”{TEXT|PASSWORD}” NAME=”Name” [VALUE=”default_text”]
[SIZE=”width”] [MAXLENGTH=”max_width”]>