Symfony:用CSS格式化FORMS的简单方法?

时间:2016-09-10 00:01:18

标签: symfony symfony-forms

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

我们正在构建一个简单的表单来重置密码。我们有两个标签('输入新密码'再次输入新密码'),每个标签旁边都有一个文本框。

我们希望文本框彼此对齐。

懒惰的解决方案是找出两个长度相同的字符串(!)

但我本想用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 %} 

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

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) }}