eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
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:

Apples
Oranges
Pears

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