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 MULTIPLE attribute specifies that the user should be able to select multiple choices at one time. Typically, they will use the CONTROL key and a mouse click to select or deselect choices individually or the SHIFT key plus a mouse click to select groups of choices at once. This is best seen by example, so try out the following select widget:

That select widget was created using the following code:

    <FORM>
    <SELECT NAME = "fruit" SIZE = "4" MULTIPLE>
    <OPTION VALUE = "Apples">Apples
    <OPTION VALUE = "Oranges">Oranges
    <OPTION VALUE = "Pears">Pears
    <OPTION VALUE = "Banana">Banana
    </SELECT>
    </FORM>

introduction to web programming
The Select Widget  
The Select Widget works a lot like the radio button and check box widgets in that it allows a user to choose one item from a group. However, the look and feel of a SELECT widget is quite a bit different, as is the code that manages it.

The Select Widget creates a pop-up list as shown below:

The previous select widget was created using the code shown below:

    <FORM>
    <SELECT NAME = "fruit">
    <OPTION VALUE = "Apples">Apples
    <OPTION VALUE = "Oranges">Oranges
    <OPTION VALUE = "Pears">Pears
    </SELECT>
    </FORM>

Notice that the <SELECT> tag takes a NAME attribute and includes several OPTIONS that define the VALUES to be applied to that NAME.

Note that the VALUE attribute of the <OPTION> tag is optional. If you do not include it, the value will be taken from the text that follows the tag.

Thus, if you selected "Oranges" from the select box shown above, the web browser would add the following to the url encoded string it prepares for the server

    fruit=Oranges

The <SELECT> tag also has several attributes that affect how it works. The table below outlines those attributes.

Attribute Description
NAME Specifies what name the browser should use for the name/value pair sent in the HTTP body
SIZE Specifies the number of choices that should be visible to the user
SELECTED Specifies the choice that is selected by default
MULTIPLE Specifies that the user should be able to select multiple items in the list
VALUE Specifies the valueof a choice

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

The SIZE Attribute  
The SIZE attribute specifies how many choices in a select box should be made visible to the user at one time. This is best seen by example, so let's look at one in which SIZE is set to three (notice that there are four items so the select widget will dynamically create a scroll bar).

That select widget was created using the following code:

    <FORM>
    <SELECT NAME = "fruit" SIZE = "3">
    <OPTION VALUE = "Apples">Apples
    <OPTION VALUE = "Oranges">Oranges
    <OPTION VALUE = "Pears">Pears
    <OPTION VALUE = "Banana">Banana
    </SELECT>
    </FORM>
The SELECTED Attribute  
The SELECTED attribute specifies which choice will be selected by default. This is best shown by example, so consider the following example in which we select "Pears" by default.

That select widget was created using the following code:

    <FORM>
    <SELECT NAME = "fruit" SIZE = "3">
    <OPTION VALUE = "Apples">Apples
    <OPTION VALUE = "Oranges">Oranges
    <OPTION VALUE = "Pears" SELECTED>Pears
    <OPTION VALUE = "Banana">Banana
    </SELECT>
    </FORM>
The MULTIPLE Attribute  
Previous | Next | Table of Contents