Zend_Form : configurer les decorators pour retirer les dt et les dd

Publié par Maxence le mer, 03/06/2009 - 19:05
Les decorators Zend_Form

Vous n'aimez pas le trio de balises dl/dt/dd que Zend_Form utilise pour envelopper ses champs ? Pas de problème, on peut les remplacer par une bonne vieille balise table.

Si vous n'êtes pas familier avec les decorators, je vous recommande la lecture de mon précédent article sur le sujet.

Prenons un formulaire d'identification classique :

<?php
class Votreapp_Form_Login extends Zend_Form
{
    public function init()
    {
        $this->addElement(
            'text',
            'username',
            array(
                'label' => 'Nom d\'utilisateur :'
            )
        );
        $this->addElement(
            'password',
            'password',
            array(
                'label' => 'Mot de passe :'
            )
        );
        $this->addElement(
            'submit',
            'submit',
            array(
                'label' => 'OK'
            )
        );
    }
}
?>

Sans CSS, ce formulaire est rendu de la façon suivante :

Le rendu du formulaire d'identification avec les balises dt/dd

Le code HTML :

<form enctype="application/x-www-form-urlencoded" action="" method="post">
    <dl class="zend_form">
        <dt id="username-label">
            <label for="username" class="optional">Nom d'utilisateur :</label>
        </dt>
        <dd id="username-element">
            <input type="text" name="username" id="username" value="">
        </dd>
        <dt id="password-label">
            <label for="password" class="optional">Mot de passe :</label>
        </dt>
        <dd id="password-element">
            <input type="password" name="password" id="password" value="">
        </dd>
        <dt id="submit-label">&nbsp;</dt><dd id="submit-element">
            <input type="submit" name="submit" id="submit" value="OK">
        </dd>
    </dl>
</form>

Pour transformer tout ça en tableau, on va d'abord commencer par envelopper les champs par des balises td et les étiquettes par des balises th. Le tout sera entouré par une balise tr :

<?php
$decorators = array(
    'ViewHelper',
    'Errors',
    array('Description', array('tag' => 'p', 'class' => 'description')),
    array('HtmlTag', array('tag' => 'td')),
    array('Label', array('tag' => 'th')),
    array(array('tr' => 'HtmlTag'), array('tag' => 'tr'))
);
$this->addElement(
    'text',
    'username',
    array(
        'decorators' => $decorators,
        'label' => 'Nom d\'utilisateur :'
    )
);
$this->addElement(
    'password',
    'password',
    array(
        'decorators' => $decorators,
        'label' => 'Mot de passe :'
    )
);
?>

On utilise deux fois le décorateur HtmlTag. On doit donc lui donner un alias avec array('tr' => 'HtmlTag').

Pour le bouton submit, c'est un peu différent. On n'a pas besoin de Errors et de Description et on doit appliquer un attribut colspan pour fusionner les deux cellules du tableau :

<?php
$this->addElement(
    'submit',
    'submit',
    array(
        'decorators' => array(
            'ViewHelper',
            array(array('td' => 'HtmlTag'), array('tag' => 'td', 'colspan' => 2)),
            array(array('tr' => 'HtmlTag'), array('tag' => 'tr'))
        ),
        'label' => 'OK'
    )
);
?>

Pour finir, on remplace la balise dl du formulaire par une balise table.

<?php
$this->setDecorators(
    array(
        'FormElements',
        array('HtmlTag', array('tag' => 'table')),
        'Form'
    )
);
?>

On obtient le rendu suivant :

Le rendu du formulaire d'identification avec les balises table/tr/th/td

Le code HTML :

<form enctype="application/x-www-form-urlencoded" action="" method="post">
    <table>
        <tr>
            <th id="username-label">
                <label for="username" class="optional">Nom d'utilisateur :</label>
            </th>
            <td>
                <input type="text" name="username" id="username" value="">
            </td>
        </tr>
        <tr>
            <th id="password-label">
                <label for="password" class="optional">Mot de passe :</label>
            </th>
            <td>
                <input type="password" name="password" id="password" value="">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" name="submit" id="submit" value="OK">
            </td>
        </tr>
    </table>
</form>

Etiquettes:

Commentaires

Eric (non vérifié)

mar, 16/03/2010 - 08:56

Bonjour
Super ton tuto .
Mais j'aimerais savoir comment faire pour que le label et le input soit dans le même TD. et non séparé en th et td svp?

Merci

Maxence

mar, 16/03/2010 - 10:50

Je n'ai pas testé, mais tu devrais pouvoir le faire en remontant le Label au-dessus du HtmlTag et en ne passant pas d'option tag.

<?php
$decorators = array(
    'ViewHelper',  
    array('Label', array()),
    array('HtmlTag', array('tag' => 'td')),
    array(array('tr' => 'HtmlTag'), array('tag' => 'tr'))
);
?>

Momo (non vérifié)

mar, 04/05/2010 - 02:12

Bonjour,
Excellent tuto !

Par contre, est-ce possible de mettre un class sur le tag qui entoure le label ?

On a ça :

Mot de passe :

Est-ce qu'on peut avoir ça :

Mot de passe :

A travers différents tests, je n'ai réussi à mettre un class que sur le label lui meme...

Merci de votre réponse.

Pages

Ajouter un commentaire