Mise en forme du formulaire

**CinePhil** · 15/03/2010, 11h42

Bonjour.

Je continue ma progression dans l'apprentissage du ZF.

Voici un formulaire de saisie réalisé à partir du tuto "Débuter avec Zend-Framework" :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
class FormulaireDysfonctionnement extends Zend_Form
{
    public function __construct($options = null)
    {
        parent::__construct($options);
        $this->setName('form_dysfct');
 
        $id = new Zend_Form_Element_Hidden('id');
 
        $date_emission = new Zend_Form_Element_Text('date_emission');
        $date_emission    ->setLabel("Date d'émission")
                        ->setRequired(true)
                        ->addFilter('StripTags')
                        ->addFilter('StringTrim')
                        ->addValidator('NotEmpty');
 
        $redacteur = new Zend_Form_Element_Text('redacteur');
        $redacteur        ->setLabel('Rédacteur')
                        ->setRequired(true)
                        ->addFilter('StripTags')
                        ->addFilter('StringTrim')
                        ->addValidator('NotEmpty');
 
        $service = new Zend_Form_Element_Text('service');
        $service    ->setLabel('Service')
                    ->setRequired(true)
                    ->addFilter('StripTags')
                    ->addFilter('StringTrim')
                    ->addValidator('NotEmpty');
 
        $titre = new Zend_Form_Element_Text('titre');
        $titre    ->setLabel('Titre')
                ->setRequired(true)
                ->addFilter('StripTags')
                ->addFilter('StringTrim')
                ->addValidator('NotEmpty');
 
        $description = new Zend_Form_Element_Text('description');
        $description    ->setLabel('Description')
                        ->setRequired(true)
                        ->addFilter('StripTags')
                        ->addFilter('StringTrim')
                        ->addValidator('NotEmpty');
 
        $services_impliques = new Zend_Form_Element_Text('services_impliques');
        $services_impliques    ->setLabel('Services impliqués')
                            ->setRequired(true)
                            ->addFilter('StripTags')
                            ->addFilter('StringTrim')
                            ->addValidator('NotEmpty');
 
        $dest_reponse = new Zend_Form_Element_Text('dest_reponse');
        $dest_reponse    ->setLabel('Destinataires pour réponse')
                        ->setRequired(true)
                        ->addFilter('StripTags')
                        ->addFilter('StringTrim')
                        ->addValidator('NotEmpty');
 
        $dest_info = new Zend_Form_Element_Text('dest_info');
        $dest_info    ->setLabel('Destinataires pour information')
                    ->setRequired(true)
                    ->addFilter('StripTags')
                    ->addFilter('StringTrim')
                    ->addValidator('NotEmpty');
 
        $causes = new Zend_Form_Element_Text('causes');
        $causes    ->setLabel('Analyse des causes')
                ->setRequired(true)
                ->addFilter('StripTags')
                ->addFilter('StringTrim')
                ->addValidator('NotEmpty');
 
        $action = new Zend_Form_Element_Text('action');
        $action    ->setLabel('Action')
                ->setRequired(true)
                ->addFilter('StripTags')
                ->addFilter('StringTrim')
                ->addValidator('NotEmpty');
 
        $submit = new Zend_Form_Element_Submit('submit');
        $submit->setAttrib('id', 'submitbutton');
 
        $this->addElements(array($id, 
                                $date_emission, 
                                $redacteur, 
                                $service,
                                $titre,
                                $description,
                                $services_impliques,
                                $dest_reponse,
                                $dest_info,
                                $causes,
                                $action,
                                $submit)
                            );
    }
}

Le formulaire ci-dessus me pose deux problèmes :
1) Les lettres accetuées s'affichent mal.
Mon layout affiche pourtant ceci :

Code :

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

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

J'utilise Eclipse pour coder et il est configuré pour enregistrer en UTF-8.

2) Les champs de saisie s'affichent en escalier.
C'est probablement dû aux labels longs.
Le label "Date d'émission" s'affiche sur deux lignes. La zone de saisie de la date d'émission s'affiche à la suite de la première ligne.
Le label "Rédacteur" s'affiche à la suite de la deuxième ligne du label précédent.
Et ainsi de suite à chaque fois qu'il y a un label sur deux lignes.

Comment mettre en forme tout ça correctement ?
D'autant plus qu'évidemment c'est brut de fonderie et qu'il faudra que ce soit un peu plus joli que ça !

PS :
C'est assez urgent ! Il faudrait que je présente une première maquette de ce formulaire cet après-midi !

**Celira** · 15/03/2010, 13h44

Pour ton histoire d'accents, vérifie que la base est bien en utf8 aussi si tu utilises une base de données...

