TYPO3 Backend Forms and Inputs
Forms and Input Elements used in TYPO3's backend
Wrap the form with the following:
<div class="typo3-TCEforms"> ... </div>
Fieldset
<fieldset class="form-section">
<h4 class="form-section-headline"> </h4>
...
</fieldset>
Columns (bootstrap)
<div class="row">
<div class="form-group col col-sm-6 col-md-4"> </div>
<div class="form-group col col-sm-6 col-md-4"> </div>
<div class="form-group col col-sm-6 col-md-4"> </div>
</div
Labels
<label class="form-label"> Label Name </label>
Select
<f:form.select name="name" class="form-select" options="{categories}" optionLabelField="name" />
Textarea
<f:form.textarea class="form-control" rows="10" property="description" />
Input
<f:form.textfield property="name" class="form-control" additionalAttributes="{required: required}" />
Checkbox (Toggle)
<div class="form-group">
<label class="form-label"
for="appointments_label_weekstarts_on_monday">
Week starts on
</label>
<div class="form-check form-switch">
<f:form.checkbox id="appointments_label_weekstarts_on_monday"
property="weekstartsOnMonday"
class="form-check-input"
value="1" />
<div class="form-check-label">My label</div>
</div>
</div>
Small text on the bottom of the field
<div class="form-text">This is a text which is displayed after field in small size</div>