Form Tutor- Lesson 2
Now, just to keep things a little cleaner I am going to start writing only what is within the <FORM> tags. I will leave out the head, body, title and form tags from now on. Needless to say, leave them in your document.
The most common TYPE of form <INPUT> is TEXT.
<INPUT TYPE=TEXT>
Every input needs a NAME.
<INPUT TYPE=TEXT NAME="ADDRESS">
When the user types in his address (for example 1313 Mockingbird Lane), it will become the input's value and be paired with ADDRESS so the end result after running it through Mailto Formatter will be ADDRESS=1313 Mockingbird Lane.
We can if we want, type in a VALUE.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
This will automatically pair the value 44 Cherry St with the name ADDRESS, unless the user changes it. Note- be sure to use quotes where I've specified.
We can specify the size of the text input box.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>
As you can see, the default value is 20. You probably already
know, by the way, that the default value is the value
that the browser assumes if you have not told it otherwise.
Go ahead and remove VALUE="44 Cherry St".
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30>
If we want, we can specify how many characters a user can
input.
Just go ahead and try to input more than 10 characters!
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
I suppose this feature might come in handy now and again, but unless you think someone's going to send the whole King James Bible down the pike at you, I wouldn't worry about it.
Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it dispays *** instead of the actual input. The browser will send you the input, it just won't display it.
<INPUT TYPE=PASSWORD>
Remember that each <INPUT> must have a NAME.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
SIZE, VALUE, and MAXLENGTH
attributes work here also. By the way, a <TAG>
tells the browser to do something. An ATTRIBUTE goes
inside the <TAG> and tells the browser how
to do it.
Next up are Radio Buttons and Check Boxes.
Radio buttons allow the user to choose one of several options.
Check Boxes allow the user to choose one or more or all
of the options.
First let's build some Radio Buttons.
<INPUT TYPE=RADIO NAME="BEST FRIEND">
Now add 2 more.
<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO
NAME="BEST FRIEND">
<INPUT TYPE=RADIO
NAME="BEST FRIEND">
Hmmm... I suppose we should put a line break after each one.
<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><P>
Note that each input has the same name. The reason will become apparent very shortly.
Each of the Radio Buttons must be assigned a VALUE.
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"><P>
Now label each button.
<INPUT TYPE=RADIO NAME="BEST FRIEND"
VALUE="Ed"> Ed
Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"
VALUE="Rick"> Rick
Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"
VALUE="Tom"> Tom
Studd<P>
You can also modify these labels with other html tags if you
wish.
Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional).
Who is your best friend?<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"
VALUE="Ed" CHECKED>
Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"
VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"
VALUE="Tom"> Tom Studd<P>
The user of course can only choose 1 option. Their choice will
be returned to you as the name/value pair BEST FRIEND=Ed
(or whoever they pick).
Building Check Boxes is pretty much the same thing. Start with this.
<INPUT TYPE=CHECKBOX NAME="Ed">
Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want)
<INPUT TYPE=CHECKBOX NAME="ED"><BR>
<INPUT TYPE=CHECKBOX
NAME="Rick"><BR>
<INPUT TYPE=CHECKBOX
NAME="Tom"><BR>
<INPUT TYPE=CHECKBOX
NAME="BM"><P>
Each Check Box gets the same VALUE.
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"><P>
Note- For Check Boxes the NAME changes and the VALUE stays the same and with Radio Buttons, the VALUE changes but the NAME stays the same. Don't feel bad, my simple mind still gets confused. That's why I lean heavily on html reference documents. (You thought I had all this in my head?? HA!)
OK, let's label each box.
<INPUT TYPE=CHECKBOX NAME="ED"
VALUE="YES"> Ed
Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick"
VALUE="YES"> Rick
Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom"
VALUE="YES"> Tom
Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM"
VALUE="YES">
Burgermeister Meisterburger<P>
And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults. Only if you want to, of course.
Which of these guys are your
friends?<BR>
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed
Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick"
VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom"
VALUE="YES" CHECKED>
Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM"
VALUE="YES"> Burgermeister Meisterburger<P>
The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs...
Ed=YES
Tom=YES
(or what ever they choose... if they choose nothing, nothing will
be returned to you)
Now a question might come to mind... What if I want to ask 3 different questions about the same group of guys?? How, Mr Smartypants am I going to do that!
Well, just settle down and I'll show you.
It's true that in each form there should never be duplicate NAMEs. So, maybe we could use a different name for each question. When I say never, I don't mean that your computer will blow up... at most it might confuse the browser, or the parser (Mailto Formatter is a parser), or the cgi script. At the least it will confuse the poor sap that has to make sense of the form data.
What follows is the html for these 3 questions. The <TABLE> tags are in green. They are for appearance only, they don't affect how the form works. If you need to brush up on your <TABLE> tags, then stumble on over to Table Tutor.
<CENTER>
<TABLE WIDTH=600 BORDER=1
CELLSPACING=1><TR>
<TD WIDTH=199>
Which of these guys are your friends?<BR>
</TD>
<TD WIDTH=200>
Which of these guys would you lend money to?<BR>
</TD>
<TD WIDTH=199>
Which of these guys would you trust with your sister?<BR>
</TD>
</TR></TABLE>
</CENTER>
Let's suppose the user checked the following boxes...
...doing that would send you the following name/value pairs.
Friend?..Ed=YES
Friend?..Rick=YES
Friend?..Tom=YES
Lend money?...Tom=YES
Lend money?...BM=YES
Date sister?...Ed=YES
Date sister?...Tom=YES
Date sister?...BM=YES
Isn't that cool!