Form.button ViewHelper <f:form.button>
This ViewHelper creates a
<button> HTML element within the
Form ViewHelper <f:form>.
Unlike the Form.submit ViewHelper <f:form.submit>, the Form.button ViewHelper can contain HTML content — for example, an icon.
By using the type
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).
Table of contents
A Fluid form with a submit button containing an icon
You can use the <f: 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> is triggered.
<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>
You can use the same Extbase controller as in the example
A Fluid form with a single submit button,
which uses the <f: ViewHelper.
<?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: 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:, you can include inline HTML (e.g. icons, spans) in each button.
<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>
A single Extbase controller action can be used to differentiate the submitted action based on the button name or value.
<?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: 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.
<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: ViewHelper supports accessibility attributes like aria-,
aria-, or aria-.
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 attribute and pass an array to it.
Fluid will automatically generate the corresponding aria-* attributes
based on the key-value pairs in the array.
<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 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