php - 如何将样式应用于 FOSUserBundle 中的注册表单

Question

我正在使用 Symfony2 和 FOSUserBundle。

这个问题可以扩展到 FOSUserBundle 中的任何其他捆绑形式。

由于它就在捆绑包中，因此很容易使用 FOSUserBundle 中的登录表单。在这种情况下，您会看到完整的表格，您只需“复制”或在其他任何地方使用它并应用您想要的样式。这是它的样子：

<form action="{{ path("fos_user_security_check") }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" />
<label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
<input type="password" id="password" name="_password" />
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>
<input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />

但是，例如，注册表如何？在这种情况下，这就是我们在捆绑包中得到的全部内容：

<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">

<input type="submit" value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}" />

</div></form>

[请注意，stackoverflow 没有正确解析最后一段代码，也没有正确地对其进行美化]

如您所见，所有表单都来自标签 {{ form_widget(form) }}，这就是我们渲染表单所需要的全部内容。

问题：如何以及在哪里可以更改该表单以适合我的样式、宽度、颜色等......？

score 3 · Accepted Answer

RegistrationForm 是用 Symfony2 表单组件构建的，所以所有的定制都应该用它来完成。

这是关于这个主题的一个非常好的食谱条目。

一个非常简单的例子：

<div class="pull-left input">
    {{ form_label(form.username) }}
    {{ form_widget(form.username) }}
</div> 

{{ form_rest(form) }}

score 0 · Accepted Answer

您应该覆盖捆绑包模板（在这种情况下为 FOSUser）并在新模板中进行所有自定义，包括按照@Inorry 的建议处理表单组件呈现选项。可以在此处的 FOS 文档中找到解释。

一般来说，以下内容就足够了：

通过layout.html.twig在app/Resources/FOSUserBundle/views/.
使用相同的模式覆盖您要自定义的任何其他模板：foo.html.twigby app/Resources/FOSUserBundle/views/foo.html.twig。

例如，如果您想使用 Bootstrap 自定义登录表单，那么您可以创建app/Resources/FOSUserBundle/views/Security/login.html.twig：

{% extends "FOSUserBundle::layout.html.twig" %}

{% trans_default_domain 'FOSUserBundle' %}

{% block title %}Login{% endblock %}

{% block fos_user_content %}
{% if error %}
    <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}

<form action="{{ path("fos_user_security_check") }}" method="post">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
    <div class="form-group">
        <label for="username">{{ 'security.login.username'|trans }}</label>
        <input class="form-control" type="text" id="username" name="_username" value="{{ last_username }}" required="required" />
    </div>
    <div class="form-group">
        <label for="password">{{ 'security.login.password'|trans }}</label>
        <input class="form-control" type="password" id="password" name="_password" required="required" />
    </div>
    <div class="form-group">
        <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
        <label for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
    </div>

    <div class="form-group">
        <input class="btn btn-default" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />
    </div>
</form>
{% endblock fos_user_content %}

请注意将视图的结构保留在捆绑包下。Security这就是在文件夹下创建登录模板的原因。请记住：必须为每个自定义模板保留包中的结构。
还要小心使用{% extends "FOSUserBundle::layout.html.twig" %}，因为原始模板被您的自定义模板所掩盖（如果基本假设失败，我会在较新版本的 Symfony 中检查这一点）。

php - 如何将样式应用于 FOSUserBundle 中的注册表单

2 回答 2

Related

Reference