Topic: HTML

In an HTML document, forms are set between the <FORM> container tags. The form container works as follows:

<FORM METHOD="how_to_send" ACTION="URL of script">
...form data...
</FORM>

Notice that the <FORM> tag takes two attributes: METHOD and ACTION. The METHOD attribute accepts either POST or GET as its value. POST is by far the more popular, as it allows for a greater amount of data to be sent. GET is a little easier for Web programmers to deal with, and is best used with single responses, like a single textbox.

The second attribute is ACTION, which simply accepts the URL for the script that will process the data from your form. Most often the script is stored in a directory called bin/ or cgi-bin/ located on your Web server.

An example of the <FORM> tag then, would be the following:

<FORM METHOD="SEND" ACTION="http://www.fakecorp.com/cgi-bin/register_script">
</FORM>

As with any HTML container tag, this implementation of the <FORM> tag has actually created a complete form (just like <P> and </P> is a complete paragraph). Unfortunately, our complete form doesn't do anything yet, so that's somewhat academic.
Example of an HTML form available on theWeb.

Form Attributes

ENCTYPE="encodingType"
specifies the MIME encoding of the data sent:

• "application/x-www-form-urlencoded" (the default), is usually used if the METHOD attribute has the value POST.
• "multipart/form-data" is used when the form contains a file upload element (INPUT TYPE="FILE").

METHOD
specifies how information is sent to program invoked by submitting the form.

• GET (the default) appends the input information to the URL which on most receiving systems becomes the value of the environment variable QUERY_STRING.
• POST sends the input information in a data body that is available on stdin with the data length set in the environment variable CONTENT_LENGTH.

NAME="formName"
specifies the name of the form. The name is not displayed on the form. JavaScript can use the NAME attribute to differentiate different forms if there are multiple forms on a page. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.

ONRESET="JScode"
specifies JavaScript code that executes when a user resets the form by using a RESET button.

ONSUBMIT="JScode"
specifies JavaScript code that executes when a user submits the form by clicking a "Submit" button.You can use the ONSUBMIT attribute to prevent a form from being submitted; to do so, put a return statement that returns false in the JavaScript code. Any other returned value lets the form submit. If you omit the return statement, the form is submitted.

TARGET="windowName"
specifies the window that displays the data returned by the invoked program. See the description of special target values in the "A as link" section for a list of the pre-defined target values. Navigator 2. Example
The following example creates a form called LoginForm that contains text fields for user name and password, a submit button, and a cancel button.

<FORM NAME="LoginForm" METHOD=POST ACTION="urltoInvoke">
  <P>User name:
  <INPUT TYPE="text" NAME="userName" SIZE="10">
  <P>Password:
  <INPUT TYPE="password" NAME="password" SIZE="12">
  <P><INPUT TYPE="submit" VALUE="Log in">
  <INPUT TYPE="button" VALUE="Cancel" onClick="window.close()">
</FORM>

Text Fields and Attributes

One of the more common uses for forms is to accept multiple lines of text from a user, perhaps for feedback, bug reports, or other uses. To do this, use the <TEXTAREA> tag within your form. You can set this tag to control the number of rows and columns it displays, although it will generally accept as many characters as the user desires to enter. It takes the following form:

<TEXTAREA NAME="variable_name" ROWS="number" COLS="number">
default text
</TEXTAREA>

It may surprise you to find that <TEXTAREA> is a container tag, since it just puts a box for typing on the page. What's contained in the tag is the default text-so you can guide your users by letting them know what you'd like entered there. For instance:

<FORM>
<TEXTAREA NAME="comments" ROWS="4" COLS="40">
Enter comments about this Web site.
Good or Bad.
</TEXTAREA>
</FORM>

The default text appears in the textbox just as typed. the text inside the <TEXTAREA> tag works like <PRE> formatted text. Any returns or spaces you add to the text are displayed in the browser window. In fact, notice that by hitting Return after the opening <TEXTAREA> tag, I'm inserting a blank line at the top of the textarea (in many browsers).

Example: The <TEXTAREA> tag in action.

