Как применить стиль к регистрационной форме в FOSUserBundle

Я использую 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') }}" />

But how about, for example, the Registration Form? In that case, this is all we get in the bundle:

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

{{ form_widget(форма) }}

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

</div></form>

[пожалуйста, обратите внимание, что stackoverflow неправильно анализирует этот последний фрагмент кода и не корректирует его правильно]

Как видите, вся форма исходит из тега {{ form_widget(form) }}, и это все, что нам нужно для рендеринга формы.

Вопрос: как и где я могу изменить эту форму, чтобы она соответствовала моим стилям, ширине, цветам и т. д.?


php symfony fosuserbundle
person ElPiter    schedule 07.08.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

RegistrationForm создан с помощью компонента формы Symfony2, поэтому все настройки должны выполняться с его помощью.

Вот очень хорошая запись в поваренной книге по этой теме.

Очень простой пример:

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

{{ form_rest(form) }}
person Inoryy    schedule 07.08.2012

arrow_upward
0
arrow_downward

Вы должны переопределить шаблоны пакетов (в данном случае FOSUser) и выполнить все настройки в новом шаблоне, включая обработку параметров рендеринга компонента формы, как это было предложено @Inorry. Объяснение можно найти в документации FOS здесь.

В целом достаточно следующего:

  1. Переопределите layout.html.twig из пакета, создав свой собственный под app/Resources/FOSUserBundle/views/.
  2. Переопределите любые дополнительные шаблоны, которые вы хотите настроить, используя тот же шаблон: foo.html.twig на app/Resources/FOSUserBundle/views/foo.html.twig.

  3. Например, если вы хотите настроить форму входа с помощью 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 %}

  4. Будьте осторожны, чтобы сохранить структуру представлений под пакетом. Именно поэтому шаблон входа в систему был создан в папке Security. Помните: структура пакета должна сохраняться для каждого пользовательского шаблона.

  5. Также будьте осторожны при использовании {% extends "FOSUserBundle::layout.html.twig" %}, так как исходный шаблон маскируется вашим пользовательским шаблоном (я бы проверил это в более новых версиях Symfony на случай, если основное предположение не сработает).
person adapar    schedule 05.05.2015