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）}}，这就是我们必须呈现表单的所有内容。

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

Answer 1

RegistrationForm是使用Symfony2表单组件构建的，因此所有自定义都应该使用它。

这个主题非常好cookbook entry。

一个非常简单的例子：

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

{{ form_rest(form) }}

Answer 2

您应该覆盖捆绑模板（在本例中为FOSUser）并在新模板中进行所有自定义，包括按@Inorry的建议处理表单组件渲染选项。可以在FOS文档here中找到解释。

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

通过在layout.html.twig。

app/Resources/FOSUserBundle/views/

foo.html.twig

使用相同的模式覆盖您要自定义的所有其他模板：app/Resources/FOSUserBundle/views/foo.html.twig app/Resources/FOSUserBundle/views/Security/login.html.twig。
例如，如果您想使用Bootstrap自定义登录表单，则创建{% 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" %}文件夹下创建登录模板的原因。请记住：每个自定义模板都必须保留包中的结构。
请注意使用while { ... if ($variable === false) { break; } }，因为原始模板会被您的自定义模板屏蔽（如果基本假设失败，我会在较新版本的Symfony中进行检查）。

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

2 个答案:

如何将样式应用于FOSU​​serBundle中的注册表单

2 个答案:

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