Lesson 2

Radio Buttons

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.

Radio Button Syntax : <INPUT TYPE=RADIO NAME="BEST FRIEND">

Who is your best friend?

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="ED" CHECKED> Edward

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Ponting

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Bastin

Will show a list of Names with radio button after the question Who is your best friend?. The default valus is set as Edward (using CHECKED), user can change it by clicking other radio button if desired.

Who is your best friend?
Edward
Rick Ponting
Tom Bastin

BEST FRIEND=Edward (or whoever user picks).

Check Box

Check Box Syntax : <INPUT TYPE=CHECKBOX NAME="ED">

Which of these guys are your friends?

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Edward

<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Ponting

<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES" CHECKED> Tom Bastin

<INPUT TYPE=CHECKBOX NAME="SMITH" VALUE="YES"> Adam Smith

Which of these guys are your friends?
Edward
Rick Ponting
Tom Bastin
Adam Smith

Edward and Tom Bastin are checked. User can uncheck the check box by clicking on it if desired. They can click other boxes to add more friends to the list.

Pull Down List

With this type you use <SELECT> instead of <INPUT> and it has a closing tag. Let's make one.

<SELECT NAME="BEST FRIEND">

<OPTION VALUE="ED"> Edward

<OPTION VALUE="RICK"> Rick Ponting

<OPTION VALUE="TOM" SELECTED> Tom Bastin

</SELECT>

The default option is the one that is listed first. Here due to SELECTED, Tom Bastin will be displayed in the Pull Down List as default option.

To turn a Pull Down List into a Scrolling List is add a SIZE attribute to the <SELECT> tag. The SIZE is simply how many options show in the window.

<SELECT NAME="BEST FRIEND" SIZE=10>

<OPTION VALUE="ED">Edward

<OPTION VALUE="RICK">Rick Ponting

<OPTION VALUE="TOM" SELECTED>Tom Bastin

<OPTION VALUE="SMITH">Adam Smith

</SELECT>

Here the name Tom Bastin will be highlighted due to the SELECTED in Option. Otherwise the first option value will be taken as defalut value.

TEXTAREA

A very useful type of input is <TEXTAREA>. ROWS is the height and COLS is the width.

<TEXTAREA NAME="COMMENTS" ROWS=5 COLS=50 WRAP=VIRTUAL>

</TEXTAREA>

WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one long continuous string. WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too. WRAP=OFF (default value).

You can initialise a textarea with some text as

<textarea NAME="COMMENTS" ROWS=3 COLS=70>
Number of posts in the forum
10  posts  = 50 MB Web Space/1000 MB Monthly data transfer
50  posts  = 50 MB Web Space/5000 MB Monthly data transfer
100 posts  = 60 MB Web Space/5500 MB Monthly data transfer

400 posts  = 80 MB Web Space/6500 MB Monthly data transfer

800 posts  = 100 MB Web Space/8000 MB Monthly data transfer


For forum rules please visit : http://forums.bizhat.com/viewtopic.php?t=23044

</textarea>

The output of the above code will be :