---
title: "Form.button ViewHelper <f:form.button>"
manual: "Fluid ViewHelper Reference"
version: "13.4"
permalink: "https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-form-button@13.4"
source: "Global/Form/Button.rst"
modified: "2026-09-17T09:07:45+00:00"
---

# Form.button ViewHelper `<f:form.button>`

This ViewHelper creates a `<button>` HTML element within the
[Form ViewHelper \<f:form>](https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-form@13.4).

Unlike the [Form.submit ViewHelper \<f:form.submit>](https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-form-submit@13.4),
the Form.button ViewHelper can contain HTML content — for example, an icon.

By using the [type](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-form-buttonviewhelper-type@13.4)
argument, you can create button types other than `submit`, such as `button`
or `reset`.

Go to the source code of this ViewHelper: [Form\\ButtonViewHelper.php (GitHub)](https://github.com/TYPO3/typo3/blob/main/typo3/sysext/fluid/Classes/ViewHelpers/Form/ButtonViewHelper.php).

**Table of contents**

-   [A Fluid form with a submit button containing an icon](https://docs.typo3.org/permalink/t3viewhelper:a-fluid-form-with-a-submit-button-containing-an-icon@13.4)
-   [A Fluid form with multiple buttons of different types](https://docs.typo3.org/permalink/t3viewhelper:a-fluid-form-with-multiple-buttons-of-different-types@13.4)
-   [A button with additional HTML5 attributes](https://docs.typo3.org/permalink/t3viewhelper:a-button-with-additional-html5-attributes@13.4)
-   [A button with accessibility attributes](https://docs.typo3.org/permalink/t3viewhelper:a-button-with-accessibility-attributes@13.4)
-   [Arguments of the form.button ViewHelper](https://docs.typo3.org/permalink/t3viewhelper:arguments-of-the-form-button-viewhelper@13.4)

## A Fluid form with a submit button containing an icon

You can use the `<f:form.button>` ViewHelper within an Extbase
form to render a `<button type="submit">` element that allows HTML content.

This is especially useful when you want to include custom elements inside the button,
such as icons or styled spans.

When the user clicks the button, the action specified by the surrounding
[\<f:form>](https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-form@13.4)
is triggered.

**Fluid**

**packages/my_extension/Resources/Private/Templates/Comment/Edit.html**

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">
<f:form action="submit" controller="Comment" objectName="comment" object="{comment}" method="post">
    <label for="tx-blogexample-content">Message:</label>
    <f:form.textarea property="content" id="tx-blogexample-content" rows="8" cols="46" />

    <f:form.button>
        <i class="fa fa-paper-plane"></i> Submit
    </f:form.button>
</f:form>
</html>

```

**Controller**

You can use the same Extbase controller as in the example
[A Fluid form with a single submit button](https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-form-submit-example@13.4),
which uses the `<f:form.submit>` ViewHelper.

**packages/my_extension/Classes/Controller/CommentController.php**

```php
<?php

declare(strict_types=1);

namespace MyVendor\MyExtension\Controller;

use Psr\Http\Message\ResponseInterface;
use T3docs\BlogExample\Domain\Model\Comment;
use T3docs\BlogExample\Domain\Repository\CommentRepository;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;

class CommentController extends ActionController
{
  public function __construct(
    protected readonly CommentRepository $commentRepository,
  ) {}

  public function submitAction(Comment $comment): ResponseInterface
  {
    $this->commentRepository->update($comment);
    $this->addFlashMessage('Your comment was saved');
    return $this->redirect('show');
  }

  // Other actions
}

```

## A Fluid form with multiple buttons of different types

The `<f:form.button>` ViewHelper supports the `type` attribute, allowing you to
render buttons of type `submit`, `reset`, or `button`. This is useful when you
want to offer multiple actions within the same form, each with a distinct
purpose and custom styling or icons.

Unlike `<f:form.submit>`, you can include inline HTML (e.g. icons, spans) in each button.

**Fluid**

**packages/my_extension/Resources/Private/Templates/Comment/Edit.html**

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">
<f:form action="submit" controller="Comment" object="{comment}" objectName="comment" method="post">
    <label for="tx-comment-content">Message:</label>
    <f:form.textarea property="content" id="tx-comment-content" rows="6" cols="50" />

    <f:form.button type="submit" name="action" value="save">
        <i class="fa fa-save" aria-hidden="true"></i> Save
    </f:form.button>

    <f:form.button type="reset">
        <i class="fa fa-undo" aria-hidden="true"></i> Reset
    </f:form.button>

    <f:form.button type="button" name="preview" value="1" onclick="alert('Preview not implemented!')">
        <i class="fa fa-eye" aria-hidden="true"></i> Preview
    </f:form.button>
</f:form>
</html>

```

**Controller**

A single Extbase controller action can be used to differentiate the submitted action
based on the button name or value.

**packages/my_extension/Classes/Controller/CommentController.php**

```php
<?php

namespace Vendor\MyExtension\Controller;

use MyVendor\MyExtension\Domain\Model\Comment;
use Psr\Http\Message\ResponseInterface;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;

class CommentController extends ActionController
{
  public function submitAction(Comment $comment, string $action): ResponseInterface
  {
    switch ($action) {
      case 'save':
        // Save logic here
        $this->addFlashMessage('Comment saved!');
        return $this->redirect('edit');

      case 'preview':
        // Assign preview-related data and render the same view
        $this->view->assign('preview', true);
        $this->view->assign('comment', $comment);
        return $this->htmlResponse();

      default:
        $this->addFlashMessage('Unknown action');
        return $this->redirect('edit');
    }
  }
}

```

> [!NOTE]
> The reset button does **not** submit the form and is not processed by the controller.
> It resets all form fields to their initial values using standard HTML behavior
> (`<button type="reset">`). Therefore, there is no need to handle it in the controller.

> [!NOTE]
> When using multiple buttons, you can assign different `name` and `value` attributes
> to detect which button was clicked in the controller.

## A button with additional HTML5 attributes

The `<f:form.button>` ViewHelper allows you to pass through standard HTML5
button attributes such as `disabled`, `formmethod`, and `formnovalidate`.

This is useful when you need more control over how the button behaves in relation to
form submission and validation.

**packages/my_extension/Resources/Private/Templates/Comment/Edit.html**

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">
<f:form action="submit" controller="Comment" method="post">
    <f:form.button type="reset"
                   name="cancel"
                   value="cancel"
                   disabled="disabled"
                   formmethod="post"
                   formnovalidate="formnovalidate">
        Cancel
    </f:form.button>
</f:form>
</html>

```

> [!NOTE]
> You can use these attributes with any button type (`submit`, `reset`, or `button`) and
> they will be passed through to the rendered `<button>` tag.

## A button with accessibility attributes

The `<f:form.button>` ViewHelper supports accessibility attributes like `aria-label`,
`aria-disabled`, or `aria-describedby`.

These attributes are passed directly to the rendered `<button>` tag, allowing you to make your forms
more accessible for assistive technologies such as screen readers.

For convenience, you can also use the
[aria](https://docs.typo3.org/permalink/t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-form-buttonviewhelper-aria@13.4)
attribute and pass an array to it.

Fluid will automatically generate the corresponding `aria-*` attributes
based on the key-value pairs in the array.

**packages/my_extension/Resources/Private/Templates/Comment/Edit.html**

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">
<f:form action="submit" controller="Comment" object="{comment}" objectName="comment" method="post">
    <label for="tx-comment-content">Message:</label>
    <f:form.textarea property="content" id="tx-comment-content" rows="6" cols="50" />
    <p id="commentHint" class="form-text">
        Press the send button to submit your comment.
    </p>

    <f:form.button type="submit" aria="{label: 'Send comment', describedby: 'commentHint'}">
        <i class="fa fa-paper-plane" aria-hidden="true"></i> Send
    </f:form.button>
</f:form>
</html>

```

> [!NOTE]
> Combine visible labels with appropriate [ARIA](https://www.w3.org/WAI/ARIA/apg/)
> attributes to improve the experience for users with screen readers.

## Arguments of the form.button ViewHelper

> **Allows arbitrary arguments**
>
> This ViewHelper allows you to pass arbitrary arguments not defined below
> directly to the HTML tag created. This includes custom `data-` arguments.

-   **additionalAttributes**

    -   *Type:* array

    Additional tag attributes. They will be added directly to the resulting HTML tag.

-   **aria**

    -   *Type:* array

    Additional aria-\* attributes. They will each be added with a "aria-" prefix.

-   **data**

    -   *Type:* array

    Additional data-\* attributes. They will each be added with a "data-" prefix.

-   **name**

    -   *Type:* string

    Name of input tag

-   **property**

    -   *Type:* string

    Name of Object Property. If used in conjunction with \<f:form object="...">, the "name" property will be ignored, while "value" can be used to specify a default field value instead of the object property value.

-   **type**

    -   *Type:* string
    -   *Default:* 'submit'

    Specifies the type of button (e.g. "button", "reset" or "submit")

-   **value**

    -   *Type:* mixed

    Value of input tag
