CSS Symfony2 - FormBuilder - 向字段和输入添加一个类

Symfony2 - FormBuilder - add a class to the field and input

提问by insertusernamehere

I want to add a class to certain input or label elements in a Symfonyapplication.

我想向Symfony应用程序中的某些输入或标签元素添加一个类。

I can do something like this in a form on the Twig level:

我可以在 Twig 级别上以一种形式做这样的事情：

<div class="row">
    {{ form_label(form.subject) }}
    {{ form_widget(form.subject, { 'attr': {'class': 'c4'} }) }}
</div>

This works fine. But I have to setup and write out the whole template for every form manually. And I actually want to use:

这工作正常。但是我必须手动设置和写出每个表单的整个模板。我实际上想使用：

{{ form_widget(form) }}

So, I was thinking, how could I add a CSS class for a label or an input somewhere in the FormType:

所以，我在想，如何在以下位置为标签或输入添加 CSS 类FormType：

class SystemNotificationType extends AbstractType {
    public function buildForm(FormBuilder $builder, array $options) {
        $builder->add('subject', 'text', array(
            'label' => 'Subject'
        ));

I think this might be more useful, as you can configure the whole form in one place.

我认为这可能更有用，因为您可以在一个地方配置整个表单。

How can this be done?Maybe I'm thinking about it the wrong way.

如何才能做到这一点？也许我想错了。

回答by Pappa

You can do it like this:

你可以这样做：

class SystemNotificationType extends AbstractType {
    public function buildForm(FormBuilder $builder, array $options) {
        $builder->add('subject', 'text', array( 
            'label'  => 'Subject',
            'attr'   =>  array(
                'class'   => 'c4')
            )
        );
    }
}

回答by Visavì

The class of a field is part of the presentation layer of your application, so it is best to create a twig theme for your forms:

字段的类是应用程序表示层的一部分，因此最好为表单创建一个树枝主题：

Create a file fields.html.twigin Resources/views/Formof your Bundle and define how your form row will be formated, for example:

fields.html.twig在Resources/views/FormBundle 中创建一个文件并定义表单行的格式，例如：

{% block field_row %}
<div class="row">
    {{ form_errors(form) }}
    {{ form_label(form) }}
    {{ form_widget(form, { 'attr': {'class': 'c4'} }) }}
</div>
{% endblock field_row %}

If you want to customize only certain field, for example the field fieldNameof the form formName, customize the row:

如果您只想自定义某个字段，例如fieldName表单的字段formName，请自定义行：

{% block _formName_fieldName_row %}
<div class="row">
    {{ form_label(form) }}
    {{ form_errors(form) }}
    {{ form_widget(form, { 'attr': {'class': 'c4'} }) }}
</div>
{% endblock %}

EDIT: customize only the field:

编辑：仅自定义字段：

{% block _formName_fieldName_widget %}
    {% set type = type|default('text') %}
    <input type="{{ type }}" {{ block('widget_attributes') }} value="{{ value }}" class="c4" />
{% endblock %}

Then in all the form templates you want it use this theme add:

然后在您希望使用此主题的所有表单模板中添加：

{% form_theme form 'MyBundle:Form:fields.html.twig' %}

This is explained in depth in the cookbook

这在食谱中进行了深入解释

回答by mukulu

Form Theming

表单主题

---

---

Every part of how a form is rendered can be customized. You're free to change how each form "row" renders, change the markup used to render errors, or even customize how a textarea tag should be rendered. Nothing is off-limits, and different customizations can be used in different places.

表单呈现方式的每个部分都可以自定义。您可以自由更改每个表单“行”的呈现方式，更改用于呈现错误的标记，甚至自定义 textarea 标签的呈现方式。没有什么是禁止的，不同的地方可以使用不同的自定义。

Symfony uses templates to render each and every part of a form, such as label tags, input tags, error messages and everything else.

Symfony 使用模板来呈现表单的每个部分，例如标签标签、输入标签、错误消息和其他所有内容。

In Twig, each form "fragment" is represented by a Twig block. To customize any part of how a form renders, you just need to override the appropriate block.

在 Twig 中，每个表单“片段”都由一个 Twig 块表示。要自定义表单呈现方式的任何部分，您只需要覆盖相应的块。

In PHP, each form "fragment" is rendered via an individual template file. To customize any part of how a form renders, you just need to override the existing template by creating a new one.

在 PHP 中，每个表单“片段”都通过一个单独的模板文件呈现。要自定义表单呈现方式的任何部分，您只需通过创建一个新模板来覆盖现有模板。

To understand how this works, customize the form_row fragment and add a class attribute to the div element that surrounds each row. To do this, create a new template file that will store the new markup:

要了解其工作原理，请自定义 form_row 片段并将 class 属性添加到围绕每一行的 div 元素。为此，请创建一个新模板文件来存储新标记：

{# src/Acme/TaskBundle/Resources/views/Form/fields.html.twig #}
{% block form_row %}
{% spaceless %}
<div class="form_row">
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</div>
{% endspaceless %}
{% endblock form_row %}

The form_row form fragment is used when rendering most fields via the form_row function. To tell the form component to use your new form_row fragment defined above, add the following to the top of the template that renders the form:

form_row 表单片段在通过 form_row 函数渲染大多数字段时使用。要告诉表单组件使用上面定义的新 form_row 片段，请将以下内容添加到呈现表单的模板顶部：

{# src/Acme/TaskBundle/Resources/views/Default/new.html.twig #}
{% form_theme form 'AcmeTaskBundle:Form:fields.html.twig' %}
{% form_theme form 'AcmeTaskBundle:Form:fields.html.twig'
'AcmeTaskBundle:Form:fields2.html.twig' %}
{{ form(form) }}

The form_theme tag (in Twig) "imports" the fragments defined in the given template and uses them when rendering the form. In other words, when the form_row function is called later in this template, it will use the form_row block from your custom theme (instead of the default form_row block that ships with Symfony).

form_theme 标签（在 Twig 中）“导入”给定模板中定义的片段，并在呈现表单时使用它们。换句话说，当稍后在此模板中调用 form_row 函数时，它将使用自定义主题中的 form_row 块（而不是 Symfony 附带的默认 form_row 块）。

Your custom theme does not have to override all the blocks. When rendering a block which is not overridden in your custom theme, the theming engine will fall back to the global theme (defined at the bundle level).

您的自定义主题不必覆盖所有块。当渲染一个未被自定义主题覆盖的块时，主题引擎将回退到全局主题（在包级别定义）。

If several custom themes are provided they will be searched in the listed order before falling back to the global theme.

如果提供了多个自定义主题，将在返回到全局主题之前按列出的顺序搜索它们。

To customize any portion of a form, you just need to override the appropriate fragment. Knowing exactly which block or file to override is the subject of the next section.

要自定义表单的任何部分，您只需要覆盖相应的片段。确切知道要覆盖哪个块或文件是下一节的主题。

{# src/Acme/TaskBundle/Resources/views/Default/new.html.twig #}

{% form_theme form with 'AcmeTaskBundle:Form:fields.html.twig' %}

{% form_theme form with ['AcmeTaskBundle:Form:fields.html.twig',
'AcmeTaskBundle:Form:fields2.html.twig'] %}

For more information see the How to customize renderingin Symfony cookbook

有关更多信息，请参阅如何在Symfony 食谱中自定义渲染

Global Form Theming

全局表单主题

---

---

In the above example, you used the form_theme helper (in Twig) to "import" the custom form fragments into just that form. You can also tell Symfony to import form customizations across your entire project.

在上面的示例中，您使用 form_theme 助手（在 Twig 中）将自定义表单片段“导入”到该表单中。您还可以告诉 Symfony 在整个项目中导入表单自定义。

Twig

枝条

To automatically include the customized blocks from the fields.html.twig template created earlier in all templates, modify your application configuration file:

要在所有模板中自动包含之前创建的 fields.html.twig 模板中的自定义块，请修改您的应用程序配置文件：

# app/config/config.yml
  twig:
    form:
      resources:
        - 'AcmeTaskBundle:Form:fields.html.twig'

Any blocks inside the fields.html.twig template are now used globally to define form output.

fields.html.twig 模板中的任何块现在都用于全局定义表单输出。