Manual

Replacement for the default renderer of HTML_QuickForm that uses only XHTML and CSS but no table tags, and generates fully valid XHTML output.

Introduction

Introduction – Introduction to HTML_QuickForm_Renderer_Tableless

Overview

HTML_QuickForm_Renderer_Tableless is a replacement of the default renderer of HTML_QuickForm. It has two main goals:

Accessibility: Because of the abandonment of table tags and the addition of for attributes to the label tags and id attributes to the form elements, the generated output provides good accessibility. Challenged person might use screen readers, and unhindered persons benefit from the possibility to click on the labels to set the focus to the belonging form element.

Validity: The generated output of the renderer is fully XHTML 1.1 valid.

Usage

To use this renderer, you just need to copy (and modify if you want) the stylesheet and do something like this:

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

$form =& new HTML_QuickForm();
$renderer =& new HTML_QuickForm_Renderer_Tableless();

// usual code, e.g. new form fields, rules, ...

$form->accept($renderer);
echo $renderer->toHtml();
?>

For full XHTML validity, you need to add the following line to your code:

<?php
$form->removeAttribute('name');
?>

FAQ

FAQ – Answers to most Frequently Asked Questions

Description

This document is based on questions asked on PEAR general mailing list and other mailing lists and forums.

HTML_QuickForm_Renderer_Tableless FAQ

The div tag in the element template is broken, a closing quote mark is missing! Can you please fix this?
Why are the hidden form elements put into a div with style display: none?
The layout of the forms is broken in Windows Internet Explorer 7. Is there a solution for this problem?
The layout of the forms is broken in Firefox 1.x. Is there a solution for this problem?
How can I add explainations next to or after form fields with the renderer?
I'm having problems with the layout, the form and/or the other contents of my page are misplaced. How can I fix these problems?
When I use the tableless renderer together with HTML_QuickForm_Controller, I still see tables. What am I doing wrong?

The div tag in the element template is broken, a closing quote mark is missing! Can you please fix this?

No, it is not missing and there is no need to fix the element template.

HTML_QuickForm_Renderer_Tableless requires that HTML_QuickForm >= 3.2.6 is installed. Previous versions don't work correctly for element templates that have two error blocks.

Please use the PEAR installer to avoid such problems in the future. The installer takes care of the dependencies between packages.

Why are the hidden form elements put into a div with style display: none?

This might sound funny because a hidden element is obviously already hidden, but the simple reason for this is the XHTML validity.

XHTML allows input elements only within block elements. And as form is not a block element, but div is a block element, this trick is used to make the output XHTML valid.

The layout of the forms is broken in Windows Internet Explorer 7. Is there a solution for this problem?

Release 0.4.3 contains a fix for this problem. The solution is to remove the "height: 1px;" style from "form fieldset li" block in the stylesheet.

Warning: This breaks layout compatibility with Firefox 1.x browsers (Firefox 2.0 still works as expected). The next question contains a solution for Firefox 1.x compatibility.

The layout of the forms is broken in Firefox 1.x. Is there a solution for this problem?

You need to add a "float: left;" style to the "form fieldset li" block in the stylesheet. In addition, you need to add the following two blocks to your stylesheet:

* html form fieldset li {
    float: none;
}
*+html form fieldset li {
    float: none;
}

If you don't need compatibility with Windows Internet Explorer 7, you don't need the mentioned CSS hacks, but can just (re-)add the "height: 1px;" style to the "form fieldset li" block in the stylesheet.

How can I add explainations next to or after form fields with the renderer?: This is explained here: Howto: Adding explainations next to form fields with Tableless QuickForm renderer.

I'm having problems with the layout, the form and/or the other contents of my page are misplaced. How can I fix these problems?

Such problems are most likely caused by the style of the fieldsets. You can try two possible solutions.

At first, you can try to add

overflow: hidden;

to the "form fieldset" block.

If this does not solve the problems, then try to remove the following two styles from the "form fieldset" block.

clear: both;
float: left;

When I use the tableless renderer together with HTML_QuickForm_Controller, I still see tables. What am I doing wrong?: You have to tell HTML_QuickForm_Controller about the usage of another renderer. A short tutorial is available: Using the tableless renderer together with HTML_QuickForm_Controller

Important methods

HTML_QuickForm_Renderer_Tableless::addStopFieldsetElements

HTML_QuickForm_Renderer_Tableless::addStopFieldsetElements() – Adds one or more element names that indicate the end of a fieldset (a new one will be opened when a the next header element occurs)

Synopsis

void HTML_QuickForm_Renderer_Tableless::addStopFieldsetElements ( mixed $element , string $class = '' )

Description

Adds one or more element names that indicate the end of a fieldset (a new one will be opened when the next header element occurs).

If a class name is given, it will be added to each (hidden) fieldset that is generated before each of the specified element. For example, if you specify an array with five element names, all five fieldsets with get this additional class name.

Parameter

mixed $element: Element name(s) (as array or string)

string $class: (optional) Class name for the fieldset(s)

Throws

throws no exceptions thrown

Note

This function can not be called statically.

HTML_QuickForm_Renderer_Tableless::clearAllTemplates

HTML_QuickForm_Renderer_Tableless::clearAllTemplates() – Clears all the HTML out of the templates that surround notes, elements, etc.

Synopsis

void HTML_QuickForm_Renderer_tableless::clearAllTemplates ( )

Description

Useful when you want to use addData() to create a completely custom form look

Throws

throws no exceptions thrown

Note

This function can not be called statically.

HTML_QuickForm_Renderer_Tableless::setElementTemplate

HTML_QuickForm_Renderer_Tableless::setElementTemplate() – Sets element template

Synopsis

void HTML_QuickForm_Renderer_Tableless::setElementTemplate ( string $html , string $element = null )

Description

Sets the template for elements.

Parameter

string $html: The HTML surrounding an element

mixed $element: (optional) Name(s) of the element to apply template for (either single element name as string or multiple element names as an array)

Synopsis

void HTML_QuickForm_Renderer_tableless::setGroupElementTemplate ( string $html , string $group )

Description

Sets element template for elements within a group.

Parameter

string $html: The HTML surrounding an element

string $group: Name of the group to apply template for

Throws

throws no exceptions thrown

Note

This function can not be called statically.

HTML_QuickForm_Renderer_Tableless::setGroupTemplate

HTML_QuickForm_Renderer_Tableless::setGroupTemplate() – Sets template for a group wrapper

Synopsis

void HTML_QuickForm_Renderer_Tableless::setGroupTemplate ( string $html , string $group )

Description

This template is contained within a group-as-element template set via setTemplate() and contains group's element templates, set via setGroupElementTemplate()

Parameter

string $html: The HTML surrounding group elements

string $group: Name of the group to apply template for

Note

This function can not be called statically.