Options

The Amilma Forms options define the containers and various HTML elements your forms will use.
The Default options are for use with Bootstrap 5.
Each can be overwritten the way you want to match other framework

You can call the getOptions(mixed $opt) function at any time to display the options and their values for debugging purposes.
The $opt argument can be an option name, or an array of options names, or null if you want to show all the options keys => values.

For example, with Bootstrap, each group (label + element) has to be wrapped into a <div class="form-group"></div> and to have a .form-control class

We also need do add .col-sm-x & .control-label to labels,
and to wrap elements with <div class="col-sm-x mb-3"></div>.

The form options allow us to configure it all efficiently.

If needed, wrappers can contain two HTML elements.
It can be done with elementsWrapper, checkboxWrapper, and radioWrapper.

To add an input wrapper, see the addInputWrapper function.

Default options (Bootstrap 5)

$bs5_options = array(
'formHorizontalClass'          => 'form-horizontal',
'formVerticalClass'            => '',
'elementsWrapper'              => '<div class="bs5-form-stacked-element mb-3"></div>',
'checkboxWrapper'              => '<div class="form-check"></div>',
'radioWrapper'                 => '<div class="form-check"></div>',
'helperWrapper'                => '<span class="form-text"></span>',
'buttonWrapper'                => '<div class="mb-3"></div>',
'wrapElementsIntoLabels'       => false,
'wrapCheckboxesIntoLabels'     => false,
'wrapRadiobtnsIntoLabels'      => false,
'elementsClass'                => 'form-control',
'wrapperErrorClass'            => '',
'elementsErrorClass'           => 'is-invalid',
'textErrorClass'               => 'invalid-feedback w-100 d-block',
'verticalLabelWrapper'         => false,
'verticalLabelClass'           => 'form-label',
'verticalCheckboxLabelClass'   => 'form-label',
'verticalRadioLabelClass'      => 'form-label',
'horizontalLabelWrapper'       => false,
'horizontalLabelClass'         => 'col-form-label',
'horizontalLabelCol'           => 'col-sm-4',
'horizontalOffsetCol'          => 'col-sm-offset-4 mb-3',
'horizontalElementCol'         => 'col-sm-8 mb-3',
'inlineCheckboxLabelClass'     => 'form-check-label',
'inlineRadioLabelClass'        => 'form-check-label',
'inlineCheckboxWrapper'        => '<div class="form-check form-check-inline"></div>',
'inlineRadioWrapper'           => '<div class="form-check form-check-inline"></div>',
'iconBeforeWrapper'            => '<div class="input-group-text"></div>',
'iconAfterWrapper'             => '<div class="input-group-text"></div>',
'btnGroupClass'                => 'btn-group',
'requiredMark'                 => '<sup class="text-danger">* </sup>',
'openDomReady'                 => 'document.addEventListener(\'DOMContentLoaded\', function(event) {',
'closeDomReady'                => '});'
);

Example of generated HTML code for each option

The table below shows the correspondence between the options and the generated HTML code. The values of the options are arbitrary, used simply to illustrate the examples.

formHorizontalClass

<form class="form-horizontal" [...]>

formVerticalClass

<form class="form-vertical" [...]>

elementsWrapper

<div class="row mb-3">
[<label> ... </label>]
[<input>]
</div>

checkboxWrapper

<div class="form-check">
[<label>]
[<input type="checkbox">[text]]
[</label>]
</div>

radioWrapper

<div class="form-check">
[<label>]
[<input type="radio">]
[</label>]
</div>

helperWrapper

<span class="form-text">[Help text]</span>

buttonWrapper

<div class="mb-3">
[<label> ... </label>]
[<button> ... </button>]
</div>

wrapElementsIntoLabels (if true)

<label>[input | textarea | ...]</label>

wrapCheckboxesIntoLabels (if true)

<label>[checkbox]</label>

wrapRadiobtnsIntoLabels (if true)

<label>[radio]</label>

elementsClass

<input class="form-control" [...]>

wrapperErrorClass

<div class="[form-group] has-error">

elementsErrorClass

<input class="[form-control] error-class" [...]>

textErrorClass

<p class="text-danger"> ... </p>

verticalLabelWrapper

if true, the labels will be wrapped in a <div class="verticalLabelClass">

verticalLabelClass

<div class="verticalLabelClass">[label]</div>

verticalCheckboxLabelClass

<label for="[fieldname]" class="verticalCheckboxLabelClass">[text]</label>

verticalRadioLabelClass

<label for="[fieldname]" class="verticalRadioLabelClass">[text]</label>

horizontalLabelWrapper

if true, the labels will be wrapped in a div with the column class instead of having the column class themselves

horizontalLabelClass,
horizontalLabelCol

<label class="col-sm-4 control-label">...</label>

horizontalOffsetCol

// when label is empty, automaticaly offsetting field container
<div class="col-sm-offset-4 [col-sm-8]">
[<input>]
</div>

horizontalElementCol

<div class="col-sm-8 mb-3">
[<input>]
</div>

inlineCheckboxLabelClass

<label class="checkbox-inline">...</label>

inlineRadioLabelClass

<label class="radio-inline">...</label>

inlineCheckboxWrapper

<div class="form-check form-check-inline">
[input type="checkbox"]
[label]
</div>

inlineRadioWrapper

<div class="form-check form-check-inline">
[input type="radio"]
[label]
</div>

iconBeforeWrapper

<div class="input-group-text icon-before">[input with addon]</div>

iconAfterWrapper

<div class="input-group-text icon-after">[input with addon]</div>

btnGroupClass

<div class="btn-group">...</div>

requiredMark

// required markup is automaticaly added on required fields
<label>my required text<sup class="text-danger"> *</sup></label>

openDomReady

document.addEventListener(\'DOMContentLoaded\', function(event) {

closeDomReady

});

Customizing for another framework

You can use Amilma Forms with any framework, e.g., Semantic-UI, Pure, Skeleton, UIKit, Milligram, Susy, Bulma, Kube, etc.

You simply have to change the options to match your framework HTML & CSS classes:

$options = array(
    // your options here
);

$form->setOptions($options);

If you always use the same framework, the best way is to create a custom function with your custom config in the FormExtended class.