Being event Lazier with form() and button¶

There’s an even easier way to render the form, and while I don’t love it, I want you to see it. Head to the Forms Chapter of the docs. Under the Rendering the Form section, it renders it with just one line:

{{ form(form) }}

This displays the fields, the HTML form tag and even a submit button, if you configure one. If you scroll up, you’ll see that the form has a save field that’s a submit type:

$form = $this->createFormBuilder($task)
    // ...
    ->add('save', 'submit')
    ->getForm();

I’m happy rendering the HTML form tags and the submit buttons myself, but you will see this rendering syntax, and I don’t want you to be confused. It’s all basically doing the same thing.

Rendering the Form one Field at a Time¶

In reality, rendering the form all at once probably won’t be flexible enough in most cases. To render each field individually, use the form_row function on each of your fields:

{# src/Yoda/UserBundle/Resources/views/Register/register.html.twig #}
{# ... #}

<form action="{{ path('user_register') }}" method="POST">
    {{ form_row(form.username) }}
    {{ form_row(form.email) }}
    {{ form_row(form.password) }}

    <input type="submit" class="btn btn-primary pull-right" value="Register!" />
</form>

Refresh the page and inspect the form. Each field row is surrounded by a div and contains the label and input:

<div>
    <label for="form_username" class="required">Username</label>
    <input type="text" id="form_username" name="form[username]" required="required" />
</div>
<!-- ... -->

Using form_widget, form_label and form_errors¶

In the next screencast, we’ll learn how to customize how a field row is rendered. But even now, we can take more control by using the form_label, form_widget and form_errors functions individually. Let’s try it on just the username field:

{# src/Yoda/UserBundle/Resources/views/Register/register.html.twig #}
{# ... #}

<form action="{{ path('user_register') }}" method="POST">
    <div class="awesome-username-wrapper">
        {{ form_errors(form.username) }}
        {{ form_label(form.username) }}
        {{ form_widget(form.username) }}
    </div>

    {{ form_row(form.email) }}
    {{ form_row(form.password) }}

    <input type="submit" class="btn btn-primary pull-right" value="Register!" />
</form>

form_row just renders these 3 parts automatically, so this is basically the same as before. I usually try to use form_row whenever possible, so let’s change the username back to use this.

Don’t forget form_errors and form_rest!¶

Apart from the fields themselves, there are two other things that should be in every form. First, make sure you call form_errors on the entire form object:

{# src/Yoda/UserBundle/Resources/views/Register/register.html.twig #}
{# ... #}

<form action="{{ path('user_register') }}" method="POST">
    {{ form_errors(form) }}

    {{ form_row(form.username) }}
    {{ form_row(form.email) }}
    {{ form_row(form.password) }}

    <input type="submit" class="btn btn-primary pull-right" value="Register!" />
</form>

Most errors appear next to the field they belong to. But in some cases, you might have a “global” error that doesn’t apply to any one specific field. It’s not common, but this takes care of rendering those.

Next, add form_rest. It renders any fields that you forgot:

{# src/Yoda/UserBundle/Resources/views/Register/register.html.twig #}
{# ... #}

<form action="{{ path('user_register') }}" method="POST">
    {{ form_errors(form) }}

    {{ form_row(form.username) }}
    {{ form_row(form.email) }}
    {{ form_row(form.password) }}

    {{ form_rest(form) }}

    <input type="submit" class="btn btn-primary pull-right" value="Register!" />
</form>

In addition to that, form_rest is really handy because it renders any hidden fields automatically.

All forms have a hidden “token” field by default to protect against CSRF attacks. With `form_rest`, you never have to worry or think about hidden fields.

We talk more about these functions in future episodes, but under the reference section of Symfony’s documentation, there’s a page called Twig Template Form Function and Variable Reference that mentions all of these functions and how to use them.