En ce qui concerne ton affichage, ce sont les decorators qui mettent le bazar. Personnellement tous mes éléments sont empaquetés dans des div par défaut...
Tu peux placer quelque chose comme ça :

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
        $this->addElements(array($id, 
                                $date_emission, 
                                $redacteur, 
                                $service,
                                $titre,
                                $description,
                                $services_impliques,
                                $dest_reponse,
                                $dest_info,
                                $causes,
                                $action,
                                $submit)
                            );
        $this->setElementsDecorators(array(
            'ViewHelper', 
            'Label',
            array(
                'HtmlTag', 
                array(
                    'tag' => 'div'))));

Normalement, ça va placer tous les élements de ton formulaire dans une balise div.
http://framework.zend.com/manual/1.7...ecorators.html

**CinePhil** · 15/03/2010, 13h48

Merci pour la réponse.

Pour les accents, j'ai résolu en modifiant la variable default_charset dans php.ini.

Pour la mise en forme, je fignolerai plus tard.
Je me suis contenté d'agrandir le paramètre width de label dans le css et ça suffit à supprimer l'effet escalier.

Je laisse la discussion ouverte parce qu'avec ce que j'ai pu lire jusque là sur la mise en forme des Zend_form, ça n'a pas l'air d'être très évident !

**CinePhil** · 18/03/2010, 15h20

Me revoilà avec ma mise en forme de formulaire !

Plusieurs choses à faire et je sèche !
J'ai idée qu'il faut utiliser des decorator mais après avoir lu la doc c'est plus que flou quand à son utilisation concrète !
Y'aurait pas un petit tuto pratique quelque part ?

1) Changer la taille d'un champ de saisie en particulier
La taille standard du champ de saisie est trop grande pour une date et trop petite pour un titre.

2) Diminuer la hauteur d'un textarea.

3) Ajouter du texte sous un libellé, potentiellement sur toute la hauteur d'un textarea.

Pour ce dernier point, j'ai essayé de jouer avec des <div> et <span> dans le script de la vue mais la textarea s'affiche obstinément sous le texte ajouté.

Vous l'aurez peut-être compris, je suis également débutant en CSS !

Bref, un tuto pas à pas avec captures d'écran me serait du plus grand secours !

**Celira** · 18/03/2010, 16h10

Pour le tuto je n'en ai pas trouvé de réellement explicite. (si tu veux en écrire un, ne te prive pas)

En revanche, pour le reste je peux t'aider

1) il faut appliquer un style sur ton champ pour en fixer la longueur. La bonne idée étant de créer une classe dans ton css que tu appliqueras à tous tes champs, histoire d'uniformiser sans avoir à tout retaper à chaque fois. (surtout que la plupart des Form_Element ont un attribut class pour ça)

Code css :

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

1
2
3
4
.input_texte
{
 width: 200px;
}

Code php :

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

1
2
$text = new Zend_Form_Element_Text('mon_texte', 
  array ('class' => 'input_texte'));

résultat en html :

Code html :

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

<input type="text" name="mon_texte" class="input_texte" />

Pour en savoir plus sur les css, on a des tas de tutos : http://css.developpez.com/cours/?page=intro

2) Les textarea sont des élements un peu casse-pied. Pour jouer sur la hauteur, il faut jouer sur le nombre de lignes qu'elle contient. Coup de bol, il y a un attribut rows dans le Form_Element_Textarea.

Code :

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

1
2
$zone = new Zend_Form_Element_Textarea('ma_zone', 
  array('rows' => 5));

Code html :

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

1
2
<textarea name="ma_zone" rows="5">
</textarea>

3) là j'ai pas compris ce que tu essayes de faire

**CinePhil** · 18/03/2010, 17h40

Merci pour le 1 et le 2, j'essaierai ça demain, je vois à peu près comment je peux caser ça.

Pour le 3, j'ai actuellement grosso modo ceci (en format texte ci-dessous mais bon

) :

Label : /de l'espace/ [La zone textarea]
_________________[La zone textarea]
_________________[La zone textarea]
___/de l'espace/___[La zone textarea]
_________________[La zone textarea]
_________________[La zone textarea]

Et je voudrais ceci :

Label : /de l'espace/ [La zone textarea]
description________[La zone textarea]
description________[La zone textarea]
description________[La zone textarea]
description________[La zone textarea]
description________[La zone textarea]

J'ai trouvé quelque part un petit tuto qui explique qu'il existe un attribut Description pour les Zend_Form_Element. J'ai essayé mais bien sûr cette description vient en dessous de la zone textarea.

En gros il s'agit d'utiliser l'espace vide sous le libellé pour donner une consigne à l'utilisateur sur les informations attendues dans la zone textarea.

**CinePhil** · 19/03/2010, 11h37

Suite de mes aventures...

