How to set a class attribute to a Symfony2 form input

Question

How can I set the HTML class attribute to a form <input> using the FormBuilder in Symfony2 ?

Something like this:

->add('birthdate', 'date',array(
      'input' => 'datetime',
      'widget' => 'single_text',
      'attr' => array(
          'class' => 'calendar'
      )
 ))

 {{ form_widget(form.birthdate) }}

I want this inputfield with the attribute class set to calendar

Solution 1

You can do this from the twig template:

{{ form_widget(form.birthdate, { 'attr': {'class': 'calendar'} }) }}

From http://symfony.com/doc/current/book/forms.html#rendering-each-field-by-hand

Solution 2

You can do it with FormBuilder. Add this to the array in your FormBuilder:

'attr'=> array('class'=>'span2')

Solution 3

The answer by Acyra lead the right way if you want to set attributes inside the controller, but has many inaccuracies.

Yes, you can do it directly with the FormBuilder by using the attr attribute (introduced here for the 2.1 version and here for the 2.0) to the array of options as follows:

->add('birthdate', 'date',array(
      'input' => 'datetime',
      'widget' => 'single_text',
      'attr' => array('class'=>'calendar')
 ))

It is not true that the "functionality is broken". It works very well!

It is not true that Symfony2 applies the HTML class attribute to both the label and the input (at least from the 2.1 version).

Moreover, since the attr attribute is an array itself, you can pass any HTML attribute you want to render for the field. It is very helpful if you wanna pass the HTML5 data- attributes.

Solution 4

You can add it in the options of your form class:

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'AppBundle\Entity\MyEntity',
        'attr' => array(
            'class' => 'form-horizontal'
        )
    ));
}

Solution 5

{{ form_widget(form.content, { 'attr': {'class': 'tinyMCE', 'data-theme': 'advanced'} })  }}

View more solutions

Comments

[Acyra]

This really isn't an answer for the question-- the whole point of the FormBuilder is to avoid hand-coding the Twig template.

[Eugene]

@Acyra It depends... throwing loads of view-related stuff into the form builder isn't the best way either.

[ILikeTacos]

I agree, form customization should live in the view, and not in the controller. The controllers should be as light as possible, While it is pretty awesome that Symfony2 create the forms for you, and that's a huge time saver, when you're working with "fancy" UIs, sometimes the form builder gets in the way.

[Anh Nguyen]

This add class to the wrapping div not the input

[Quentin S.]

@numerah: old comment, but for others that may see your comment: yes we do! You can set all kind of attributes using 'attr'.

[axelvnk]

@Acyra What about form theme templates? You'll have to do this once if you want to keep a style going on for all your forms..

[rybo111]

@Acyra I initially thought the same, but if you think about it, adding a class to an input almost always belongs in the view. It's either JS or CSS related, which is usually specific to that view. The idea of FormBuilder is that it allows forms to be reusable. Adding a class like input-lg might be fine for one use but not another.

[Kim]

This should be the correct answer, best to do this in the form class and not in twig.