Step 1: Include the code of the tableless renderer.

require_once 'HTML/QuickForm/Renderer/Tableless.php';

Step 2: Create a new class that extends from the HTML_QuickForm_Action_Display class, and overload the _renderForm() method. This method basically does the same as the code examples for the single page forms do. The only difference is the usage of $page instead of $form (a page in QFC extends the HTML_QuickForm class).

class Tableless_Display extends HTML_QuickForm_Action_Display
{
    function _renderForm(&$page)
    {
        $renderer =& new HTML_QuickForm_Renderer_Tableless();
        $page->accept($renderer);
        echo $renderer->toHtml();
    }
}

Step 3: Tell QFC to use the new class instead of the default HTML_QuickForm_Action_Display class for displaying the form. ($wizard is a HTML_QuickForm_Controller instance in this example.)

$wizard->addAction('display', new Tableless_Display());

After these three steps, you should have a tableless layout together with DHTML rules.

• tableless layout (no <table> tags, very good accessibility)
• DHTMLRules (form elements errors are shown on top of each element)
• more than one page

To achieve such forms, four PEAR package are needed:

• HTML_QuickForm
• HTML_QuickForm_Controller
• HTML_QuickForm_Renderer_Tableless
• HTML_QuickForm_DHTMLRulesTableless

Information about building forms with HTML_QuickForm, about building multiple page forms with HTML_QuickForm_Controller, about using the tableless renderer, and about using the DHTMLRulesTableless class on forms built with HTML_QuickForms can be found in the PEAR manual. The only thing that I’ll explain here is the usage of DHTMLRulesTableless class with HTML_QuickForm_Controller.

In general, a form page is added like in the following code snippet:

class Page1 extends HTML_QuickForm_Page
{
    // ...
}
$form =& new HTML_QuickForm_Controller();
$page1 =& new Page1('page1');
$form->addPage($page1);

To use now the DHTMLRulesTableless class, you need to add and to change one line:

require_once 'HTML/QuickForm/PageDHTMLRulesTableless.php';
class Page1 extends HTML_QuickForm_PageDHTMLRulesTableless
{
    // ...
}
$form =& new HTML_QuickForm_Controller();
$page1 =& new Page1('page1');
$form->addPage($page1);

That means that you only need to do two things:

• you need to include HTML/QuickForm/PageDHTMLRulesTableless.php
• instead of extending from HTML_QuickForm_Page, your page classes need to extend from HTML_QuickForm_PageDHTMLRulesTableless

The new HTML_QuickForm_PageDHTMLRulesTableless class is mostly a simple copy of the HTML_QuickForm_DHTMLRulesTableless class, but it extends HTML_QuickForm_Page and not HTML_QuickForm. This code duplication couldn’t be avoided because of a bad design of the Page class of HTML_QuickForm_Controller. After HTML_QuickForm2 is ready, a new Controller package is planned, and Alexey Borzov already announced that his new package will have a better design to avoid the need of such code duplications.

To be able to add another text to an element, we will use a rather unknown feature of HTML_QuickForm. QuickForm supports multiple labels for elements. Instead of using a string of the $label parameter, one can specify an array of strings with labels. For example, instead of

$form->addElement('text', 'email', 'Your email:');

we can also write

$form->addElement('text', 'email',
    array('Your email:',
          'Please check your email address twice.'));

The second step is to modify the template for form elements. The default element template is defined as follows:

$elementTemplate =
"\n\t\t\t<li><label class=\"element\"><!-- BEGIN required
--><span class=\"required\">*</span><!-- END required -->
{label}</label><div class=\"element<!-- BEGIN error -->
error<!-- END error -->\"><!-- BEGIN error --><span
class=\"error\">{error}</span><br /><!-- END error -->
{element}</div></li>";

By adding

<!-- BEGIN label_2 --><br /><span style=\"font-size: 80%;\">
{label_2}</span><!-- END label_2 -->

after {element} we will now make the second label visible. Our new element template is now defined as follows:

$elementTemplateTwoLabel =
"\n\t\t\t<li><label class=\"element\"><!-- BEGIN required
--><span class=\"required\">*</span><!-- END required -->
{label}</label><div class=\"element<!-- BEGIN error -->
error<!-- END error -->\"><!-- BEGIN error --><span
class=\"error\">{error}</span><br /><!-- END error -->
{element}<!-- BEGIN label_2 --><br /><span style=
\"font-size: 80%;\">{label_2}</span><!-- END label_2 -->
</div></li>";

The third and last step is to change the element template in the renderer:

$renderer->setElementTemplate($elementTemplateTwoLabel);

If you need the second label only for a single element, you can also specify the element name as the second parameter:

$renderer->setElementTemplate($elementTemplateTwoLabel,
                              'elementName');

After reloading your modified script, you should get a similar output to the screensheet shown above.

Note: All linebreaks in the code snippets shown above are not required (in the templates they are even discouraged), they are just used to make the code readable.

In the tableless renderer I have removed the “height: 1px;” style from the “form fieldset li” block in the stylesheet to achieve layout compatibility with Windows Internet Explorer 7. This breaks layout compatibility with Firefox 1.x browsers, while Firefox 2.0 still works as expected. The FAQ in the PEAR manual contains solutions for getting Firefox 1.x compatibility back.

Besides two small changes, namely the adoption of the stylesheet changes from the renderer and changed escaping of the <script> tag for better compatibility with older browsers, the DHTMLRulesTableless got some bigger changes on the error style assignment and error message displaying.

In some cases the error style (i.e. the red border in the default stylesheet) and the error message were still shown even if the element was made valid; this was due to a bad concept for the lines of code that should decide whether the error style and message can be removed or not.

The last releases showed for every row of the form only the last error message. But, for groups of elements, there can be more than one error message at a time; now, all of these messages will be shown.