Symfony : – Personnalisation des Formulaires

Le rendu des formulaires se fait au niveau de la couche Vue. Symfony permet de personnaliser ce rendu grâce à Twig et aux thèmes de formulaires, offrant une grande flexibilité pour adapter les formulaires à vos besoins visuels.

Afficher le Formulaire Manuellement

La méthode par défaut pour afficher un formulaire est :

{{ form(form) }}

Cette méthode affiche automatiquement tout le formulaire. Pour un contrôle plus précis, il est possible d’utiliser les fonctions Twig suivantes :

a. form_start()

Ouvre le formulaire en générant la balise <form> avec les attributs nécessaires (action, method, etc.).

{{ form_start(form, {'action': path('recherche'), 'method': 'GET'}) }}

b. form_end()

Ferme le formulaire et affiche les champs restants (non affichés auparavant).

{{ form_end(form, { render_rest: false }) }}

c. form_widget()

Affiche le champ associé à un nœud.

{{ form_widget(form.nom) }}

d. form_errors()

Affiche les erreurs d’un nœud.

{{ form_errors(form.nom) }}

e. form_label()

Affiche le libellé d’un champ. Il peut être personnalisé.

{{ form_label(form.nom, 'Votre Nom') }}

f. form_row()

Raccourci pour afficher une ligne complète (label, widget et erreurs).

{{ form_row(form.nom) }}

g. form_rest()

Affiche tous les champs qui n’ont pas encore été affichés.

{{ form_rest(form) }}

Créer des Thèmes de Formulaires

Les thèmes de formulaires permettent de personnaliser certaines parties d’un formulaire, tout en laissant Symfony gérer les autres.

a. Exemple de Formulaire

Formulaire avec des champs texte, fichier et un bouton de soumission :

$form = $this->createFormBuilder()
    ->add('nom', TextType::class)
    ->add('fichier', FileType::class)
    ->add('valider', SubmitType::class)
    ->getForm();

Dans le template, le formulaire est affiché comme suit :

{{ form(form) }}

b. Créer un Thème Personnalisé

Pour personnaliser une ligne de formulaire (form_row), créez un fichier form.html.twig dans le dossier templates :

{% block form_row %}
<div style="margin: 15px 0;">
    <div style="float: left; width: 100px;">
        {{ form_label(form) }}
    </div>
    <div>
        {{ form_widget(form) }}
    </div>
    <div style="color: red;">
        {{ form_errors(form) }}
    </div>
</div>
{% endblock %}

c. Associer un Thème à un Formulaire

• Manuellement dans le Template : Utilisez form_theme pour associer un thème au formulaire :

  {% form_theme form 'form.html.twig' %}
  {{ form(form) }}
  

• Directement dans le Template Actuel : Pour des modifications légères, utilisez _self pour définir le thème dans le même fichier :

  {% form_theme form _self %}
  
  {{ form(form) }}
  
  {% block form_row %}
  <div style="margin: 15px 0;">
      <div style="float: left; width: 100px;">
          {{ form_label(form) }}
      </div>
      <div>
          {{ form_widget(form) }}
      </div>
      <div style="color: red;">
          {{ form_errors(form) }}
      </div>
  </div>
  {% endblock %}
  

Comprendre les Noms des Blocks

Les noms des blocs Twig suivent une logique hiérarchique :

1. Nom unique du nœud : _form_nom_widget (nom complet du formulaire et du champ).
2. Type de champ : text_widget, file_widget, etc.
3. Type de formulaire : form_widget.

Exemple : Pour un champ de type file, la fonction form_widget() recherchera :

1. _form_fichier_widget
2. file_widget
3. form_widget

Thèmes Globaux

Vous pouvez définir un thème global pour toute l’application dans config/packages/twig.yaml :

twig:
    form_themes:
        - 'form.html.twig'

Exemples de Personnalisation

a. Modifier un Label Spécifique

Pour ne pas afficher de label pour le champ fichier :

{% block file_label %} {% endblock %}

b. Personnaliser Plusieurs Blocks

Ajoutez plusieurs blocks dans le même thème :

{% block form_row %}
<div style="margin: 15px 0;">
    <div style="float: left; width: 100px;">
        {{ form_label(form) }}
    </div>
    <div>
        {{ form_widget(form) }}
    </div>
    <div style="color: red;">
        {{ form_errors(form) }}
    </div>
</div>
{% endblock %}

{% block file_widget %}
<input type="file" class="custom-file-input" />
{% endblock %}

 

1. Réutilisabilité : Un même thème peut être utilisé dans plusieurs formulaires.
2. Flexibilité : Permet de personnaliser le rendu selon les besoins.
3. Simplicité : Les blocs spécifiques sont faciles à comprendre et à personnaliser.

• Documentation officielle : Personnalisation des formulaires
• Twig : Référence des blocs

Grâce aux thèmes de formulaires, Symfony permet une personnalisation fine du rendu des formulaires. Que ce soit via des modifications locales ou globales, ces outils offrent une manière puissante et flexible d’adapter vos formulaires à vos besoins spécifiques.