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 19 Gandhi Nagar), 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=19 Gandhi Nagar.

We can if we want, type in a VALUE.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Peters Rd">

This will automatically pair the value 44 Peters Rd 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 Peters Rd" SIZE=10>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Peters Rd" SIZE=20>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Peters Rd 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 Peters Rd".

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

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="Sultan"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Naseer"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ibrahim"><P>

Now label each button.

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Sultan"> Sultan Mydeen<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Naseer"> Naseer Ahamed<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ibrahim"> Mohamed Ibrahim<P>

You can also modify these labels with 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="Sultan"> Sultan Mydeen<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Naseer"> Naseer Ahamed<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ibrahim"> Mohamed Ibrahim<P>

The user of course can only choose 1 option. Their choice will be returned to you as the 
name/value pair BEST FRIEND=Sultan (or whoever they pick).

Building Check Boxes is pretty much the same thing. Start with this.

<INPUT TYPE=CHECKBOX NAME="Sultan">

Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want)

<INPUT TYPE=CHECKBOX NAME="Sultan"><BR>
<INPUT TYPE=CHECKBOX NAME="Naseer"><BR>
<INPUT TYPE=CHECKBOX NAME="Ibrahim"><BR>
<INPUT TYPE=CHECKBOX NAME="Ismath"><P>

Each Check Box gets the same VALUE.

<INPUT TYPE=CHECKBOX NAME="Sultan" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Naseer" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Ibrahim" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Ismath" VALUE="YES"><P>

OK, let's label each box.

<INPUT TYPE=CHECKBOX NAME="Sultan" VALUE="YES"> Sultan Mydeen<BR>
<INPUT TYPE=CHECKBOX NAME="Naseer" VALUE="YES"> Naseer Ahamed<BR>
<INPUT TYPE=CHECKBOX NAME="Ibrahim" VALUE="YES"> Mohamed Ibrahim<BR>
<INPUT TYPE=CHECKBOX NAME="Ismath" VALUE="YES"> Ismath Batcha<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="Sultan" VALUE="YES" CHECKED> Sultan Mydeen<BR>
<INPUT TYPE=CHECKBOX NAME="Naseer" VALUE="YES"> Naseer Ahamed<BR>
<INPUT TYPE=CHECKBOX NAME="Ibrahim" VALUE="YES" CHECKED> Mohamed Ibrahim<BR>
<INPUT TYPE=CHECKBOX NAME="Ismath" VALUE="YES"> Ismath Batcha<P>

Sultan=YES
Ibrahim=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, am I going to do that!

Well, just settle down and I'll show you.

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>
<INPUT TYPE=CHECKBOX NAME="Friend?...Sultan" VALUE="YES"> Sultan Mydeen<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?...Naseer" VALUE="YES"> Naseer Ahamed<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?...Ibrahim" VALUE="YES"> Mohamed Ibrahim<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?...Ismath" VALUE="YES"> Ismath Batcha<P>
</TD>

<TD WIDTH=200>
Which of these guys would you lend money to?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Sultan" VALUE="YES"> Sultan Mydeen<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Naseer" VALUE="YES"> Naseer Ahamed<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ibrahim" VALUE="YES"> Mohamed Ibrahim<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ismath" VALUE="YES"> Ismath Batcha<P>
</TD>

<TD WIDTH=199>
Which of these guys would you trust?<BR>
<INPUT TYPE=CHECKBOX NAME="Trust?...Sultan" VALUE="YES"> Sultan Mydeen<BR>
<INPUT TYPE=CHECKBOX NAME="Trust?...Naseer" VALUE="YES"> Naseer Ahamed<BR>
<INPUT TYPE=CHECKBOX NAME="Trust?...Ibrahim" VALUE="YES"> Mohamed Ibrahim<BR>
<INPUT TYPE=CHECKBOX NAME="Trust?...Ismath" VALUE="YES"> Ismath Batcha<P>
</TD>

</TR></TABLE>
</CENTER>

Let's suppose the user checked the following boxes...

Friend?..Sultan=YES
Friend?..Naseer=YES
Friend?..Ibrahim=YES
Lend money?...Ibrahim=YES
Lend money?...Ismath=YES
Trust?...Sultan=YES
Trust?...Naseer=YES
Trust?...Ismath=YES

Isn't that cool!