Web Tutor - Forms

	Sign In Sign-Up

HTML Studio's

Lesson : 1 - 2 - 3 - 4 - 5 - 6

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>

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.

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">

< Back Next >

Lesson : 1 - 2 - 3 - 4 - 5 - 6

Maintained by Nick Grant < htmlstudio@talk21.com >

HTML Studio's Main Page