How include an attribute 'class' rendering a form

Question

I have a contact form and I'm trying to put a class to an input of my form.

This is in the ContactType:

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('name', TextType::class);
}

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults([
        'data_class' => Contact::class,
    ]);
}

And this in my twig:

{{ form_start(form) }}
   {{ form_widget(form.name, {attr: {class: 'myclass', placeholder: 'name'} }) }}
{{ form_end(form) }}

I get this html:

<input type="text" class="form-control" id="contact_name" name="contact[name]" required="required" placeholder="name">

It's working for placeholder, but not to class. I have tried to put the attr in the builder and it is the same. Is the class form-control overwriting my class? How can I fix it?

Possible duplicate of [How to set a class attribute to a Symfony2 form input](https://stackoverflow.com/questions/6734821/how-to-set-a-class-attribute-to-a-symfony2-form-input) — DarkBee, Jul 09 '19 at 07:53
There should be more to your builder than the line you gave us, form-control is not coming out of nowhere, what about adding the class to the builder ? — Dylan KAS, Jul 09 '19 at 07:55
@DylanKas I have tried to add the class in the builder and it is the same — Rafael Estrada, Jul 09 '19 at 08:14
I would guess that the "form-control" class comes from your global form theme (which might be something that you have written yourself or just using some predefined one like bootstrap that makes that kind of additions). So the form theme would be the place to fix this (either fixing your own - or extending and fixing the predefined one). — ejuhjav, Jul 09 '19 at 08:26

score 2 · Accepted Answer · answered Jul 09 '19 at 10:18

2

I think you're using a bootstrap form theme, check into the config file.

and if the case, you can add this line on the top of your twig file :

{% form_theme form 'form_div_layout.html.twig' %}

answered Jul 09 '19 at 10:18

Themer

584
4
9

Yes! The problem was that it doesn't have the default theme form. I solved with this, thank you. – Rafael Estrada Jul 09 '19 at 12:36

score 1 · Answer 2 · answered Jul 09 '19 at 08:19

1

Try this if it will help you

{{ form_start(form) }}
 {{ form_widget(form.name, {'attr': {'class': 'input-text input-text--white', 'placeholder': 'name'} }) }}
{{ form_end(form) }}

answered Jul 09 '19 at 08:19

Nirina-aj

192
1
3
18

It is the same with or without quotes. Notice that it is getting the placeholder. – Rafael Estrada Jul 09 '19 at 08:41

score 1 · Answer 3 · answered Jul 09 '19 at 08:59

I believe you can't define two attributes on form_wdiget. The way around this is doing both in the FormBuilder or one in the FormBuilder.

You can define attributes on a form element like so:

$builder
    ->add('name', TextType::class, [
        'attr' => [
            'class' => 'my-class',
        ],
    ]);

Note that for a CSS class, it must be in the array attr, not to be confused with a class as in your entity like on the EntityType::class.

Or

$builder
    ->add('name', TextType::class, [
        'placeholder' => 'My place holder',
    ]);

So you could achieve both like:

$builder
    ->add('name', TextType::class, [
        'attr' => [
            'class' => 'my-class',
        ],
        'placeholder' => 'My place holder',
    ]);

You can read more about form field attributes here.

Thanks for the answer. I tried also this options, but the result is the same. — Rafael Estrada, Jul 09 '19 at 09:10
Did you remove the 'attr' from form_widget when you tried my suggestions? — MylesK, Jul 09 '19 at 09:15
Yes, I did. At the beginning I also thought that it was the problem. — Rafael Estrada, Jul 09 '19 at 09:25

score 1 · Answer 4 · answered Jul 10 '19 at 08:44

1

You can read it from the official page: https://symfony.com/doc/current/reference/forms/types/form.html#attr

Just add: {'attr': {'attribute name': 'value'}}

As shown below

{{ form_widget(form.propertyName, {'attr': {'placeholder': 'name'} }) }}

answered Jul 10 '19 at 08:44

Muamar Ali

155
1
9

How include an attribute 'class' rendering a form

4 Answers4