 This site designed with Web Page Creator 32 HTML Editor ver. 6.0 |
| Introduction |
| Backgrounds |
| Fonts and Text |
| Accents |
| Lists |
| Images |
| Links |
| Tables |
| Frames |
| Forms |
| JavaScript |
| Great Books |
| Members Area |
Make yourself a file folder called "Forms". You'll need it for this section.
Forms require a minimum of this much code: <FORM>
Forms can do two basic things, they can send data to a CGI Script (Common Gateway Interface) to process the information or they can have the data emailed directly to you.
The most simple type of FORM is a "mailto:" form. Make yourself a brand new page and save it in your Forms file folder as "Form1.html". It should look like this: <HTML>
<FORM>
</FORM>
</BODY>
Now we have to tell the browser what to do with this data the form collects, and where to send it. In a simple "mailto:" form we must include these attributes inside the <FORM> tag itself like so:
<HTML>
<FORM </FORM>
</BODY>
In this example all you have to do is stick your email address in after "mailto:", but the rest of the line must be entered exactly as shown for it to work. Now add the following code to gather more information from your viewer:
<HTML>
<FORM METHOD="POST" ACTION="mailto:[email protected]"> <INPUT TYPE="hidden" NAME="form_name" VALUE="Form1">
<P>Enter your name:
<BR><INPUT TYPE="text" NAME="name" SIZE="35">
<P>Enter your email address:
<BR><INPUT TYPE="text" NAME="email" SIZE="35">
<P><INPUT TYPE="submit" VALUE="Send it now"> </FORM>
</BODY>
The <FORM> tag must contain the ACTION and the METHOD attributes in order to function. The ACTION attribute for example can be used to define the link to, or the destination / location of the CGI Server handling the actual form processing. While the METHOD Attribute can be used to declare that the method is "GET" or "POST". It would always be METHOD="POST" for email method.
In the examples above, the
You can make your text input lines as long or as short as you want to suit your needs for the type of information you are asking for. You can also limit the actual size of the text input box, but extend the possible number of charactors your visitors can input with the use of the MAXLENGTH attribute like so:
<INPUT TYPE="text" NAME="MyInput" SIZE="40" MAXLENGTH="75">
</FORM>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
</HTML>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
</HTML>* Note that Microsoft Internet Explorer version 3.0 does not support mailto: forms, it does however support forms sent to a CGI Script.
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
</HTML>
<INPUT TYPE="text" - indicates that it is a text type of input
NAME="email" - names that particular input line so that you know what it is when the email comes to you
SIZE="35"> - Declares that the text input line will be 35 columns, or charactors in length.
The Submit Button - sends the information to wherever you directed ot to.
You can also assign a value that it will start with.
<INPUT TYPE="text" NAME="MyInput" SIZE="40" MAXLENGTH="75" VALUE="My Input Starts Hree:">
Other types of forms input are the CHECKBOX and the RADIO BUTTON.
We'll try the Radio Buttons first. Text Editor time again!
<HTML>
<FORM METHOD="POST" ACTION="mailto:[email protected]"> <P>Pick you favorite Blues Artist:
<BR><INPUT TYPE="RADIO" NAME="BluesArtist" VALUE="Stevie Ray Vaughn">Stevie Ray Vaughn
<BR><INPUT TYPE="RADIO" NAME="BluesArtist" VALUE="Johnny Lang">Johnny Lang
<BR><INPUT TYPE="RADIO" NAME="BluesArtist" VALUE="B.B. King">B.B. King
<P><INPUT TYPE="SUBMIT" VALUE="Choose Now"> </FORM>
</BODY>
Now see the slight differences when using CHECKBOX input.
<FORM METHOD="POST" ACTION="mailto:[email protected]
<P>Pick the Blues Artists that you like:
<BR><INPUT TYPE="CHECKBOX" NAME="Stevie Ray Vaughn" VALUE="yes">Stevie Ray Vaughn
<BR><INPUT TYPE="RADIO" NAME="Johnny Lang" VALUE="yes">Johnny Lang
<BR><INPUT TYPE="RADIO" NAME="B.B. King" VALUE="yes">B.B. King
<P><INPUT TYPE="SUBMIT" VALUE="Choose Now"> </FORM>
</BODY>
In the two examples shown here, the differences are that for the CHECKBOX input type, the NAME changes and the VALUE stays the same. In the RADIO BUTTON input type, the VALUE can change, but the NAME stays the same.
If your visitor checks the RADIO BUTTON for B.B. King in the example above, it would return to you like this:
BluesArtist=B.B. King
In the CHECKBOX example it would return whatever number they selected, if all were selected your return message would be something like this:
Stevie Ray Vaughn=yes
Another type of forms input is the TEXTAREA. This lets your users input just about anything, even their entire life story if you want. By using these tags you can create a box where clients can input a paragraph or two of info to you.
Example: <HTML>
<FORM> <P>Tell me your comments:
<BR><TEXTAREA NAME="comments" ROWS="10" COLS="30">
</TEXTAREA> </FORM>
</BODY>
This creates a TEXTAREA input box that is 10 ROWS in height and 30 COLUMNS in width. You can make them as large or as small as needed for your specific purpose by changing the ROWS= and the COLS= attributes. You can also go one step further and define how the typed input text will wrap within the box by using the WRAP=PHYSICAL or the WRAP=VIRTUAL attributes within the <TEXTAREA> tag. The WRAP=PHYSICAL attribute means that the text inside the input box will wrap, and will also be sent that way. Whereas the WRAP=VIRTUAL attribute means that the text in the box will wrap in appearance but will be sent in one long continuous string. In the <TEXTAREA> tag the WRAP attribute looks like this: <TEXTAREA NAME="comments" ROWS="10" COLS="30" WRAP=PHYSICAL> <TEXTAREA NAME="comments" ROWS="10" COLS="30" WRAP=VIRTUAL> Use your imagination with all this great stuff and there are no limits to what you can do with it.
Another useful type of forms input is called the Pull Down List. Only instead of using the INPUT TYPE tag we use the <SELECT> and the </SELECT> tags.
<FORM>
<SELECT NAME="Favorite Ice Cream">
</SELECT>
</FORM>
Add some options to select from:
<FORM>
<SELECT NAME="Favorite Ice Cream"> <OPTION VALUE="Rocky Road">Rocky Road
<OPTION VALUE="Chocolate Marshmellow">Chocolate Marshmellow
<OPTION VALUE="Chocolate Chip">Chocolate Chip
<OPTION VALUE="Amaretto">Amaretto
</SELECT>
</FORM>
You can select the initial choice to be displayed in the Pull Down List by simply inserting the SELECTED attribute into the OPTION LINE of the item of your choice, and by default it will show in the option window area when your web page loads.
<FORM>
<SELECT NAME="Favorite Ice Cream"> <OPTION VALUE="Rocky Road">
<OPTION VALUE="Chocolate Marshmellow" <OPTION VALUE="Chocolate Chip">
<OPTION VALUE="Amaretto"> </SELECT>
</FORM>
We can also turn this into a SCROLLING LIST by simply adding the SIZE attribute to the <SELECT> tag. But along with that add several more options to your list.
<FORM>
<SELECT NAME="Favorite Ice Cream" <OPTION VALUE="Rocky Road">
<OPTION VALUE="Chocolate Marshmellow" <OPTION VALUE="Vanilla Nut Crunch">
<OPTION VALUE="Strawberry Delite">
<OPTION VALUE="Peach Swirl">
<OPTION VALUE="Mint Pecan">
<OPTION VALUE="Heavenly Hazelnut"> <OPTION VALUE="Chocolate Chip">
<OPTION VALUE="Amaretto"> </SELECT>
</FORM>
And last but not least one simple one that I seem to have left out is the RESET button. Usually used with the SUBMIT button as a way for your visitors to clear the form and start all over again. When used with the SCROLLING LIST above it should look like this:
<FORM>
<SELECT NAME="Favorite Ice Cream" SIZE=4>
<OPTION VALUE="Rocky Road">
<OPTION VALUE="Chocolate Marshmellow"SELECTED>
<OPTION VALUE="Vanilla Nut Crunch">
<OPTION VALUE="Strawberry Delite">
<OPTION VALUE="Peach Swirl">
<OPTION VALUE="Mint Pecan">
<OPTION VALUE="Heavenly Hazelnut"
<OPTION VALUE="Chocolate Chip">
<OPTION VALUE="Amaretto"> <P>Submit it now
<BR><INPUT TYPE="SUBMIT" VALUE="Submit it now">
<P>Clear the form and start all over
<BR><INPUT TYPE="RESET" VALUE="Clear the form"> </SELECT>
</FORM>
Your options select for a pull down list or a scrolling list can be as long as you want, and is better than separate text input lines when there is many things to choose from as it will save a great deal of space on your web page. Again a little creativity goes a long, long way.
Now, go practice all of these input types and then go build your web forms with confidence!
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
</HTML>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
ENCTYPE="application/x-www-form-urlencoded">
</HTML>
Johnny Lang=yes
B.B. King=yes
The tags are <TEXTAREA> and </TEXTAREA>
<HEAD>
<TITLE>My Form</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
</HTML>