>我正在使用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">
{{ form_widget(form( }}
<input type="submit" value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}" />
</div></form>
[请注意,StackOverflow 没有正确解析最后一段代码,也没有正确修饰它]
如您所见,所有表单都来自标签 {{ form_widget(form( }},这就是我们渲染表单的全部内容。
问题:我如何以及在哪里可以更改该形式以适应我的样式、宽度、颜色等......?
RegistrationForm 是用 Symfony2 Form 组件构建的,所以所有的定制都应该用它完成。
这是关于这个主题的一个非常好的食谱条目。
一个非常简单的例子:
<div class="pull-left input">
{{ form_label(form.username) }}
{{ form_widget(form.username) }}
</div>
{{ form_rest(form) }}
您应该覆盖捆绑包模板(在本例中为 FOSUser(并在新模板中进行所有自定义,包括按照 @Inorry 的建议处理表单组件呈现选项。有关说明,请参阅此处的 FOS 文档。
一般来说,以下内容就足够了:
- 通过在
app/Resources/FOSUserBundle/views/
下创建自己的layout.html.twig
来覆盖捆绑包中的。 - 覆盖要使用相同的模式自定义的任何其他模板:按
app/Resources/FOSUserBundle/views/foo.html.twig
foo.html.twig
。 -
例如,如果要使用引导程序自定义登录表单,则可以创建
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 中检查这一点,以防基本假设失败(。