Hoover Web Templates 100's of professional business and personal web templates  
  Web Design Templates Learn about Web Design. Check out our Web Design Article Archive.
 
Hoover Web TemplatesContact UsReturn to HomeView PayPal Shopping CartView Credit Card Shopping Cart
 
        Download Sample Website Templates Download Sample Web Templates - Test Your Skills Before You Buy!! CLICK TO DOWNLOAD
  Hoover Web Templates Beginner HTML Website Templates  
Free Downloads
Free Web Templates Free Business Forms Free Web Templates Free Website Design Articles
Website Extras
Web Template Search:
exact match    contains all keywords
 
HTML Tutorial - Learn Web Page Design Step By Step!
   

 

Are you confused about web page design and don't know where to start? Feel free to learn HTML and how to design your very own web site by using our FREE Online HTML Tutorial.

HTML Tutorial Part 15: Web Forms Continued

Hidden fields

Yet another type of input is HIDDEN input.

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Company Position Form 1">

A HIDDEN input is a name/value pair that is returned to you but does not show up anywhere on the web page. The hidden input above is needed for use with Mailto Formatter.

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="FORMNAME" VALUE="Version 1"> ...for the first version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2"> ...for the second version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3"> ...for the third version
And so on and so forth.

By the way, it doesn't matter what the name/value pair in the hidden input is (or any input for that matter). I have just been using "FORMNAME" because it saved me some typing. 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.

Submit and Reset Buttons

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>


We can easily change what the buttons say.

<INPUT TYPE=SUBMIT VALUE="Send it away!"><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.


Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do:
1) you can send the data to a cgi script for processing, or
2) you can have the data emailed to you.
As for the first, whoever wrote the script can tell you how the data should be sent.
The second, or mailto form should have the following attributes in the <FORM> tag.

Note- Microsoft's Internet Explorer 3.0 does not support mailto forms. When you try to submit the information, the new mail message window pops up. Explorer does however support forms sent to a CGI script.

<FORM METHOD=POST ACTION="mailto:testing" ENCTYPE="application/x-www-form-urlencoded">
This line is very important. The only thing you have to do is plug in your email address after mailto: The rest must be written exactly as shown. The words FORM, METHOD, POST & ACTION do not have to be capitalized but there must be a space between each attribute.. between FORM & METHOD, between POST & ACTION, and between .com" & ENCTYPE.

Unfortunately the data will be sent to you in this 'only useful to a computer' format...

FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313+Mockingbird+Lane
&CITY=Beverly+Hills&STATE=CA

What you'll need is a program to turn it into 'useful to a human' format...

FORMNAME=New Entrant
NAME=R.U. Havinfun
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA

Some mail programs are capable of converting the data without resorting to a separate program. You may want to try this method first. Just remove the instruction ENCTYPE="application/x-www-form-urlencoded" and in its place use ENCTYPE="text/plain".

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 your 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:xxx@xxx.xxx?subject=Company feedback form" ENCTYPE="application/x-www-form-urlencoded">


Your own HTML page...

Open the page "feedback.htm" in Notepad, and add the following (the blue text is what to add).

<html>
<body background="bgnd.gif">

<center><h1>Feedback Form</h1></center>
<br>
<form method=post action="mailto:YOUREMAILADDRESS?subject=Feedback" enctype="text/plain">
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
.
.
</p>
<p>
<b>When it comes to web browsers:</b><br>
.
.
</p>

<b>I rate your site as:</b><br>
.
.
</p>
<p>
<b>Comments:</b><br>
.
.
</p>
<p>
<input type="submit" value="Send it!"><br>
<input type="reset" value="Clear it!">
</p>

</body>
</html>


Save the file.


Go To The Next Page

Didn't see anything you like?
Customize any of our Web Templates or view Premium Website Templates with PSD Source Files!
More website products: Flash Photo Galleries, Flash MP3 Music Players and Royalty Free Stock Photos.
Free Web Templates: Hoover Free Templates, A Free Web Template, Free Clipart Web Templates
Professional Web Site Design & Web Templates NewsletterJoin our eMail list to get sales announcements and discounts on your next web template purchase!

2000-2008 Hoover Web Design. All Rights Reserved.
No part of this website may be downloaded, copied or reproduced without the written permission of Hoover Web Design.