$Content?>
Agile Toolkit forms may have several classes applied on them to change the way how they look:
This class will make labels appear on top of input elements.
For non-stacked form, this will slightly increase width of the label field.
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')); /?>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()
$Next?>