如何在FOSUserBundle中註冊表單的樣式

我正在使用Symfony2和FOSUserBundle。如何在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>

[請注意，計算器不解析正確這最後一塊代碼，它不正確運行]

正如你所看到的，所有的表單都來自標記{{form_widget（form）}}，這就是我們必須呈現的表單。

問題：如何以及在哪裏可以更改該窗體以適應我的風格，寬度，顏色等等？

來源

2012-08-07 ElPiter

RegistrationForm是使用Symfony2 Form Component構建的，所以所有的定製都應該使用它。

這是關於此主題的非常好的cookbook entry。

一個很簡單的例子：

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

{{ form_rest(form) }}

來源

2012-08-07 09:32:40 Inoryy

應覆蓋捆模板（FOSUser在這種情況下），並在新的模板所有的定製，包括處理表單組件渲染選項通過@Inorry的建議。可以在FOS文檔here中找到解釋。

一般來說，以下就足夠了：

覆蓋layout.html.twig從app/Resources/FOSUserBundle/views/下創建自己的包。
使用相同模式覆蓋要自定義的任何其他模板：foo.html.twig by app/Resources/FOSUserBundle/views/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的新版本中檢查此模板）。

來源

2015-05-05 02:58:46 adapar

如何在FOSUserBundle中註冊表單的樣式

回答

相關問題