| Form Tutor - Lesson 5 |
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.
<FORM> <INPUT TYPE=FILE NAME="myfile"> </FORM>
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 often be unpredictable.
Last on the list are the SUBMIT and RESET buttons.
They really are very simple...
<FORM> <INPUT TYPE="submit"> </FORM>
SUBMIT of course, sends the data...
...and RESET, clears the form.
<FORM> <INPUT TYPE="reset"> </FORM>
|
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?
|
We can easily change what the buttons say.
<FORM> <INPUT TYPE="submit" VALUE="Send it away Ray!"> <INPUT TYPE="reset" VALUE="Clear the form Norm!"> </FORM>
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.
<FORM> <INPUT TYPE="image" SRC="submit.gif"> </FORM>
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.
<FORM> <INPUT TYPE="image" SRC="images/submit.gif" WIDTH=94 HEIGHT=26 BORDER=0 ALT="Submit"> </FORM>
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> |
|
FAQ: How can I send my visitor to another page after they submit my form?
A: That depends. If you are using a CGI script to process your forms (preferred) then that capability is probably there. The directions for using that particular script may have you send the redirect URL as a hidden field, or it may be specified in the CGI script itself. Either way, consult the documentation for that script. If you are using mailto forms then there's still something we can do. Understand however that mailto forms can be unreliable depending on the visitor's browser/email setup. Some visitors may have trouble sending the data. (How many? 5%? 20%? More? I don't know.) Also, the mailto redirect requires Javascript, and while most people have javascript enabled, those that don't won't get redirected. So, all warnings given... here's how to add a javascript redirect to a mailto form: First add this in the HEAD section of your document... <SCRIPT language="JavaScript"><!--
function FormRedirect(){
setTimeout('this.document.location.href = "page.html"',5000);}
//--></SCRIPT>
Where page.html is the URL of the redirect document. Then add this to your FORM tag... onSubmit="FormRedirect()" Below is a sample form. <FORM NAME="myform" METHOD=POST ACTION="mailto:abc@123.org"
ENCTYPE="text/plain" onSubmit="FormRedirect()">
<INPUT TYPE="text" NAME="mytextbox" VALUE="">
<INPUT TYPE="submit">
</FORM>
Note the 5000 in the function. It is a 5000 millisecond delay (5 seconds) and it's necessary to allow the browser to actually send the data before the redirect occurs. If the browser takes longer than 5 seconds, it redirects anyway and the data goes bye-bye. If the mailto action fails, the redirect happens anyway and the data again goes bye-bye. (Actually, the data is probably going to still be there if the user hits the back button. But, unless he makes other efforts to send it to you, you'll never see it.) |
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 caertain percentage of your visitors. If you are concerned about the occasional lost message, you should really use a form mail script.
| ||||||||