Formulaires Symfony

Le bundle fournit des types de formulaires Symfony compatibles DSFR. Ils gardent le fonctionnement habituel du composant Form : validation, erreurs, attributs HTML, aides et rendu Twig.

L'objectif est de conserver les habitudes Symfony tout en supprimant le travail répétitif de mise en conformité DSFR : classes de groupe, libellés, aides, erreurs, états désactivés et boutons.

use Nalabdou\Dsfr\Form\Type\DsfrInputType;
use Nalabdou\Dsfr\Form\Type\DsfrSubmitType;
use Symfony\Component\Form\FormBuilderInterface;

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('email', DsfrInputType::class, [
            'label' => 'Adresse électronique',
            'help' => 'Format attendu : nom@example.fr',
        ])
        ->add('submit', DsfrSubmitType::class, [
            'label' => 'Envoyer',
        ]);
}

Thème Twig

Le thème de formulaire est ajouté automatiquement par le bundle. Si vous voulez le déclarer explicitement dans une application qui surcharge fortement twig.form_themes, utilisez :

twig:
  form_themes:
    - '@Dsfr/form/dsfr_form_theme.html.twig'

Types disponibles

• DsfrInputType
• DsfrTextareaType
• DsfrSelectType
• DsfrCheckboxType
• DsfrRadioType
• DsfrToggleType
• DsfrSearchType
• DsfrSubmitType

Les composants Twig de formulaire disponibles couvrent aussi dsfr:upload, dsfr:password, dsfr:range, dsfr:segmented et dsfr:combobox.

Choisir le bon champ

Besoin	Type Symfony	Composant Twig associé
Texte court	DsfrInputType	dsfr:input
Texte long	DsfrTextareaType	dsfr:textarea
Liste simple	DsfrSelectType	dsfr:select
Choix multiple booléen	DsfrCheckboxType	dsfr:checkbox
Choix unique	DsfrRadioType	dsfr:radio
Activation/désactivation	DsfrToggleType	dsfr:toggle
Recherche	DsfrSearchType	dsfr:search:bar
Action de soumission	DsfrSubmitType	dsfr:button

Pour les champs avancés non exposés comme type Symfony dédié, utilisez directement les composants Twig dans votre template ou créez un type applicatif qui réutilise le thème DSFR.

Exemple complet

use Nalabdou\Dsfr\Form\Type\DsfrCheckboxType;
use Nalabdou\Dsfr\Form\Type\DsfrInputType;
use Nalabdou\Dsfr\Form\Type\DsfrSelectType;
use Nalabdou\Dsfr\Form\Type\DsfrSubmitType;
use Nalabdou\Dsfr\Form\Type\DsfrTextareaType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

final class ContactType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('name', DsfrInputType::class, [
                'label' => 'Nom',
                'required' => true,
            ])
            ->add('subject', DsfrSelectType::class, [
                'label' => 'Sujet',
                'choices' => [
                    'Demande générale' => 'general',
                    'Support technique' => 'support',
                ],
            ])
            ->add('message', DsfrTextareaType::class, [
                'label' => 'Message',
            ])
            ->add('agreement', DsfrCheckboxType::class, [
                'label' => 'J'accepte d'être recontacté',
                'required' => true,
            ])
            ->add('submit', DsfrSubmitType::class, [
                'label' => 'Envoyer',
            ]);
    }
}

Champs avec état

Les erreurs Symfony sont rendues avec les classes DSFR attendues. Les messages d'aide utilisent fr-hint-text.

$builder->add('name', DsfrInputType::class, [
    'label' => 'Nom',
    'required' => true,
    'help' => 'Votre nom de famille.',
]);

Bonnes pratiques formulaire

• Utilisez un label explicite pour chaque champ.
• Utilisez help pour les contraintes utiles avant la saisie.
• Laissez Symfony porter les erreurs de validation : le thème DSFR les rend dans le bon bloc.
• Regroupez les champs liés dans un fieldset avec une légende claire.
• Conservez les valeurs soumises après erreur de validation.
• Préférez des radios à un select quand le choix est court et structurant.
• Testez le formulaire au clavier et avec les erreurs visibles.

Layout de formulaire

<twig:dsfr:container>
  <twig:dsfr:grid:row gutters>
    <twig:dsfr:grid:col cols="12" md="6">
      {{ form_row(form.firstName) }}
    </twig:dsfr:grid:col>
    <twig:dsfr:grid:col cols="12" md="6">
      {{ form_row(form.lastName) }}
    </twig:dsfr:grid:col>
    <twig:dsfr:grid:col cols="12">
      {{ form_row(form.email) }}
    </twig:dsfr:grid:col>
  </twig:dsfr:grid:row>
</twig:dsfr:container>

Recette qualité

Contrôle	Attendu
Erreurs	message visible, précis et relié au champ
Aides	contraintes importantes indiquées avant soumission
Required	obligation visible et cohérente avec la validation Symfony
Désactivé	état impossible à soumettre si métier requis
Responsive	champs empilés sur mobile
Accessibilité	navigation clavier et ordre de lecture cohérents