realm3: How To Format Forms With PEAR Html Quickform Renderer

<List Articles>How To Format Forms With PEAR Html Quickform Renderer

Originally posted June 5, 2006

What We're Doing

PEAR's HTML_QuickForm is a nice OO way to create HTML forms on the fly. If you're not using a templating engine, but you still want an easy way to create and validate forms, HTML_QuickForm is a great way to start. The only problem is that HTML_QuickForm formats all of the elements using table cells. Instead of reformatting every single form we display, we can create a wrapper called DefaultFormRenderer that allows us to create forms using a more CSS-friendly template.

Preqrequisites

This article assumes you know PHP and have some experience with PEAR. If you aren't already using PEAR, I suggest starting with the manual.

If you haven't already, you'll need to install HTML_QuickForm (pear install HTML_QuickForm). A tutorial on creating a basic form is available here: Getting Started with PHP's HTML_QuickForm.

The Class Wrapper

Instead of calling HTML_QuickForm_Renderer_Default every time, we create a class to do that for us. There are many ways to do this, but we're going to define the HTML the simple way: inside the class file itself.

/*
        DefaultFormRenderer
        Author: B. Dailey
        Website: www.dailytechnology.net
        Free to be used, modified, & distributed so long as this text remains.
*/
require_once "HTML/QuickForm/Renderer/Default.php";

class DefaultFormRenderer {
    // HTML Quick Form
    var $Form;
    var $FormRenderer;
    var $FormTemplate;
    var $ElementTemplate;
    var $HeaderTemplate;
    var $RequiredNoteTemplate;

    /**
    * Form constructor.
    */
    function __construct(& $Form) {
            $this->Form = & $Form;

            $this->setDefaultFormTemplate();
            $this->setDefaultElementTemplate();
            $this->setDefaultHeaderTemplate();
            $this->setDefaultRequiredNoteTemplate();

            $this->FormRenderer = & new HTML_QuickForm_Renderer_Default;
            $this->FormRenderer->setFormTemplate($this->FormTemplate);
            $this->FormRenderer->setElementTemplate($this->ElementTemplate);
            $this->FormRenderer->setHeaderTemplate($this->HeaderTemplate);
            $this->FormRenderer->setRequiredNoteTemplate($this->RequiredNoteTemplate);
    }

    function setDefaultFormTemplate() {
            $this->FormTemplate= <<<HTML
            <div class="long_form">
                    <ul>
                            <form{attributes}>
                                    {content}
                            </form>
                    </ul>
            </div>
HTML;
    }

    function setDefaultElementTemplate() {
            $this->ElementTemplate = <<<HTML

                    <li>
                            <label>
                                    {label}
                                    <!-- BEGIN required --><span class="required">*</span><!-- END required -->
                            </label>
                            <div>
                                    {element}
                                    <!-- BEGIN error -->
                                    <span class="error">{error}</span>
                                    <!-- END error -->
                            </div>
                    </li>
HTML;
    }

    function setDefaultHeaderTemplate() {
            $this->HeaderTemplate = <<<HTML
                    <h2>{header}</h2>
HTML;
    }

    function setDefaultRequiredNoteTemplate() {
            $this->RequiredNoteTemplate = <<<HTML
                    <li><div id="requirednote clear"><span class="required">*</span> Denotes required field.</div></li>
HTML;
    }

    function display() {
            $this->Form->accept($this->FormRenderer);
            echo $this->FormRenderer->toHTML();
    }

}

Displaying The New Template

Displaying the new form with the template is easy as cake.

require_once "HTML/QuickForm.php";

$form = new HTML_QuickForm('frmTest', 'post');

$form->addElement('header', 'hdrQuickformtest', 'QuickForm Example 2');
$form->addElement('text',   'txtName', 'What is your name?');
$form->addElement('reset',  'btnClear', 'Clear');
$form->addElement('submit', 'btnSubmit', 'Submit');
$renderer = new DefaultFormRenderer($form);

$renderer->display();

That's it! You may want to modify this class to create different templates, add the ability to create new templates, etc. This should at least get you on the right track.

Other Resources

Did you find this helpful? I hope so. Feel free to leave comments.