eXtropia | Tutorials | Introduction to Web Programming

Resources
		Tutorials
		Presentations

Perl & CGI tutorials
		Intro to Perl/CGI and HTML Forms
		Intro to Windows Perl
		Intro to Perl 5
		Intro to Perl
		Intro to Perl Taint mode
		Sherlock Holmes and the Case of the Broken CGI Script
		Writing COM Components in Perl

Java tutorials
		Intro to Java
		Cross Browser Java

Misc technical tutorials
		Intro to The Web Application Development Environment
		Introduction to XML
		Intro to Web Design
		Intro to Web Security
		Databases for Web Developers
		UNIX for Web Developers
		Intro to Adobe Photoshop
		Web Programming 101
		Introduction to Microsoft DNA

Misc non-technical tutorials
		Misc Technopreneurship Docs
		What is a Webmaster?
		What is the open source business model?
		Technical writing
		Small and mid-sized businesses on the Web

Offsite tutorials
		ISAPI Perl Primer
		Serving up web server basics
		Introduction to Java (Parts 1 and 2) in Slovak

The CHECKED attribute allows you to set the state of the radio button to "on" by default. You will want to set one radio button in a radio button group to CHECKED, but make sure that only one is checked. Take a look at the following example:

introduction to web programming


	The Radio Widget

The Radio Button Widget is a lot like the Check Box widget in that it gives the user a way to select an item from a group. The main difference though is that radio buttons are used in radio groups that force the user to select one and only one item from a group.

Like check boxes the radio button can be set to either an "on" state or an "off" state by the user. Typically, the "on" state will look like a checked box or a filled in circle. A standard radio button group is shown below:

Try it out...check one then check another.

Behind the scenes, the above radio buttons were created with the following HTML code

    <FORM>
    <INPUT TYPE = "RADIO" NAME = "radio">
    <INPUT TYPE = "RADIO" NAME = "radio">
    <INPUT TYPE = "RADIO" NAME = "radio">
    </FORM>

Notice that the Radio Button widget is specified as an input TYPE of "RADIO" and that every radio button in a radio group shares the same NAME.

The Radio Button widget also has several other attributes that affect how it works. The following table outlines them:

Attribute	Description
TYPE	Specifies the type of interface widget. For a radio button widget, you use "RADIO"
NAME	Specifies the variable name associated with this widget
VALUE	Specifies the VALUE that will be sent in the URL-encoded string if the radio button is checked. If it is not checked, neither the name nor the value will be part of the URL-encoded string.
CHECKED	Specifies that the radio button will be checked by default. It is recommended that you check one (but never more than one) option by default.

Let's take a closer look at each of these attributes.


	The NAME and VALUE attributes

The NAME and VALUE attributes are essential and allow you to specify the name and value portion of the name/value pair that is sent as part of the URL-encoded string. For example, consider the following radio buttons:

Here is the code that we used to make them.

    <FORM>
    <TABLE BORDER = "1">
    <TR>
    <TD>Apples</TD>
    <TD><INPUT TYPE = "RADIO" NAME = "fruit"
               VALUE = "apples"></TD>
    </TR>

    <TR>
    <TD>Oranges</TD>
    <TD><INPUT TYPE = "RADIO" NAME = "fruit"
               VALUE = "oranges"></TD>
    </TR>

    <TR>
    <TD>Pears</TD>
    <TD><INPUT TYPE = "RADIO" NAME = "fruit"
               VALUE = "pears"></TD>
    </TR>
    </TABLE>
    </FORM>

Notice that you can only check one radio button at one time.

Notice also that with radio buttons (unlike check boxes), the NAME value will be the same for all choices within a radio group. If you use a different name, you will be able to select more than one choice at a time and then the radio button is essentially a check box that you do not want.

Finally notice that the VALUE is used to specify which choice was selected. Thus, if the user selected Apples, the URL-encoded string would look like the following:

    fruit=apples


	The CHECKED Attribute

Download JDK 1.1.4 for Java
Download JDK 1.0.2 for Java
Download the AFC for Java

And here is the code that we used to make that radio group.

    <FORM>
    <TABLE BORDER = "1">
    <TR>
    <TD>Download JDK 1.1.4 for Java</TD>
    <TD><INPUT TYPE = "RADIO" NAME = "java_kit"
               VALUE = "jdk_114"></TD>
    </TR>

    <TR>
    <TD>Download JDK 1.0.2 for Java</TD>
    <TD><INPUT TYPE = "RADIO" NAME = "java_kit"
               VALUE = "jdk_102"></TD>
    </TR>

    <TR>
    <TD>Download the AFC for Java</TD>
    <TD><INPUT TYPE = "RADIO" NAME = "java_kit"
               VALUE = "afc" CHECKED></TD>
    </TR>
    </TABLE>
    </FORM>

Previous | Next | Table of Contents