Discussion :

[psylo66]

Bonjour,

Souhaitant personnaliser esthétiquement mon formulaire, j'ai voulu insérer du code HTML à l'intérieur ce qui n'est pas une mince à faire.
Pour ce faire j'ai utilisé le helper 'formNote' comme conseillé par diverses personnes sur le net :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 
//Dans \library\My\Form\Element\Html.php
class My_Form_Element_Html extends Zend_Form_Element_Xhtml
{
    // On utilise l'aide de vue formNote
	public $helper = 'formNote';
}

Ensuite j'ai un formulaire ou j'utilise ce helper pour ajouter du code html (ici un spacer par exemple après un label et un champs email )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
// Dans application\forms\Login.php
class Form_Login extends Zend_Form
{
 
	public function __construct($options = null)
	{
		parent::__construct($options);
		$this->setName('login');
$spacer = new My_Form_Element_Html("spacer") ;
		$spacer->addDecorators(array(
    		'ViewHelper',
    	array('HtmlTag', array('tag' => 'div', 'class' => 'spacer')) 
		));
		$spacer->removeDecorator('label');
 
$email = new Zend_Form_Element_Text("emailLog",array('size' => 25));
		$email ->setLabel('E-mail *')
		->setRequired(false)
		->addFilter('StringTrim')
		->addFilter('StripTags')
		//->addValidator('NotEmpty', true , array('messages' => array('isEmpty' => 'Vide')))
		->addValidator('EmailAddress');
 
$this->addElements(array($email,$spacer));
       }
 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
//Dans la vue     
$formLogin = new Form_Login();
$this->view->login = $formLogin;

Bon tout fonctionne correctement ; Voici le code qui est généré par par Mozilla Firefox (firebug) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<form id="login" enctype="application/x-www-form-urlencoded" action="" method="post">
<dl class="zend_form">
<input name="form" value="formLog" id="formLog" type="hidden">
<dt id="emailLog-label"><label for="emailLog" class="optional">E-mail *</label></dt>
<dd id="emailLog-element">
<input name="emailLog" id="emailLog" value="" size="25" type="text"></dd>
<div class="spacer">
</div>
 
</form>

Par contre quand je regarde le code via IE developper Toolbar j'ai ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
//Le spacer est dans le dd et non après
 
<form id="login" enctype="application/x-www-form-urlencoded" action="" method="post"><dl class="zend_form">
 
<input name="form" value="formLog" id="formLog" type="hidden">
<dt id="emailLog-label"><label for="emailLog" class="optional">E-mail *</label></dt>
<dd id="emailLog-element">
<input name="emailLog" id="emailLog" value="" size="25" type="text">
<div class="spacer">
</div>
 
</dd>
</form>

Voilà je ne trouve pas de solution à ce problème !
Si quelqu'un a déja eu ce problème ou alors une meilleure façon d'ajouter du HTML dans un formulaire ce serais sympa de m'en faire part.
En vous remerçiant.

[Celira]

la différence m'a l'air là :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<dd id="emailLog-element">
  <input name="emailLog" id="emailLog" value="" size="25" type="text">
</dd>
<div class="spacer"></div>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<dd id="emailLog-element">
  <input name="emailLog" id="emailLog" value="" size="25" type="text">
  <div class="spacer"></div>
</dd>

A vue de nez, je dirais que tu dois avoir un decorator html avec une balise dd qui se promène (il me semble d'ailleurs que c'est le decorator par défaut) et qui ne ferme pas son dd au bon endroit. Il doit y avoir un conflit entre le decorator html de ton spacer et celui de ton input email...

Ton spacer sert à quoi au fait ?

[psylo66]

Oui, j'ai peut être mal présenté mon problème mais c'était cette différence que je voulais mettre en avant.

Je ne comprends pas pourquoi sur Mozilla, le spacer est ajouté correctement après et pas sur IE ?

Dans mon code les 2 élements sont pourtant bien distincts , et ajoutés l'un après l'autre, je ne comprends pas ?

Et le spacer sert à remettre à 0 le flux de deux flottants (propriété : clear both), c'est une méthode qui date mais fonctionnelle.

En tout cas peut être importe quel type d'élément je veux ajouter, j'ai quand même ce problème dans le DOM avec IE.

[Celira]

hum... peut-être que si tu redéfinis complètement les decorateurs de ton spacer en utilisant setDecorators plutot que add et remove...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$spacer = new My_Form_Element_Html("spacer") ;
$spacer->setDecorators(array(
    		'ViewHelper',
    	array('HtmlTag', array('tag' => 'div', 'class' => 'spacer')) 
		));

[psylo66]

Je viens d'essayer et le résultat est identique.

J'aimerai savoir comment tu fais toi pour ajouter du HTML dans un formulaire.

Est ce que tu t'es créé un helper comme moi ? ou est ce que tu utilises les helpers par défauts de Zend pour les formulaires ?

Si tu utilises les helpers par defaut pour les formulaires pourrais tu m'indiquer un tutoriel pour les utiliser, parce que je ne comprends pas la synthaxe, ou alors me montrer un exemple explicite de la synthaxe ?

En te remerçiant.

[nosferapti]

Je ne comprends pas pourquoi sur Mozilla, le spacer est ajouté correctement après et pas sur IE ?

n'oublie pas que dans Firebug, ce n'est pas le code HTML de base mais le code HTML corrigé
et pour IE developper Toolbar je ne connais pas donc soit il affiche le code de base, soit il affiche le code corrigé (mais d'une autre façon que Firefox) donc ça peut être normal de ne pas voir la même chose avec les 2 outils

[psylo66]

Oui je vois ce que tu veux dire mais je ne pense pas que ce soit ça le problème, en regardant avec l'outils de développement de chrome j'ai exactement le même code qu'avec firefox.

Je pense que le problème vient de mon code pour ajouter du HTML dans un formulaire, j'aimerais savoir comment vous le faites ? ou alors avoir un exemple , tutoriel clair à ce sujet ?

En vous remerçiant.