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

introduction to web programming


	The Check Box Widget

Besides allowing the user to enter lines of text, you often want to give them the ability to select from a number of choices. One of the most familiar widgets for selecting choices is the Check Box. A check box 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 check box is shown below:

Try it out...check it and uncheck it.

Behind the scenes, the above check box was created with the following HTML code

    <FORM>
    <INPUT TYPE = "CHECKBOX" NAME = "check">
    </FORM>

Notice that the Check Box widget is specified as an input TYPE of "CHECKBOX".

The Check Box 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 check box widget, you use "CHECKBOX"
NAME	Specifies the variable name associated with this widget
VALUE	Specifies the VALUE that will be sent in the URL encoded string if the check box 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 check box will be checked 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 checkboxes:

Here is the code that we used to make them.

    <FORM>
    <TABLE BORDER = "1">
    <TR>
    <TD>Apples</TD>
    <TD><INPUT TYPE = "CHECKBOX"
                       NAME = "apple_is_checked"
                       VALUE = "yes"></TD>
    </TR>

    <TR>
    <TD>Oranges</TD>
    <TD><INPUT TYPE = "CHECKBOX"
                       NAME = "orange_is_checked"
                       VALUE = "yes"></TD>
    </TR>
    </TABLE>
    </FORM>

Notice that if you checked both check boxes and submitted this data over the web, the URL encoded string would look like the following:

    apple_is_checked=yes&orange_is_checked=yes


	The CHECKED Attribute

The CHECKED attribute allows you to set the state of the check box to "on" by default. Take a look at the following example:

Download JDK 1.1.4 for Java
Download the AFC for Java

And here is the code that we used to make those checkboxes.

    <FORM>
    <TABLE BORDER = "1">
    <TR>
    <TD>Download JDK 1.1.4 for Java</TD>
    <TD><INPUT TYPE = "CHECKBOX"
               NAME = "download_jdk"
               VALUE = "yes"></TD>
    </TR>

    <TR>
    <TD>Download the AFC for Java</TD>
    <TD><INPUT TYPE = "CHECKBOX"
               NAME = "download_afc"
               VALUE = "yes" CHECKED></TD>
    </TR>
    </TABLE>
    </FORM>

Previous | Next | Table of Contents