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.
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.
Next: Dressing Up Your Web Form >>
More Design Usability Articles
More By Harish Kamath