The NAME attribute is a variable name for this string of text. It gets passed on to your processing script on the Web server. ROWS and COLS can accept different numbers to change the size of the textarea box, but you should take care that the majority of browsers can see the entire box on-screen. It's best to limit COLS to 80, and ROWS to something like 24 (the typical size for a text-based computer screen). But it's up to you.
<TEXTAREA> will also accept one other attribute: WRAP. WRAP can be set to OFF (which is the default if WRAP is not included), VIRTUAL, or PHYSICAL. Setting wrap to PHYSICAL forces the browser to include actual line breaks in the text when sending it to the Web server. VIRTUAL makes the textbox seem to offer line wrap, but sends a continuous stream of words to the Web server (unless the user has entered returns on his or her own).

Example: Web-based Feedback Form

I mentioned before that <TEXTAREA> is commonly used to gather feedback from your Web users. To create a small form to do just that, save your default template as a new HTML document and enter the following:

<BODY>
<H3>Feedback Form</H3>
<P>Please take a moment to tell us what you thought of the Web site.<BR>
Your Feedback is appreciated!</P>
<FORM METHOD="POST" ACTION="cgi-bin/feedback">
Enter your comments below:<BR>
<TEXTAREA NAME="comments" ROWS="10" COLS="70" WRAP="VIRTUAL">
Dear BigCorp:
</TEXTAREA>
</FORM>
</BODY>

You can see how this looks in figure 13.3. Notice in the example that some descriptive text is enclosed inside the <FORM> tag, but outside of the <TEXTAREA> tag. This is completely legal-it just lets you explain what the purpose of the textarea is.
Example : Sample textarea HTML form.
You may have realized that there's something lacking in this sample form. There's no way to submit the user's entry! You'll get to that in the next section, when I discuss this next tag for form entry.

The <INPUT> Tag

Our next tag for HTML forms give you the opportunity to be a bit more picky about the type of input you're going to accept from the user. The <INPUT> tag follows the following format:

<INPUT TYPE="type_of_box" NAME="variable" SIZE="number" MAXLENGTH="number">

Now, technically, the only required attributes are TYPE and NAME. Some other "types" of the input tag will also accept the attribute VALUE. But first, let's look at the different types of <INPUT>.

TEXT

The first possible value for the TYPE attribute is TEXT, which creates a single-line textbox of a length you choose. Notice that the length of the box and the maximum length entered by the user can be set separately. It's possible to have a box longer (or, more often, shorter) than the maximum number of characters you allow to be entered. Here's an example of a textbox:
Last name: <INPUT TYPE="TEXT" NAME="last_name" SIZE="40" MAXLENGTH="40">
When appropriately entered between <FORM> tags, this <INPUT> If desired, the attribute VALUE can be used to give the textbox a default entry, as in the following example:

Example : Using the TEXT option with the TYPE attribute.

Type of Computer: <INPUT TYPE="TEXT" NAME="computer" SIZE="50" MAXLENGTH="50" VALUE="Pentium">

PASSWORD

The PASSWORD option is nearly identical to the TEXT option except that it responds to typed letters with bullet points or a similar scheme (chosen by the browser) to keep the words from being read. A sample password box could be the following:

Enter Password: <INPUT TYPE="PASSWORD" NAME="password" SIZE="25" MAXLENGTH="25">

Example: PASSWORD hides text from people looking over your user's shoulder.

Recognize that the text is still stored as the text typed by the user-not as bullet points or similar characters.

CHECKBOX

This value for TYPE allows you to create a checkbox-style interface for your form. This is best used when there are two possible values for a given choice-and no others. You can also determine whether or not a checkbox will already be checked (so that it must be unchecked by the user, if desired), by using the attribute CHECKED. Here's an example of adding checkboxes to a form:
Type of computer(s) you own:<BR>

<INPUT TYPE="CHECKBOX" NAME="Pentium" CHECKED> Pentium
<INPUT TYPE="CHECKBOX" NAME="486"> 486-Series PC
<INPUT TYPE="CHECKBOX" NAME="Macintosh"> Macintosh

In this example, it's possible to check as many of the options as are presented. CHECKBOX evaluates each item separately from any others.

Example: Notice that Pentium is prechecked.

RADIO

Like CHECKBOX, RADIO is designed to offer your user a choice from pre-determined options. Unlike CHECKBOX, however, RADIO is also designed to accept only one response from among its options. RADIO uses the same attributes and basic format as CHECKBOX.
RADIO requires that you use the VALUE attribute, and that the NAME attribute be the same for all of <INPUT> tags that are intended for the same group. VALUE, on the other hand, should be different for each choice. For instance, look at the following example:
Choose the computer type you use most often:<BR>

