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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Using HTML_QuickForm To Manage Web Forms, Part 1 - Defining FORM Controls, Submitting Data
(Page 6 of 13 )

Next, we have the definition of the "checkbox", "submit" and "reset" <FORM> controls.

<?php

// snip

$obj_registration_form->addElement('checkbox', 'txtNewsletter', 'Subscribe to Newsletter:', 'Yes');

$obj_registration_form->addElement('html', '<tr><td colspan="2">&nbsp;</td></tr>');

$obj_registration_form->addElement('submit', 'btnSubmit', 'Register');
$obj_registration_form->addElement('reset', 'btnReset', 'Start Again');

// snip

?>

Once again, I have invoked the resourceful addElement() method with the appropriate keywords - "checkbox", "submit" and "reset" - to add the required elements.

Next, I have to handle the submission of the Web form data itself. Since I have not specified any value for the "action" attribute of the <FORM> element, the page will post the data to itself when I click the "Register" submit button. Take a look at the next code snippet.

<?php

// snip

// filters before validation comes here

// validation rules come here

// validate form
if($obj_registration_form->validate()) {

  // filters after validation comes here

  // if data is valid, process form details
  echo '<pre>';
  var_dump($obj_registration_form->exportValues());
  echo '</pre>';

  // free the form values
  $obj_registration_form->freeze(); 
}

// snip

?>

I have invoked the validate() method to verify the data entered by the user. Since I have not implemented any validation (more on this later), the form submission goes through without any hitch. Take a look at the output that you should see in your browser:

Using HTML_QuickForm

The above output display the values stored in the array returned by the exportValues() method. Next, I have called the freeze() method - this is used to "freeze" the Web form data, i.e. a user cannot modify the data once it has been frozen, as is evident from the output listed above.

<?php
     
  // snip

  // display the form
  $obj_registration_form->display();

  // snip

?>

The final act - I have called the display() method in order to render the Web form in the browser. If the Web form has been "frozen," this method will render the values submitted by the user, without the actual HTML <FORM> elements.

What I finally have is a fully functional Web form without typing a single line of HTML code in my PHP script!


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