Form classes

Agile Toolkit forms may have several classes applied on them to change the way how they look:

.stacked

This class will make labels appear on top of input elements.

.wider-labels

For non-stacked form, this will slightly increase width of the label field.

Field row

Each field of a form is wrapped inside a div with class atk-form-row. This is defined in template form.html. This class will align label and input element properly. Additionally the row div may have .has-error class. This will make label red and will also highlight the field.

Placing <ins> element inside field's row will produce a gray "hint" next to the field. To add this field in the form, use the following code:

$form $page->add('Form');
$field $form->addField('line','test');

$field->setComment('Field Comment');

Form field can have some additional HTML added above or below it. In HTML it's done by placing code either before or after input field or div.input-row. In PHP you can do this by calling $field->abovefield() and $field->belowField(); Those methods will insert and return an element which you can change the way you see fit:

$field->aboveField()->add('HelloWorld');

$filed->belowField()->setElement('img')->attr('src',$this->api->locateURL('images/logo.png'));

Adding buttons

In several cases you would want to have a button linked with the field. In the HTML, this requires wrapping input field inside <div class="input-row">. You can explore the actual markup on the "playground" page. The PHP code for a similar operation looks relatively simple

$button $field->addButton('Hello');

Second argument to addButton() can be either "before" or "after" and is "after" by default. There are also functions afterField and beforeField() which work similarly to aboveField()/belowField()