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.
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 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"> </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 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>
Commentaires
Eric (non vérifié)
mar, 16/03/2010 - 08:56
Permalink
Bonjour Super ton tuto . Mais
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
Permalink
Je n'ai pas testé, mais tu
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
Permalink
Bonjour, Excellent tuto ! Par
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