Как настроить отображение формы
Дата обновления перевода 2024-07-19
Как настроить отображение формы
Symfony предоставляет вам широкий выбор способов настройки отображения формы. В этом руководстве вы узнаете, как настроить одно или несколько полей ваших форм. Если вам нужно одинаково настроить все ваши формы, лучшу создайте тему формы или используйте любую встроенную тему, вроде темы Bootstrap для форм Symfony
Функции отображения формы
Одного вызова функции Twig form() достаточно для того, чтобы отобразить целую форму, включая все ее поля и сообщения об ошибках:
1 2 3 4
{# форма - это переменная, которая передается из контроллера и создается
$this->render('...', ['form' => $form])
or $this->render('...', ['form' => $form->createView()]) #}
{{ form(form) }}
Следующий шаг - использовать функции Twig form_start(), form_end(), form_errors() и form_row() для отображения разных частей формы, чтобы вы могли настроить их, добавляя HTML элементы и атрибуты:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
{{ form_start(form) }}
<div class="my-custom-class-for-errors">
{{ form_errors(form) }}
</div>
<div class="row">
<div class="col">
{{ form_row(form.task) }}
</div>
<div class="col" id="some-custom-id">
{{ form_row(form.dueDate) }}
</div>
</div>
{{ form_end(form) }}
Функция form_row()
выводит все содержание полей, включая ярлыки, сообщение помощи,
элементы HTML и сообщения об ошибках. Все это можно в дальнейшем настроить используя другие
функции Twig, как показано в следующей диаграмме:
Функции Twig form_label(), form_widget(), form_help() и form_errors() дают вам полный контроль над тем, как отображается каждое поле формы, поэтому вы можете полностью их настроить:
1 2 3 4 5 6 7 8 9 10
<div class="form-control">
<i class="fa fa-calendar"></i> {{ form_label(form.dueDate) }}
{{ form_widget(form.dueDate) }}
<small>{{ form_help(form.dueDate) }}</small>
<div class="form-error">
{{ form_errors(form.dueDate) }}
</div>
</div>
Caution
Если вы отображаете каждое поле вручную, убедитесь, что вы не забыли поле
_token
, которое автоматически добавляется для CSRF-защиты.
Вы также можете использовать {{ form_rest(form) }}
(рекомендовано) для
отображения любых полей, которые не отображаются вручную. См.
документацию form_rest() ниже, чтобы
узнать больше.
Note
Позже в этой статье вы можете найти полный справочник этих функций Twig с большим количеством примеров использования.
Помощники полей формы
Помощники form_*()
, показанные в предыдущем разделе, отображают различные части
поля формы, включая все его HTML-элементы. Некоторые разработчики и дизайнеры
борются с таким поведением, поскольку оно скрывает все HTML-элементы в темах формы,
которые не так просто настроить.
Поэтому Symfony предоставляет другие помощники формы Twig, которые отображают значение каждой части поля формы без добавления HTML вокруг него:
field_name()
field_value()
field_label()
field_help()
field_errors()
field_choices()
(итератор для полей выбора; например, для<select>
)
При использовании этих помощников, вы должны писать всё HTML содержание для
всех полей формы, чтобы вам больше не нужно было разбираться с темами формы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<input
name="{{ field_name(form.username) }}"
value="{{ field_value(form.username) }}"
placeholder="{{ field_label(form.username) }}"
class="form-control"
>
<select name="{{ field_name(form.country) }}" class="form-control">
<option value="">{{ field_label(form.country) }}</option>
{% for label, value in field_choices(form.country) %}
<option value="{{ value }}">{{ label }}</option>
{% endfor %}
</select>
Переменные отображения формы
Некоторые из функций Twig, упомянутые в предыдущем разделе, позволяют передавать
переменные для конфигурации их поведения. К примеру, функция form_label()
позволяет вам определять пользовательский ярлык для переопределения того, который
определен в форме:
1
{{ form_label(form.task, 'My Custom Task Label') }}
Некоторые типы полей форм имеют дополнительные опции
отображения, которые можно передать виджету. Эти опции задокументированы для каждого типа,
но одной общей опцией является attr
, которая позволяет вам изменять атрибуты HTML
в элементе формы. Следующее добавит CSS-класс task_field
к отображенному полю ввода
текста:
1
{{ form_widget(form.task, {'attr': {'class': 'task_field'}}) }}
Note
Если вы отображаете сразу всю форму (или всю встроенную форму), аргумент
variables
будет применен только к самой форме, но не к ее дочерям. Другими
словами, следующее не передаст атрибут класса "foo" всем дочерним полям формы:
1 2
{# **не** работает - переменные не рекурсивны #}
{{ form_widget(form, { 'attr': {'class': 'foo'} }) }}
Если вам нужно отобразить поля формы "вручную", вы можете получить доступ к
отдельным значениям полей (например, id
, name
и label
), используя
ее свойство using vars
. Например, чтобы получить id
:
1
{{ form.task.vars.id }}
Note
Позже в этой статье вы можете найти полный справочник этих функций Twig c примерами использования.
Темы формы
Функции и переменные Twig, показанные в предыдущих разделах, могут помочь вам настроить одно или более полей ваших форм. Однако, эта настройка не может быть применена к другим формам вашего приложения.
Если вы хотите настроить все формы одинаково (например, чтобы адаптировать сгенерированный HTML-код к CSS-фреймворку, используемому в вашем приложении), вы должны создать тему формы.
Справочник функций и переменных формы
Функции
form(form_view, variables)
Отображает HTML полной формы.
1 2
{# отобразить форму и изменить метод отправки #}
{{ form(form, {'method': 'GET'}) }}
Вы в основном будете использовать этого помощника для прототипов, или если вы используете пользовательские темы формы. Если вам нужно больше гибкости в отображении формы, вам лучше стоит использовать другие помощники для отображения отдельных частей формы:
1 2 3 4 5 6 7 8
{{ form_start(form) }}
{{ form_errors(form) }}
{{ form_row(form.name) }}
{{ form_row(form.dueDate) }}
{{ form_row(form.submit, { 'label': 'Submit me' }) }}
{{ form_end(form) }}
form_start(form_view, variables)
Отображает стартовый тег формы. Этот помощник заботится о выводе сконфигурированного
метода и целевого действия формы. Он также добавит правильное свойство enctype
,
если форма содержит поля загрузки.
1 2
{# отобразить стартовый тег и изменить метод отправки #}
{{ form_start(form, {'method': 'GET'}) }}
form_end(form_view, variables)
Отображает конечный тег формы.
1
{{ form_end(form) }}
Этот помощний также выводит form_rest()
(что объясняется позже в этой статье),
кроме случаев, когда вы устанавливаете render_rest
как false:
1 2
{# не отображать неотображаемые поля #}
{{ form_end(form, {render_rest: false}) }}
form_label(form_view, label, variables)
Отображает ярлык для заданного поля. Вы можете по желанию передать определенный ярлык, который вы хотите отобразить в качестве второго аргумента.
1 2 3 4 5 6 7 8 9
{{ form_label(form.name) }}
{# Два следующих синтаксиса эквивалентны #}
{{ form_label(form.name, 'Your Name', {'label_attr': {'class': 'foo'}}) }}
{{ form_label(form.name, null, {
'label': 'Your name',
'label_attr': {'class': 'foo'}
}) }}
См. "Справочник функций и переменных форм шаблонов Twig", чтобы узнать об аргументе variables
.
form_errors(form_view)
Отображает любые ошибки для заданного поля.
1 2 3 4 5
{# отобразить только сообщения об ошибках, cвязанных с этим полем #}
{{ form_errors(form.name) }}
{# отобразить любые "глобальные" ошибки, н связанные ни с каким полем формы #}
{{ form_errors(form) }}
Caution
В теме формы Bootstrap 4, form_errors()
уже включена в form_label()
.
Прочтите больше об этом в
документации темы Bootstrap 4 .
form_widget(form_view, variables)
Отображает HTML-виджет заданного поля. Если вы примените это ко всей форме или коллекции полей, каждая низлежащая строка формы будет отображена.
1 2
{# отобразить виджет, но добавить к нему класс "foo" #}
{{ form_widget(form.name, {'attr': {'class': 'foo'}}) }}
Второй аргументform_widget()
- это массив переменных. Наиболее распространенной
переменной является attr
, которая представляет собой массив HTML-атрибутов, применяемых
к HTML-виджету. В некоторых случаях, определенные типы также имеют другие опции, связанные
с шаблонами, которые можно передать. Они обсуждаются на основании каждого типа. attributes
не применяются рекурсивно к дочерним полям, если вы отображете несколько полей сразу
(например, form_widget(form)
).
См. "Справочник функций и переменных форм шаблонов Twig", чтобы узнать больше об аргументе variables
.
form_row(form_view, variables)
Отображает "строку" заданного поля, которая является комбинацией ярлыка, ошибок, помощи и виджета поля.
1 2
{# отобразить строку поля, но отобразить ярлык с текстом "foo" #}
{{ form_row(form.name, {'label': 'foo'}) }}
Второй аргумент form_row()
- это массив переменных. Шаблоны, предоставленные
Symfony позволяют переопределять ярлык только так, как показано в примере выше.
См. "Справочник функций и переменных форм шаблонов Twig", чтобы узнать об аргументе variables
.
form_rest(form_view, variables)
Это отображает все поля, которые еще не были отображены для заданной формы. Хорошей идеей будет всегда иметь эту функцию где-то внутри вашей формы, так как она будет отображать для вас спрятанные поля, и облегчит обнаружение полей, которые вы забыли отобразить (так как она будет отображать поле для вас).
1
{{ form_rest(form) }}
form_parent(form_view)
Возвращает просмотр родительской формы или null
, если просмотр формы уже
является начальной формой. Исползование этой функции должно быть в приоритете над
доступом к родительской форме с использованием form.parent
. Последнее будет
производить разные результаты, если дочерняя форма называется parent
.
Тесты
Тесты могут быть проведены используя оператор is
в Twig, для создания
условия. Прочтите документацию Twig, чтобы узнать больше информации.
selectedchoice(selected_value)
Этот тест проверит равен ли текущий выбор selected_value
или находится
ли текущий выбор в массиве (когда selected_value
является массивом).
1
<option {% if choice is selectedchoice(value) %}selected="selected"{% endif %}>
rootform
Этот тест проверит, имеет ли текущий form
родительский просмотр формы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
{# НЕ ДЕЛАЙТЕ ТАК: эта простая проверка не видит различий между формой,
имеющей родительский просмотр формы, и формой, определяющей встроенное
поле формы под названием 'parent' #}
{% if form.parent is null %}
{{ form_errors(form) }}
{% endif %}
{# ДЕЛАЙТЕ ТАК: на эту проверку всегда можно положиться, даже если форма определяет
поле под названием 'parent' #}
{% if form is rootform %}
{{ form_errors(form) }}
{% endif %}
Справочник переменных формы
Следующие переменные распространены для каждого типа поля. Определенные типы полей могут определять еще больше переменных, а некоторые переменные здесь на самом деле применяются только к определенным типам. Чтобы узнать конкретные переменные, доступные для каждого типа, просмотрите код шаблонов, используемых вашей темой формы.
Предполагая, что у вас есть переменная form
в вашем шаблоне, и вы хотите сослаться на
переменные в поле name
, доступ к переменным можно получить используя публичное свойство
vars
в объекте FormView:
1 2 3 4
<label for="{{ form.name.vars.id }}"
class="{{ form.name.vars.required ? 'required' }}">
{{ form.name.vars.label }}
</label>
?????????? | ?????????? |
---|---|
action |
???????? ??????? ?????. |
attr |
?????? ???????? ????????, ??????? ????? ????????? ? ???? HTML-????????? ????. |
block_prefixes |
?????? ???? ???? ???????????? ?????. |
cache_key |
?????????? ????, ??????? ???????????? ??? ???????????. |
compound |
???????? ?? ???? ?? ????? ???? ?????????? ???????? ????? (????????, ????
choice , ??????? ?? ????? ???? ???????? ??????? ???????). |
data |
??????????????? ?????? ????. |
disabled |
???? true , ? ???? ?????????? disabled="disabled" . |
errors |
?????? ????? ??????, c???????? ? ???? ?????????? ????? (????????, form.title.errors ).
????????, ??? ?? ?? ?????? ???????????? form.errors ??? ??????????? ?????????? ?????,
??? ??? ??? ?????? ?????? "??????????" ??????: ????????? ????????? ???? ????? ????? ??????.
?????? ????? ??????????? ????? valid . |
form |
??????? ????????? FormView . |
full_name |
HTML-??????? name ??? ???????????. |
help |
????????? ??????, ??????? ????? ??????????. |
id |
HTML-??????? id ??? ???????????. |
label |
????? ??????, ??????? ????? ?????????. |
label_attr |
?????? ???????? ????????, ??????? ????? ????????? ? ???? HTML-????????? ? ??????. |
method |
????? ??????? ????? (POST, GET, ? ?.?.). |
multipart |
???? true , form_enctype ????????? enctype="multipart/form-data" . |
name |
??? ???? (????????, title ) - ?? ?? HTML-??????? name , ??????? full_name . |
required |
???? true , ?????? required ??????????? ? ????, ????? ???????????? ?????????
HTML-5. ?????????????, ? ?????? ??????????? ????? required . |
submitted |
?????????? true ??? false ? ??????????? ?? ????, ?????????? ?? ??? ?????. |
translation_domain |
????? ????????? ??? ???? ?????. |
valid |
?????????? true ??? false ? ??????????? ?? ????, ??????? ?? ??? ?????. |
value |
????????, ??????? ????? ??????????? ??? ??????????? (???? ????? HTML-??????? value ).
????????? ?????? ? ???????? ??????????? ?????. |
Tip
За кулисами, эти переменные доступны объекту FormView
вашей формы, когда
компонент Форма вызывает buildView()
и finishView()
на каждом "узле"
вашего древа формы. Чтобы увидеть, какие переменные "просмотра" имеет конкретное
поле, найдите исходные код поля формы (и его родительские поля), и поищите две
вышенаписанные функции.