Cover of the book Symfony 5: The Fast Track

Symfony 5: The Fast Track is the best book to learn modern Symfony development, from zero to production. +300 pages showcasing Symfony with Docker, APIs, queues & async tasks, Webpack, SPAs, etc.

  1. Home
  2. Documentation
  3. Form
  4. How to Control the Rendering of a Form
WARNING: You are browsing the documentation for Symfony 2.7 which is not maintained anymore. Consider upgrading your projects to Symfony 5.2.

How to Control the Rendering of a Form

2.7 version
Unmaintained
2.7 2.8 3.0 3.1 3.2 3.3 3.4 4.0

How to Control the Rendering of a Form

So far, you’ve seen how an entire form can be rendered with just one line of code. Of course, you’ll usually need much more flexibility when rendering:

  • Twig
    1
2
3
4
5
6
7
    {# app/Resources/views/default/new.html.twig #}
{{ form_start(form) }}
    {{ form_errors(form) }}

    {{ form_row(form.task) }}
    {{ form_row(form.dueDate) }}
{{ form_end(form) }}
  • PHP
    1
2
3
4
5
6
7
    <!-- app/Resources/views/default/new.html.php -->
<?php echo $view['form']->start($form) ?>
    <?php echo $view['form']->errors($form) ?>

    <?php echo $view['form']->row($form['task']) ?>
    <?php echo $view['form']->row($form['dueDate']) ?>
<?php echo $view['form']->end($form) ?>

You already know the form_start() and form_end() functions, but what do the other functions do?

form_errors(form)
Renders any errors global to the whole form (field-specific errors are displayed next to each field).
form_row(form.dueDate)
Renders the label, any errors, and the HTML form widget for the given field (e.g. dueDate) inside, by default, a div element.

The majority of the work is done by the form_row() helper, which renders the label, errors and HTML form widget of each field inside a div tag by default. In the How to Work with Form Themes section, you’ll learn how the form_row() output can be customized on many different levels.

Tip

You can access the current data of your form via form.vars.value:

  • Twig
    1
    {{ form.vars.value.task }}
  • PHP
    1
    <?php echo $form->vars['value']->getTask() ?>

Rendering each Field by Hand

The form_row() helper is great because you can very quickly render each field of your form (and the markup used for the “row” can be customized as well). But since life isn’t always so simple, you can also render each field entirely by hand. The end-product of the following is the same as when you used the form_row() helper:

  • Twig
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    {{ form_start(form) }}
    {{ form_errors(form) }}

    <div>
        {{ form_label(form.task) }}
        {{ form_errors(form.task) }}
        {{ form_widget(form.task) }}
    </div>

    <div>
        {{ form_label(form.dueDate) }}
        {{ form_errors(form.dueDate) }}
        {{ form_widget(form.dueDate) }}
    </div>

    <div>
        {{ form_widget(form.save) }}
    </div>

{{ form_end(form) }}
  • PHP
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
    <?php echo $view['form']->start($form) ?>

    <?php echo $view['form']->errors($form) ?>

    <div>
        <?php echo $view['form']->label($form['task']) ?>
        <?php echo $view['form']->errors($form['task']) ?>
        <?php echo $view['form']->widget($form['task']) ?>
    </div>

    <div>
        <?php echo $view['form']->label($form['dueDate']) ?>
        <?php echo $view['form']->errors($form['dueDate']) ?>
        <?php echo $view['form']->widget($form['dueDate']) ?>
    </div>

    <div>
        <?php echo $view['form']->widget($form['save']) ?>
    </div>

<?php echo $view['form']->end($form) ?>

If the auto-generated label for a field isn’t quite right, you can explicitly specify it:

  • Twig
    1
    {{ form_label(form.task, 'Task Description') }}
  • PHP
    1
    <?php echo $view['form']->label($form['task'], 'Task Description') ?>

Some field types have additional rendering options that can be passed to the widget. These options are documented with each type, but one common option is attr, which allows you to modify attributes on the form element. The following would add the task_field class to the rendered input text field:

  • Twig
    1
    {{ form_widget(form.task, {'attr': {'class': 'task_field'}}) }}
  • PHP
    1
2
3
    <?php echo $view['form']->widget($form['task'], array(
    'attr' => array('class' => 'task_field'),
)) ?>

If you need to render form fields “by hand” then you can access individual values for fields such as the id, name and label. For example to get the id:

  • Twig
    1
    {{ form.task.vars.id }}
  • PHP
    1
    <?php echo $form['task']->vars['id']?>

To get the value used for the form field’s name attribute you need to use the full_name value:

  • Twig
    1
    {{ form.task.vars.full_name }}
  • PHP
    1
    <?php echo $form['task']->vars['full_name'] ?>

Twig Template Function Reference

If you’re using Twig, a full reference of the form rendering functions is available in the reference manual. Read this to know everything about the helpers available and the options that can be used with each.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.