1) La longueur des champs de saisie
J'ai ce qui suit dans la description du formulaire :

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
$date_emission = new Zend_Form_Element_Text('date_emission', array('class' => 'label_date'));
        $date_emission    ->setLabel("Date d'&eacute;mission (JJ/MM/AAAA):")
                        ->setRequired(true)
                        ->setValue(date('d/m/Y'))
                        ->addFilter('StripTags')
                        ->addFilter('StringTrim')
                        ->addValidator('NotEmpty')
                        ->addValidator(new Zend_Validate_Date('d/m/Y'));
 
$titre = new Zend_Form_Element_Text('titre', array('class' => 'label_long-text'));
        $titre    ->setLabel('Titre :')
                ->setRequired(true)
                ->addFilter('StripTags')
                ->addFilter('StringTrim')
                ->addValidator('NotEmpty');

J'ai ce qui suit dans mon css :

Code CSS :

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
label
{ 
  width: 300px;
  display: block;
  float: left;
} 
 
label_date 
{     width: 200px;
  display: block;
  float: left;
} 
 
label_long_text 
{ 
  width: 700px;
  display: block;
  float: left;
}

Mais les champs de saisie n'ont pas changé de taille !

2) Hauteur de textarea
OK ça marche !

3) Description sous le label du textarea
J'ai trouvé qu'on peut afficher dans la vue séparément le Label et la Description mais je ne trouve pas comment afficher individuellement la zone de saisie.

Code :

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

1
2
3
<?php echo $this->form->description->getLabel() ;?>
<?php echo $this->form->description->getDescription() ;?>
<?php echo $this->form->description->/*quelle propriété pour la zone de saisie ?*/ ;?>

Parce que si j'ai ça, je pense pouvoir me débrouiller avec des blocs pour présenter ça comme je veux.

**Celira** · 19/03/2010, 11h45

Attention en css, les class commencent par des .

Code css :

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
.label 
{
    width: 300px;
    display: block;
    float: left;
}
 
.label_date
{
    width: 200px;
    display: block;
    float: left;
}
 
.label_long_text
{
    width: 700px;
    display: block;
    float: left;
}

Pour l'autre, je sais pas...

**CinePhil** · 19/03/2010, 12h01

Oui effectivement je m'en suis rendu compte.
Par contre ça ne fonctionne toujours pas.
Sachant que ce que je veux changer c'est la taille de la zone de saisie et pas son label, j'ai fait ceci dans le css :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
.champ_date
{
    size: 8px;
    align: center;
}
 
.champ_texte_long
{
    size: 70px;
}

Et bien sûr ceci dans le formulaire :

Code :

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

1
2
3
$date_emission = new Zend_Form_Element_Text('date_emission', array('class' => 'champ_date'));
 
$titre = new Zend_Form_Element_Text('titre', array('class' => 'champ_texte_long'));

Mais les champs de saisie n'ont pas changé de taille.

Par contre, si je fais ceci :

Code :

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

1
2
3
$date_emission = new Zend_Form_Element_Text('date_emission', array('size' => '8px'));
 
$titre = new Zend_Form_Element_Text('titre', array('size' => '70px'));

Là je change bien la taille !

Bizarre non ?

**CinePhil** · 19/03/2010, 16h55

Épisode 6 : Le retour du Jedi.

Euh... non c'est pas ça !

Je suis arrivé à mettre la description sous le label mais la zone de saisie persiste à se mettre sous la description. Ca doit être un problème de CSS mais je sèche un peu.

Description du formulaire :

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
$elementDecorators = array(array('ViewHelper'),
                                    array('decorator' => array('1er'=>'HtmlTag'),
                                            'options' => array('tag'=>'span', 
                                                                'class' => 'textarea')
                                    ),
                                    array('Errors'),
                                    array('Description', array('tag' => 'div',
                                                                 'class' => 'description',
                                                                 'placement' => 'prepend')),
                                    array('HtmlTag'),
                                    array('Label')
                            );
 
        $description = new Zend_Form_Element_Textarea('description', array('rows' => 10));
        $description    ->setLabel('Description :')
                        ->setRequired(true)
                        ->addFilter('StripTags')
                        ->addFilter('StringTrim')
                        ->addValidator('NotEmpty')
                        ->setDescription($libelle_description)
                        ->setDecorators($elementDecorators);

Dans le CSS :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
.description
{
    clear: left;
    width: 250px;
    font-size: 80%;
}
 
.textarea
{
    float: left;
}

Si quelqu'un a une idée lumineuse pendant le week-end, je suis preneur !

Grand merci en tout cas à Celira qui m'a déjà bien aiguillé vers un morceau de solution.

Mise en forme du formulaire

Zend_Form PHP

Discussions similaires

Partager

Partager