Utilisation de classe CSS et FORMTYPE

**BOUHH37** · 24/08/2016, 08h25

Bonjour à tous,

J'aimerais utiliser les bonnes pratiques de Symfony, pour cela je m'efforce de suivre les recommandations du guide officiel.
Mon problème intervient à l'association de css dans les formType.

Je pense que je n'utilise pas correctement les classes, j'ai formulaire html, j'ai un formType fonctionnel. Mais le soucis c'est quand j'affecte des classes CSS dans la balise form.

Si je reste avec les balises CSS :

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
 
<form action="{{ path('recruting') }}" method="post" class="formoid-solid-green formbootstrapcustom">
            {#{{ form_start(form, {'attr': {'class': 'formoid-solid-green formbootstrapcustom'}}) }}#}
 
            <div class="element-input">
                <label class="title">
                    <span class="required">*</span>
                </label>
                <div class="item-cont">
                    <input class="large" type="text" name="input" required="required" placeholder="Nom"/>
                    {#{{ form_row(form.name) }}#}
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-input"><label class="title"></label>
                <div class="item-cont">
                    <input class="large" type="text" name="input10" placeholder="Prénom"/>
                    {#{{ form_row(form.lastName) }}#}
 
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-date">
                <label class="title"></label>
                <div class="item-cont">
                    <input class="large" data-format="yyyy-mm-dd" type="date" name="date"
                           placeholder="Date de naissance"/>
                    {#{{ form_row(form.birthDate) }}#}
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-input">
                <label class="title"></label>
                <div class="item-cont">
                    <input class="large" type="text" name="input11" placeholder="Ville"/>
                    {#{{ form_row(form.city) }}#}
 
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-email">
                <label class="title"></label>
                <div class="item-cont">
                    <input class="large" type="email" name="email" value="" placeholder="Email"/>
                    {#{{ form_row(form.mail) }}#}
 
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-phone">
                <label class="title"></label>
                <div class="item-cont">
                    <input class="large" type="tel" pattern="[+]?[\.\s\-\(\)\*\#0-9]{3,}" maxlength="24" name="phone"
                           placeholder="Mobile" value=""/>
                    {#{{ form_row(form.mobile) }}#}
 
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-radio">
                <label class="title">Permis de conduire</label>
                <div class="column column2">
                    <label>
                        <input type="radio" name="radio" value="Permis A"/>
                        {#{{ form_row(form.licenceA) }}#}
 
                        <span>Permis A</span>
                    </label>
                </div>
            </div>
<div class="submit"><input type="submit" value="Envoyer"/></div>
        </form>

le rendu :
Nom : Capture d’écran 2016-08-24 à 08.17.57.png
Affichages : 1159
Taille : 71,0 Ko

Mais quand j'insère le formType :

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
 
{#<form action="{{ path('recruting') }}" method="post" class="formoid-solid-green formbootstrapcustom">#}
            {{ form_start(form, {'attr': {'class': 'formoid-solid-green formbootstrapcustom'}}) }}
 
            <div class="element-input">
                <label class="title">
                    <span class="required">*</span>
                </label>
                <div class="item-cont">
                    {#<input class="large" type="text" name="input" required="required" placeholder="Nom"/>#}
                    {{ form_row(form.name) }}
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-input"><label class="title"></label>
                <div class="item-cont">
                    {#<input class="large" type="text" name="input10" placeholder="Prénom"/>#}
                    {{ form_row(form.lastName) }}
 
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-date">
                <label class="title"></label>
                <div class="item-cont">
                    {#<input class="large" data-format="yyyy-mm-dd" type="date" name="date"#}
                           {#placeholder="Date de naissance"/>#}
                    {{ form_row(form.birthDate) }}
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-input">
                <label class="title"></label>
                <div class="item-cont">
                    {#<input class="large" type="text" name="input11" placeholder="Ville"/>#}
                    {{ form_row(form.city) }}
 
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-email">
                <label class="title"></label>
                <div class="item-cont">
                    {#<input class="large" type="email" name="email" value="" placeholder="Email"/>#}
                    {{ form_row(form.mail) }}
 
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-phone">
                <label class="title"></label>
                <div class="item-cont">
                    {#<input class="large" type="tel" pattern="[+]?[\.\s\-\(\)\*\#0-9]{3,}" maxlength="24" name="phone"#}
                           {#placeholder="Mobile" value=""/>#}
                    {{ form_row(form.mobile) }}
 
                    <span class="icon-place"></span>
                </div>
            </div>
 
            <div class="element-radio">
                <label class="title">Permis de conduire</label>
                <div class="column column2">
                    <label>
                        {#<input type="radio" name="radio" value="Permis A"/>#}
                        {{ form_row(form.licenceA) }}
 
                        <span>Permis A</span>
                    </label>
                </div>
            </div>
<div class="submit"><input type="submit" value="Envoyer"/></div>
        {#</form>#}
        {{ form_rest(form) }}
        {{ form_end(form) }}

On peut voir que les boutons radios ont disparut :
Nom : Capture d’écran 2016-08-24 à 08.21.54.png
Affichages : 1144
Taille : 78,8 Ko

Voici mon formType :

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
 
$builder
            ->add('name', null, array(
                'label' => ' ',
                'attr' => array(
                    'placeholder' => 'Nom',
                    'class' => 'large')
            ))
            ->add('lastName', null, array(
                'label' => ' ',
                'attr' => array(
                    'placeholder' => 'Prénom',
                    'class' => 'large')
            ))
//
            ->add('birthDate', null, array(
                'widget' => 'single_text',
                'input' => 'datetime',
                'format' => 'yyyy-MM-dd',
                'label' => ' ',
                'attr' => array(
                    'placeholder' => 'Date de naissance',
                    'class' => 'large date')
            ))
            ->add('city', null, array(
                'label' => ' ',
                'attr' => array(
                    'placeholder' => 'Ville',
                    'class' => 'large')
            ))
            ->add('mail', null, array(
                'label' => ' ',
                'attr' => array(
                    'placeholder' => 'Email',
                    'class' => 'large')
            ))
            ->add('mobile', null, array(
                'label' => ' ',
                'attr' => array(
                    'placeholder' => 'Numéro de téléphone',
                    'class' => 'large')
            ))
            ->add('licenceA', CheckboxType::class, array(
                'label'    => 'Permis A',
                'required' => false,
                'attr' => array('class' => ''),
            ))
            ->add('licenceB', CheckboxType::class, array(
                'label'    => 'Permis B',
                'required' => false,
            ));
}

Merci de l'entraide 😊

**MehrezLabidi** · 24/08/2016, 09h22

Bonjour,
au lieu d'utiliser

Code :

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

{{ form_row(form.age) }}

utilise

Code :

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

1
2
3
4
5
6
 
<div>
    {{ form_label(form.age) }}
    {{ form_errors(form.age) }}
    {{ form_widget(form.age) }}
</div>

Parfois le style d'un element dom dépend d'une hiérarchie de classe css, pour avoir la meme vue la template statique il faut suivre la même hiérarchie.

**BOUHH37** · 24/08/2016, 09h29

C'étais bien cela, merci !!

Je cherche également à mettre des contraintes dans la saisie du formulaire, notamment pour le mail, sur la doc symfony on utilise CheckMX

Code :

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

1
2
3
4
5
6
7
8
 
 /**
     * @Assert\Email(
     *     message = "The email '{{ value }}' is not a valid email.",
     *     checkMX = true
     * )
     */
     protected $email;

Seulement quand je l'utilise ca crash la page et aucune persistance ce fait .

De plus, mon formulaire permet de sélectionner sa date de naissance via un calendrier, mais les mois et jours sont en anglais, aurait-il un moyen de le traduire en français ?
J'ai pourtant modifié ma timezone en Europe/Paris ainsi que mon config.yml

Code :

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

1
2
3
4
5
twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"
    date:
            timezone: Europe/Paris

**MehrezLabidi** · 24/08/2016, 09h53

pour la premiere question , tu as peut etre oublié :

Code :

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

1
2
 
use Symfony\Component\Validator\Constraints as Assert;

pouur la deuxieme question , je te conseile d'utiliser Datepicker ou Datetimepicker de JQuery.
C'est trés complet , c'est mignon

et ca change de langue selon la locale de ta session.

Pour la langue , c'est sur que tu as la locale " en " dans le fichier config.

**BOUHH37** · 24/08/2016, 09h58

Si j'ai bien utilisé : use Symfony\Component\Validator\Constraints as Assert;

Dac, je vais regarder de ce coté là, merci 😊

Utilisation de classe CSS et FORMTYPE

Symfony PHP

Discussions similaires

Partager

Partager