Home arrow Design Usability arrow Page 3 - 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 - Auto-complete Text Boxes
(Page 3 of 7 )

If users have to repeatedly fill up long and winding forms, the "auto-complete" text box is a great tool to make life easy for them. Fortunately, the developers behind the HTML_QuickForm package thought likewise and implemented an "autocomplete" control.

Here is the updated version of the "Registration" form that implements this control:

Code Listing 2

Load this example and start typing a few characters in the "Country" field - the browser will attempt to fill up the rest on its own.

Using HTML_QuickForm

Of course, if you are a resident of a far-flung, remote island, you may have to type the entire text. The next code fragment tells you why:

<?php

// snip

$obj_registration_form->addElement('autocomplete', 'txtCountry', 'Country (auto-complete field):', array ('United States', 'United Kingdom','India', 'Other'));

// snip

?>

The reason’s pretty simple: the browser can only suggest options based on the values provided in an input array, as seen above. For the record, the keyword for this custom control is "autocomplete" - not very imaginative but it does the job!

To wrap things up, I have introduced two more controls in this example:

<?php

// snip

$obj_registration_form->addElement('link', 'lnkPrivacyPolicy', 'Our Privacy Policy', 'privacy.html', 'Click here to read it', array('target' => '_blank'));

// snip

$obj_registration_form->addElement('image', 'btnSubmit', 'btn_register.jpg');

// snip

?>

The first custom control - identified by the keyword "link" - is used to insert a hyperlink in a Web form. The parameters required are: text for the label, the hyperlink URL and the text for the hyperlink.

Next, I have the "image" control. This allows me to display an image instead of the dull "Submit" button. And no prizes for guessing the input parameter for this one: the name of image file.

So far, all examples assume that the user is visiting the Web form for the first time. However, the same Web form can be used to update information submitted previously. In this case, I’ll have to populate the various fields of the Web form with corresponding values from the database. This is where the setDefaults() method of the HTML_QuickForm() object comes in handy.

Review the next code listing:

<?php


// snip

// spaced out for sake of clarity
$obj_registration_form->setDefaults(
array(
'txtFullName'    => 'Please Enter Full Name here',
'txtCountry'     => 'United States',
'txtDateOfBirth' => array('d'=> date('d'), 'F' => date('m') , 'Y'=> date('Y'))
)
);

// snip

?>

This setDefaults() method takes a single input - an array consisting of name-value pairs. The "name" specifies the name of the control for which I want to set the "default" value and the "value" stores the value itself.

Take a look at the output again. Notice that I have initialized the "txtFullName" control with a string message. Furthermore, this feature is not restricted to text box controls; I can also specify an initial value for a custom control (like the "date" control), as demonstrated above.


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