Home arrow Design Usability arrow Page 5 - 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 - Adding Standard HMTL FORM Elements
(Page 5 of 13 )

Note that the number of input parameters passed to the addElement() method varies with the nature of the element added to the Web form. While it is sufficient to pass only two values for the "html" and "header" elements, it is a different ball game when it comes to adding standard HTML <FORM> elements. Take a look at the following code snippet:


// snip

$obj_registration_form->addElement('text', 'txtFullName', 'Full Name:', array('size' => 40, 'maxlength' => 50));
$obj_registration_form->addElement('textarea', 'txtAddress', 'Address:', array('rows' => 3, 'cols' => 30));
$obj_registration_form->addElement('select', 'txtCountry', 'Country:', array ("" => "Select Country", "USA" => "United States","UK" => "United Kingdom","IND" => "India", "Other" => "Other"));
$obj_registration_form->addElement('text', 'txtEmailAddress', 'e-mail Address:', array( 'size' => 40, 'maxlength' => 255));
$obj_registration_form->addElement('radio', 'txtGender', 'Select Gender:', 'Male', 'M');
$obj_registration_form->addElement('radio', 'txtGender', '', 'Female', 'F');

// snip


First, I have added a "text" input control. This time, you'll notice that I have passed four parameters - first, the keyword "text" indicates that I want to render a "text" <INPUT> element, the second parameter represents the "name" of the text field, the third is the the "label" to displayed along side the control and finally, an array consisting of key-value pairs. Take a close look at this array and you will notice I have assigned values for some commonly used attributes of the <INPUT> HTML element.

Things are similar for a <TEXTAREA> control. The only major change is the use of the keyword "textarea" for obvious reasons. You will also note that the array, i.e. the fourth optional parameter of the addElement() method, has been updated to define the size of the text area.

Next, I want to add a <SELECT> control. As you might have guessed, I pass the "select" keyword along with the control name and text for display label. But what about the options to be displayed in the drop down?  No sweat - all I need to do is define an array with set of key-value pairs, where the value is the text displayed in the browser and the key represents the value submitted to the server for the selected <OPTION>.

This is followed by the "radio" <INPUT> control. Once again, it's the "radio" keyword that does the trick. Of course, I've added another "radio" button with the same "name" because I want the user to select only one value - this is akin to the definition of two <INPUT> radio buttons with the same "name" in good ol’ HTML.

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