Home arrow Design Usability arrow Page 2 - Using HTML_QuickForm To Manage Web Forms, Part 2
DESIGN USABILITY

Using HTML_QuickForm To Manage Web Forms, Part 2


In this second part of the HTML_QuickForm primer, I will demonstrate the advanced features of the package - these include "hierarchical" drop downs, "auto-complete" text boxes, integration with the "Smarty" template engine, and much, much more.

Author Info:
By: Harish Kamath
Rating: 5 stars5 stars5 stars5 stars5 stars / 48
December 29, 2004
TABLE OF CONTENTS:
  1. · Using HTML_QuickForm To Manage Web Forms, Part 2
  2. · Hierarchical Drop Downs in Web Forms
  3. · Auto-complete Text Boxes
  4. · Dressing Up Your Web Form
  5. · Getting Smart with HTML_QuickForm
  6. · End Game
  7. · Conclusion

print this article
SEARCH DEVARTICLES

Using HTML_QuickForm To Manage Web Forms, Part 2 - Hierarchical Drop Downs in Web Forms
(Page 2 of 7 )

Consider this: I need my Web form (from the first article) to display two drop downs - one containing "Artist Type" and the second, the "Artist Sub-type". However, the options displayed in the second drop down have to be dynamically updated depending on the value selected in the first.

Normally, I resort to complex client-side scripting to implement such requirements. Not any more because the HTML_QuickForm comes with a custom "hierselect" control that does all this behind-the-scene jugglery for me.

Not convinced? Take a look at the following code listing:

Code Listing 1

Save this script and load it in the browser:

Using HTML_QuickForm

Now, select a different option from the first "Artist Type" drop down to see the options of the second drop down update automatically:

Using HTML_QuickForm

Now, review the following code segment:

<?php

require_once 'HTML/QuickForm.php';

// snip

// snip - some fields have been removed in order to avoid repetition

// define artist types
$ary_artist_type[0] = 'Solo';
$ary_artist_type[1] = 'Group';

// define artist sub-types
$ary_artist_sub_type[0][1] = 'Male';
$ary_artist_sub_type[0][2] = 'Female';
$ary_artist_sub_type[1][3] = 'Males Only';
$ary_artist_sub_type[1][4] = 'Females Only';
$ary_artist_sub_type[1][5] = 'Male and Female';

$obj_hdd_artist_type = &$obj_registration_form->addElement('hierselect', 'ddlArtistType', 'Select Artist Type:', '', '<br />');

// set option arrays for "Artist Type" hierarchical <SELECT> drop down
$obj_hdd_artist_type->setOptions(array($ary_artist_type,  $ary_artist_sub_type));

// snip

?>

After importing the required PEAR class files, I have created a local instance of the HTML_QuickForm() object. Then, I fall back on the resourceful addElement() method to insert the different <FORM> elements.

However, before I can add my new "hierarchical" drop down control, some groundwork has to be done: the definition of two arrays - "$ary_artist_type" containing the options for the "Artist Type" drop down and "$ary_artist_sub_type" for the "Artist Sub-type" drop down.

Next, I invoke the addElement() method, passing the "hierselect" keyword as an input parameter. This instructs the HTML_QuickForm() object to create an instance of the HTML_QuickForm_hierselect() object - responsible for the rendering of hierarchical drop downs in the output. Lastly, I have used the setOptions() method to populate the options of the two drop downs.

Note that if I wish to render a three level hierarchy, Iíll have to define three arrays and so on.

Next, I have added an "advanced checkbox" control. By default, a Web form does not post any value if a checkbox element is not "checked." The onus of taking a decision, of whether checkbox is "checked" or not, lies with the programmer. Not so, if I use the "advanced checkbox" control - this custom control will always post a value. Take a look at the next code fragment:

<?php

// snip

$obj_registration_form->addElement('advcheckbox', 'chkNewsletter', 'Subscribe to Newsletter:', 'Yes', null, array('No', 'Yes'));

// snip

?>

The "advcheckbox" keyword instructs the HTML_QuickForm() object to render an "advanced checkbox" control. The values to be POSTed are passed in the form of an array - the first is passed when the box is not "checked" and the second, when the box is "checked."

Finally, Iíd like you to take another look at an upated version of the "date" control:

<?php

// snip

$obj_registration_form->addElement('date', 'txtDateOfBirth', 'Date of Birth:', array('format' => 'dFY', 'addEmptyOption' => 'true', 'emptyOptionValue' => '', 'emptyOptionText' => 'Select'));

// snip

?>

Here, I would like to highlight the use of the "format" attribute - as the name suggests, this allows me to specify the format for the "date" control. The string "dFY" is consistent with the format string used with the date() PHP function. For more "format specifiers," please review the HTML_QuickForm documentation.

For the same control, I have listed three additional attributes: "addEmptyOption" informs the renderer to add an empty <OPTION> at the beginning of the drop down, "emptyOptionValue" allows me to specify the value for this <OPTION> (Iíve set this to a blank string) and the "emptyOption" attribute contains the text that is displayed (Iíve set this to "Select").

In the next section, Iíll show you how to render "auto-complete" text boxes - a common feature in most PC-based applications, but a challenge to implement for browser-based ones.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C Ė dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials