Question

If I have the following simplistic form:

<?php

class Application_Form_Contact extends Zend_Form
{
    public function init()
    {
        //set the method for the display form to POST
        $this->setMethod('post');

        //create and add e-mail element
        $email = $this    -> createElement('text', 'username')
                              -> setLabel('E-mail:')
                          -> setRequired(true)
                          -> addFilters(array('StringTrim', 'StringToLower'))
                          -> addValidator('EmailAddress')
                          -> addErrorMessage('U dient een geldig e-mail adres in te vullen.');               
        $this->addElement($email);

        //create and add message element
        $message = $this    -> createElement('textarea', 'message')
                            -> setLabel('Bericht:')
                            -> setRequired(true)
                            -> addValidator('StringLength', array(0, 5000))
                            -> addErrorMessage('U dient een bericht in te vullen van maximaal 5000 tekens.');
        $this->addElement($message);

        //submit button
        $this->addElement('submit', 'submit', array(
            'ignore'    => true,
            'label'     => 'Verstuur Bericht'
        ));
    }
}

?>

By default, this will result in a table layout like so:

    <form enctype="application/x-www-form-urlencoded" method="post" action="/contact"><dl class="zend_form"> 
<dt id="username-label"><label for="username" class="required">E-mail:</label></dt> 
<dd id="username-element"> 
<input type="text" name="username" id="username" value=""></dd> 
<dt id="message-label"><label for="message" class="required">Bericht:</label></dt> 
<dd id="message-element"> 
<textarea name="message" id="message" rows="24" cols="80"></textarea></dd> 
<dt id="submit-label">&#160;</dt><dd id="submit-element"> 
<input type="submit" name="submit" id="submit" value="Verstuur Bericht"></dd> 
</dl></form>

Which is quite unnecessary, since some simplistic HTML will result in a form that is more to my liking (as the textarea is under the label while the e-mail input is next to the label):

<form enctype="application/x-www-form-urlencoded" method="post" action="/contact">

    <p>
        <label id="username-label" for="username" class="required">E-mail:</label>
        <input type="text" name="username" id="username" value="" />
    </p>

    <br />  

    <p>
        <label id="message-label" for="message" class="required">Bericht:</label>
        <br />
        <textarea name="message" id="message" rows="24" cols="80"></textarea>
    </p>

    <input type="submit" name="submit" id="submit" value="Verstuur Bericht" />

</form>

Which looks like this: http://jsfiddle.net/qmKYa/ as opposed to http://jsfiddle.net/rudhA/2/.

But how do I get zend not to render any table at all, wrap the first two elements within paragraph tags and add the two new lines for proper spacing?

Answer 1

First of all, Zend_Form uses decorators to write the form. You can make changes to the existing default decorators but also write and add your own decorators. Check the Zend Reference Guide for examples.

About the position of labels you can tell the existing decorator to APPEND or PREPEND to the form element.

Following are couple examples for how you can manipulate existing decorators.

$element->removeDecorator('DtDdWrapper');

$descriptionDecorator = new Zend_Form_Decorator_Description(array('tag'=>'p','class' => 'description_submit'));
$descriptionDecorator->setOption('placement','PREPEND');
$element->addDecorator($descriptionDecorator);

There is also an existing Zend_Form_Decorator_Label class but I don’t have an example ready for that.