Home arrow Design Usability arrow Page 7 - Using HTML_QuickForm To Manage Web Forms, Part 1

Using HTML_QuickForm To Manage Web Forms, Part 1

Tired of authoring dull and dreary Web forms everyday? Fed up of programming JavaScript validations day-in and day-out? Then, the HTML_QuickForm package is just the solution for which you are looking. In the first part of this two-part tutorial, I'll get you started with the basics of building Web forms using this resourceful PEAR package.

Author Info:
By: Harish Kamath
Rating: 5 stars5 stars5 stars5 stars5 stars / 73
December 22, 2004
  1. · Using HTML_QuickForm To Manage Web Forms, Part 1
  2. · Installing The HTML_QuickForm Package
  3. · My First HTML_QuickForm
  4. · FORM Elements
  5. · Adding Standard HMTL FORM Elements
  6. · Defining FORM Controls, Submitting Data
  7. · Grouping
  8. · "Checkbox" and "Radio" Elements
  9. · Drop Down Control and Hidden Element
  10. · Implementing Form Validations
  11. · Password Field Validation
  12. · Processing Data With HTML_QuickForm
  13. · Conclusion

print this article

Using HTML_QuickForm To Manage Web Forms, Part 1 - Grouping
(Page 7 of 13 )

This next example continues from where the first one left off. It will demonstrate the unique ability of the HTML_QuickForm() to "group" Web form controls together.

Code Listing 2

Load this example in your browser to see the following output:

Using HTML_QuickForm

While the above output does reflect the interface changes, it does not throw any light on the interesting concept of "grouping" Web form elements. To learn more about the latter, you will need to analyze the code behind the scenes. Take a look at the following code snippet:


// snip

// Creates a group of text inputs
$obj_first_name = &HTML_QuickForm::createElement('text', '', '', array('size' => 30, 'maxlength' => 30));
$obj_last_name = &HTML_QuickForm::createElement('text', '', '', array('size' => 30, 'maxlength' => 30));
$obj_registration_form->addGroup(array($obj_first_name, $obj_last_name), 'txtFullName', 'Full Name:', '&nbsp;');

// snip


In the first example, I provided a single textbox for the "Full Name" field whereas most Web forms provide two text boxes, one each for the "First Name" and "Last Name" fields. This anomaly needs to be corrected. This is where the ability of the HTML_QuickForm() object to group <FORM> elements and treat them a single entity is useful.

The "grouping" of the "First Name" and "Last Name" fields is one possible example. Another common example is a Web form field that accepts a credit card number. The user can be requested to enter it in groups of four numbers as embossed on the credit card itself.

Coming back to the script, I have invoked the createElement() static method in order to create an instance of the HTML_QuickForm_element() object. The parameters of this static method mimic those of the addElement() method and the nature of element object created depends on the "keyword" value passed to the method.

Once I have defined all the elements of a particular "group," I invoke the addGroup() method of the core HTML_QuickForm() object and pass an array, containing the element instances, along with a "name" and a "label" for the "grouped" control.

The fourth parameter represents the separator used between the elements to be grouped - I have passed a non-breaking space entity character in order to display the two text fields on the same line.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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