<INPUT TYPE="RADIO" NAME="Computer" VALUE="P" CHECKED> Pentium
<INPUT TYPE="RADIO" NAME="Computer" VALUE="4"> 486-Series PC
<INPUT TYPE="RADIO" NAME="Computer" VALUE="M"> Macintosh
<INPUT TYPE="RADIO" NAME="Computer" VALUE="O"> Other

With RADIO, it's important to assign a default value, since it's possible that the user will simply skip the entry altogether. While the user can't check more than one, he or she can check none. So choose the most common value and set it as CHECKED, just so that the form-processing script doesn't have trouble.

HIDDEN
This <INPUT> type technically isn't "input" at all. Rather, it's designed to pass some sort of value along to the Web server and script. It's generally used to send a keyword, validation number, or some other kind of string to the script so that the script knows it's being accessed by a valid (or just a particular) Web page. The <INPUT TYPE="Hidden"> tag takes the attributes NAME and VALUE.

RESET
The <INPUT> tag has built into it the ability to clear an HTML form. RESET simply creates a push button (named with the VALUE string) that resets all of the elements in that particular FORM to their default values (erasing anything that the user has entered). An example would be the following:
<INPUT TYPE="RESET">
With a VALUE statement, you could enter the following:
<INPUT TYPE="RESET" VALUE="Reset the Form">

Example : Default and VALUE-attributed Reset buttons.

SUBMIT

The <INPUT> tag also has a type that automatically submits the data that's been entered into the HTML form. The SUBMIT type accepts only the attribute VALUE, which can be used to rename the button. Otherwise, the only purpose of the Submit button is to send off all the other form information that's been entered by your user. See the following two examples
Example: Creating a Submit button.

<INPUT TYPE="SUBMIT">
<INPUT TYPE="SUBMIT" VALUE="SEND IT IN!">

You can use just about anything you want for the VALUE, although it's best to remember that really small words, like OK, don't look great as buttons. To make a button larger, enter the VALUE with spaces on either end, like in the following:
<INPUT TYPE="SUBMIT" VALUE="       GO      ">

Example: A More Complete Form
Along with all the other <INPUT> types, now you've finally got a way to submit data. So, let's create a more involved form that includes some of these examples-a subscription form.
Save your HTML template to create a new document.

 scrp_frm.html  Creating a Complete Form

<BODY>
<H2>Subscribe to CorpWorld</H2>
<P>Interested in receiving daily email updates of all the latest exploits of BigCorp? Well, now you can. And, best of all, it's free! Just fill out this form and submit it by clicking the "Send it In" button. We'll put you on our mailing list, and you'll receive your first email in 3-5 days.</P>
<FORM METHOD="Send" ACTION="http://www.fakecorp.com/cgi-bin/subscribe">
Please complete all of the following:<BR>
First Name: <INPUT TYPE="Text" Name="first" SIZE="25" MAXLENGTH="24"><BR>
Last Name:  <INPUT TYPE="Text" Name="last" SIZE="35" MAXLENGTH="34"><BR>
Business:   <INPUT TYPE="Text" Name="business" SIZE="50" MAXLENGTH="49"><BR>
We must have a correct email address to send you the newsletter:<BR>
Email:      <INPUT TYPE="Text" Name="email" SIZE="50" MAXLENGTH="49"><BR>
How did you hear about BigCorp's email letter?<BR>
<INPUT TYPE="RADIO" NAME="hear" VALUE="web" CHECKED>Here on the Web
<INPUT TYPE="RADIO" NAME="hear" VALUE="mag">In a magazine
<INPUT TYPE="RADIO" NAME="hear" VALUE="paper">Newspaper story
<INPUT TYPE="RADIO" NAME="hear" VALUE="other">Other
<BR> Would you care to be on our regular mailing list?<BR>
<INPUT TYPE="CHECKBOX" NAME="snailmail" CHECKED> Yes, I love junk mail<BR>
<INPUT TYPE="RESET">
<INPUT TYPE="SUBMIT" VALUE="Send it in!">
</FORM>
</BODY>

Notice that, for text type <INPUT> boxes, the MAXLENGTH is one less than the size of the box. This tends to look a little better, but choosing the size is up to you.
Example : The complete form in MS Internet Explorer.