Forms are used to collect user input and configure options of a task the user is completing.
| API status: | general |
|---|---|
| Web resource key: |
com.atlassian.auiplugin:aui-forms
|
| AMD Module key: | N/A |
| Experimental API: | 1 |
| General API: | 3 |
Forms are constructed with a root element (form.aui), containers (commonly for rows), then various input or button types within those containers.
Commonly, there will be a set of fieldsets and field group elements (depending on the input type contained); and in almost all cases a buttons container at the end. Remember all inputs should have a label, it makes them more usable and accessible.
A simple example including a required field:
Note AUI provides the visual style only, you will need to implement validation:
Descriptions go just after their input. They should only be used for non-critical, supplementary text. Critical information must go in the label:
Forms include the option for an inline help field, which is hidden on load and toggled with JavaScript.
The overall layout of the form can be chosen by adding a class to the root element:
class="aui long-label") - makes the labels wider.class="aui top-label") – Places labels above form elements (except radios and checkboxes where the label remains to the right of the input). This style is used for forms in narrow spaces.You can increase the width of an input (note this is separate from the width of the label, controlled by form layouts) by adding a class to the input:
class="short-field"class="medium-field"class="medium-long-field"class="long-field"class="full-width-field" (this will make the field expand to the full available width)For example, to set a long field: