DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
HTML/CSS cheat-sheet¶
PhpStorm auto-completion¶
FormZ provides a schema allowing IDEs like PhpStorm to give auto-completion for its ViewHelpers in Fluid templates.
You can find a guide on integrating XSD files in your IDE here: https://github.com/FluidTYPO3/schemaker/blob/development/README.md#how-to-use-xsd-in-ide
Example:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fz="http://typo3.org/ns/Romm/Formz/ViewHelpers">
<f:layout name="MyLayout" />
<f:section name="MySection">
<fz:form name="myForm">
...
</fz:form>
</f:section>
</html>
“data” attributes¶
List of attributes used on the tag <form>
and which can be used with CSS:
fz-valid
: when all fields are valid.fz-value-{field-name}="value"
: current value of the field;fz-valid-{field-name}="1"
: the field is valid (no validation error);fz-error-{field-name}="1"
: the field has at least one error;fz-error-{field-name}-{rule-name}-{message-key}
: the field has the error{rule-name}
with the message{message-key}
;fz-submission-done
: the form has been submitted;fz-submitted
: the form is being submitted.
Example of CSS:
In the example below, the block info-customer
is hidden as long as the button “No” is not selected. It's the same as saying that it will be displayed only if the button “No” is selected.
form[name="myForm"]:not([fz-value-is-customer="0"]) .info-customer {
display: none;
}
{namespace fz=Romm\Formz\ViewHelpers}
<fz:form name="myForm" action="submitForm">
<fz:field name="isCustomer" layout="default">
<fz:slot name="Field">
Are you a customer?
<br />
<f:form.radio property="isCustomer" value="1" /> Yes
<br />
<f:form.radio property="isCustomer" value="0" /> No
</fz:slot>
</fz:field>
<div class="info-customer">
You can subscribe easily to our service <a href="...">by clicking here</a>.
</div>
</fz:form>
Loading behaviour¶
The attribute
fz-loading
is added:To the tag
<form>
when the form is being validated. It can be used for instance to deactivate the submission button, to wait for the fields to be validated.Attention
Another attribute is used at the submission of the form (when all fields are valid), see below.
Example:
.formz[fz-loading] input[type="submit"] { display: none; }
To the field container when it is being validated. It can be used for instance to display a loading circle when an Ajax request is running.
The attribute
fz-submitted
is added to the tag<form>
when the form is being submitted (when all fields were validated).