Symfony：用 CSS 格式化表格的简单方法？答案

【问题标题】：Symfony : easy way to format FORMS with CSS?Symfony：用 CSS 格式化表格的简单方法？
【发布时间】：2016-09-10 00:01:17
【问题描述】：

我们正在使用 Symfony 2 构建一个网站。我们生成一个唯一的 URL 并通过电子邮件将其发送给忘记密码的用户，以便他们重置密码。

我们正在构建一个简单的表单来重置密码。我们有两个标签（“输入您的新密码”和“再次输入您的新密码”），每个标签旁边都有一个文本框。

我们希望文本框相互对齐。

懒惰的解决方案是找出两个相同长度的字符串（！）

但我本来想用 CSS 格式化它们或将它们放在一个表格中......

Symfony 的形式有可能吗？我阅读了有关自定义模板的文档，但是当我们尝试 Symfony 文档提出的解决方案时，小部件（文本框）没有呈现......

以下是问题的一些图片：

Crooked textboxes

Lazy solution

这是我认为应该进行格式化的树枝的代码（！）

{% block blockPrincipal_mp %}
<h1>{{ titre }}</h1>
{{ form_start(form) }}


<div class="containerForm">
    <div class="error">
        {{ form_errors(form) }}
    </div>
    {{ form_rest(form) }}





    {{ form_end(form) }}
    {% for flashMessage in app.session.flashbag.get('success') %}
        <div class="confirm"><p>    {{ flashMessage }}</p></div>
    {% endfor %}
        </div>
{% endblock %}

【问题讨论】：

您有自定义控制器代码还是使用 FOSUserBundle？

标签： symfony symfony-forms

【解决方案1】：

您可以单独渲染表单的所有不同元素，而不是像您在示例中那样使用form_rest(form) 一次性渲染所有元素。 form_rest() 将渲染尚未渲染的任何内容。到目前为止，所有呈现的都是错误。

我不知道您的表单属性的名称是什么，但这里有一个示例：

{{ form_start(form) }}

    <div class="form_errors">{{ form_errors(form) }}</div>

    {# output all pieces of the username element individually #}
    <div class="form_label">{{ form_label(form.username) }}</div>
    <div class="form_input">{{ form_widget(form.username) }}</div>
    <div class="form_errors">{{ form_errors(form.username) }}</div>

    {# output all pieces of the password element individually #}
    <div class="form_label">{{ form_label(form.password) }}</div>
    <div class="form_input">{{ form_widget(form.password) }}</div>
    <div class="form_errors">{{ form_errors(form.password) }}</div>

    {{ form_rest(form) }}

{{ form_end(form) }}

通过这种方式，您可以控制每个表单元素周围的 HTML 包装器。

请注意，您还可以通过以下方式输出用户名和密码字段...

{{ form_row(form.username) }} {{ form_row(form.password) }}

...它仍然会输出标签、小部件和错误，但会使用在树枝模板中定义的表单类型的默认布局。因此，如果您单独进行这些部件的渲染，您可以更好地控制它们。

这对于自定义表单和自定义模板非常有用，但是如果您希望通过扩展表单字段模板来更好地控制单个表单元素在整个站点中的呈现方式，您也可以覆盖默认表单元素的布局。

https://symfony.com/doc/current/form/form_customization.html

【讨论】：

但现在每个标签的末尾（标签和文本框之间）都有一个红色星号 (*)。似乎无法让它们消失...... :(
这可能是因为您的默认输入字段模板对必填字段使用了红色星号。如果您想覆盖全局显示必填字段的方式，您可以根据我链接到的 symfony 指南创建 fields.html.twig 模板覆盖并更改其显示方式。或者，如果您需要使其不需要，请在表单构建器中为这些字段设置 'required'=>false。

【解决方案2】：

RepeatedType字段可以单独显示：

{{ form_row(form.password.first) }}
{{ form_row(form.password.second) }}

或更多控制：

{{ form_label(form.password.first) }}
{{ form_widget(form.password.first) }}

{{ form_label(form.password.second) }}
{{ form_widget(form.password.second) }}

【讨论】：