Form Tutor- Lesson 4

Yet another type of input is HIDDEN input.

<INPUT TYPE=HIDDEN NAME="LOCATION" VALUE="USA Form">

A HIDDEN input is a name/value pair that is returned to you but does not show up anywhere on the web page.

Let's suppose you were a company trying to generate leads for a new product. You have a standard form for gathering information... name, company, phone, products interested in, etc. The only problem is there are 6 slightly different versions of the form in 6 slightly different places. You need to know what's coming from where. What to do?

You could add a HIDDEN input to your forms like so...

<INPUT TYPE=HIDDEN NAME="LEADFORM" VALUE="Version 1"> ...for the first version
<INPUT TYPE=HIDDEN NAME="LEADFORM" VALUE="Version 2"> ...for the second version
<INPUT TYPE=HIDDEN NAME="LEADFORM" VALUE="Version 3"> ...for the third version
And so on and so forth yada yada yada.

By the way, it doesn't matter what the name/value pair in the hidden input is (or any input for that matter). It can be anything you want. This would be a perfectly legitimate HIDDEN input...

<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ...You would get back E=Mc^2

HIDDEN inputs are also useful for cgi scripts. For example, many Internet Service Providers have a script you can have your forms sent to. It then spits the form back to you all nice and neat and ready for human consumption. The hidden input tells the cgi script who you are, where to send the parsed data, etc.


An occasionally useful input is the File Upload input. With it your visitors can send you a file right off their hard drive.

<INPUT TYPE=FILE NAME="myfile">

When using this type of input, you must use ENCTYPE="multipart/form-data" in your FORM tag. Also be aware that the occasional older browser doesn't support this type of input and that when this input is used in a mailto form, the results can sometimes be unpredictable.


Last on the list are the SUBMIT and RESET buttons.

They really are very simple...

<INPUT TYPE=SUBMIT>

SUBMIT of course, sends the data...


...and RESET, clears the form.

<INPUT TYPE=RESET>

 

FAQ: When I press the Submit button, all I get is a New Mail Message that pops up. What am I doing wrong?
A: You're not doing anything "wrong". Your particular browser/email setup is not handling mailto forms very well. You'll need to use a CGI script to handle your forms.

Q: Is this going to happen to people using my form too?
A: It will invariably happen to a few. Once again, using a CGI form handler eliminates these problem.


We can easily change what the buttons say.

<INPUT TYPE=SUBMIT VALUE="Send it away Ray!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form Norm!"><P>


If necessary, the SUBMIT button can also have a NAME. You would need this if, for whatever reason, you had more than one SUBMIT button.


Can we use an image for a Submit button? Sure, piece of cake.

<INPUT TYPE=IMAGE SRC="submit.gif">


Add WIDTH & HEIGHT so your browser can load your page quickly and efficiently. Add an ALT attribute so if someone is running without images they can still submit your form. And add BORDER=0 if you want the little link colored box to go away.

<INPUT TYPE=IMAGE SRC="submit.gif" WIDTH=94 HEIGHT=26 BORDER=0 ALT="Submit">


Note that the INPUT TYPE=IMAGE is, by default, a Submit button only. You can't make a Reset image button.
 

FAQ: Can I make a simple button that just takes the user to another page?

A: Sure...

<FORM ACTION="../tables/index.html">
<INPUT TYPE="submit" VALUE="Table Tutor">
</FORM>


One more little tidbit and we're going to wrap this up. When you put a mailto form on your page and someone sends you information, you'll notice that it is sent with a default Subject. If you're visitor was using Netscape you'd get the default Subject "Form posted from Mozilla". Other browsers might send "Form Response", etc.

You can change this by editing what's in the <FORM> tag as follows...

<FORM METHOD=POST ACTION="mailto:robin@batman.org?subject=Jumpin Jellyfish!" ENCTYPE="text/plain">

Pretty cool huh?

Be advised however, that floating around out there are a few old email clients that can't handle a subject specified in that manner. In that situation, the data might appear to be sent, but in reality, it just dissappears into oblivion. If an occasional lost response is a concern to you, don't specify a subject.

If you skipped the part in the beginning that talked about CGI Form Handlers, I want you to go back and become familiar with the process. As I've said before, mailto forms can be a little troublesome and/or unreliable for a small percentage of your visitors. If you are concerned about the occasional lost message, you should really use a form mail script.

<--BACK        NEXT-->

General Table
of Contents
Lessons
Intro - 1 - 2 - 3 - 4 - 5
Quick
Reference
Barebones
HTML Guide
PROFESSIONAL WEB DESIGN