Forms Cleanup

[Previous] [Next] [Contents] [Glossary] [Index] [Quiz] [HTML Lab]
Progress: 9/10

Take a breather, we're almost there. Just a few more tags, and we'll be done with forms markup. I promise.

TEXTAREA

The TEXTAREA tag is used to create a box where the user may type large amounts of text at will. A typical use for TEXTAREA is to ask users to input general comments they may have about a Web site. In addition to having some special attributes, TEXTAREA is a container, so the close-tag is required. 

   <TEXTAREA name="comments" rows=5 cols=65></TEXTAREA>

The special attributes I referred to are, as you might have guessed from the above example, ROWS and COLS. These specify the number of rows high and columns wide the textarea should be. The numbers are measured in characters, so ROWS=5 makes the box five lines high, and COLS=65 means that the box will be 65 characters wide. This will cause the box to grow or shrink depending on the size of the monospace font set by each user.

To make the example a bit more real: 

Markup:
   <TEXTAREA name="comments" rows=5 cols=65></TEXTAREA>

Result:

As you see, the input is not limited to the number of rows and columns specified in the tag; a line can be longer than the width of the box, and there can be more lines than the height of the box. The user is basically given an interactive area of preformatted text to play with-- all of the rules of the <PRE> tag apply within.

While TEXTAREA boxes do not have the ability to do dynamic word-wrapping yet, they may soon. The ability to add attributes such as "textwrap" to the TEXTAREA tag has been discussed, and may be widely supported by the time you read this.

You may wonder why textareas are containers. After all, the close tag doesn't seem to serve much purpose. Actually, it does. If you want to insert some text into the textarea as a default, it would go between the open and close tags. 

Markup:
   <TEXTAREA name="comments" rows=5 cols=65>Please type here...</TEXTAREA>

Result:

Again, preformatted-text rules apply within the textarea. If you put a return between the open tag and the enclosed text, then the text will appear on the second line of the textarea.

INPUT Redux

That's right, our old friend INPUT is back. In fact, the last three form elements we'll discuss are types of the INPUT tag. After that, I'll mention one last wrinkle in text inputs, and that's it!

Hidden

The first type is hidden. It does exactly what it sounds like: it allows for an input which is hidden from the user.

The natural assumption is that this is one of those computer geek in-jokes, so that we can secretly create places to type in data which can't be seen but are nonetheless there. This is not actually the case. Hidden inputs are completely hidden from the user-- there is no way to affect the value of the INPUT, which is why assigning an explicit value is important. Otherwise, the value of the input will be literally nothing. Take a look: 

Markup:
   <INPUT type="hidden" name="sendTo" value="[email protected]">

Result:

Yes, the Result section does contain markup. Trust me, it's there. It's just hidden. (Go figure.)

The next question which usually gets asked is, "What's the point? What's it good for?" Well, what it's good for is to pass information to the CGI program which does not and should not change, but is for some reason important.

A good example of this is the Aurora Generic Feedback System, which was written by Library Information Technologies in an attempt to provide our users with basic feedback forms without the need for teaching them a CGI language, or writing a new script for every form. There are four interactive inputs allowed, and a fifth hidden input called "sendTo," which should look a bit familiar. The value of "sendTo" is the e-mail address of the person who should receive the feedback which users enter into the form.

This way, using one program, we can support a theoretically infinite number of feedback forms. An author has only to set up the form, plug his e-mail address into the VALUE attribute of the "sendTo" INPUT, and he's done. There are other uses for hidden, but most (if not all) of them fall into categories similar to what I have just described.

Submit and Reset

Granted, all of these form elements are really cool, letting the user input data in a variety of ways, but what good are they if the user can't tell the browser when to send the data off to the CGI program? And what if the user realizes he made several mistakes and just wants to start over instead of correcting each one of the mistakes he made?

That's what the INPUT types "submit" and "reset" are for. Atypically, these INPUTs do not need names, as they do not generate any data to be sent. Their functions are to affect the rest of the form.

First, submit inputs are the user's way of saying, "I'm done now, take this stuff I input and do that voodoo that you do so well!" The markup... 

   <INPUT type="submit">

...will create a button on the screen which says something like "Submit Query" (the actual label may vary). Selecting a Submit button triggers the posting of the input data to the CGI program.

Similarly, the markup... 

   <INPUT type="reset">

...places a button which is labelled something like "Reset Form" (again, the actual label will vary). Selecting the button will cause the entire form to be reset to its default state, wiping out any and all changes made by the user.

Usually, the two buttons are placed together at the bottom of a form, as in Figure 8.1, but there is nothing which says they have to go together, or at the bottom of the form. That's a matter of custom more than anything else. You could put them at the top of the form, or in the middle, or separate them by entire paragraphs, or have multiple Submit and Reset buttons sprinkled throughout the form.

Most people feel that the default labels which browsers give to these buttons are pretty boring. Fortunately, you can change those labels by using a VALUE attribute. For example: 

   <INPUT type="submit" value="Send This Puppy">
   <INPUT type="reset" value="No, Wait, It's All Wrong">

will yield the following:

The functions of the buttons are, of course, still the same.

Speaking of Values...

There is another way you can use the VALUE attribute with an INPUT tag. If you assign a value to a text or password input, then it will appear in the input box by default. 

   Markup: <INPUT type="text" name="greet" value="Hi there!">

   Result:

The user is perfectly free to add to, alter, or completely replace the contents of the input box if he feels like doing so, of course. If he does nothing to the contents of the input, then its predefined value will be used when the form is submitted.

Are We There Yet?

Yes! That's it! Done! (And about time, too.) For a real-world synthesis of this chapter and the previous three, see Appendix B for a form which brings together most of the examples used through the forms section of the tutorial and adds a few extras, just for fun.

Chapter 8 Quiz
Next-- Conclusion
Previous -- Chapter 7: Forms: SELECT
Table of Contents
Tutorial Glossary
Tutorial Index
The HTML Laboratory