These are fully functional cross-browser control samples to showcase a few of the ways you can use standard form controls and JavaScript to make your site easier to use and more efficient. These controls have been tested and work properly in Microsoft Internet Explorer 6.0, Netscape Navigator (4.5 and 6.2), and Opera 6.01. Try them out.

Jump to:

Top of Page | Quick Change Control | Custom List Control | Sort Order Control

Quick change control Purpose: Condense many text input controls into one text input area and one selection area. Use: Click on the radio buttons to input text for that question. Options: Instead of radio buttons, use drop-down list selection for many more fields. Validation: Keywords and / or length by characters or words (such as validating a 300 word essay)	Tell me more about: Your browser The page you just came from The IP that requested this page
	CCBot/1.0 (+http://www.commoncrawl.org/bot.html)

Jump to:

Top of Page | Quick Change Control | Custom List Control | Sort Order Control

Custom List control Purpose: Select pre-defined items to create a customizable list. The most basic use would be a type of shopping cart Use: Select one or more items from the list on the left and press the Add button to move it to the custom list. Options: Use as a shopping cart or to add or remove options from a service contract, add sorting and filtering options to break things into smaller lists. Validation: Check for required combinations of options.

Available Fruit Filter by: All Fruit Red Fruit Other Fruit   Fruit for my Fruit basket Apple Banana Blueberry Kiwi Lime Mango Pear Pineapple Raspberry Strawberry Watermelon                                 Add >> << Rem

Jump to:

Top of Page | Quick Change Control | Custom List Control | Sort Order Control

Sort Order control Purpose: Determine the sort order for a list, or just use it to allow ordering of lists such as weighted preferences. Use: To add items to the sort order, click on the Add to Sort link following the table headers. To remove items from the sort order list, select the items you wish to remove and press the 'Remove' button. To move items within the list, select the items you wish to move and press the up or down button to move those items within the list. When you are ready to have the list sorted press the 'Sort' button. Options: Add ability to sort ascending or descending by any list heading. Validation: Check for required combinations of headers. Ensure that something is selected if sorting is necessary.

Animal Name # of Legs # of Eyes Hair Ape 2 2 Yes Bird 2 2 No Squid 0 2 No Amoeba 0 0 No Fish 0 2 No Dog 4 2 Yes Spider 8 8 Yes (Add to Sort) (Add to Sort) (Add to Sort) (Add to Sort) Sort Order # of Legs Animal Name   Up    Down  Remove Sort