A form contains a list of elements. It is important to understand what an element is, and how you can use them. When starting a form, there is the labels array. This array will define all the elements for the form. Each form element is a row in the labels array.
Form with elements.
In the above form there are different elements.
1 and 4: checkbox element
2: dropdown element with a label
3: text element with a label
5: text element without label
For each element you can define if there is a label, on which line it must be shown, in which column and how much columns the width has to be.
Elements can be hidden, so they won't appear on the form, but the data they contain can be used. It is also possible to use hidden elements to put new data in. This will be explained later in the documentation.
In a responsive design elements can be re-arranged when you scale the size of the window. BOA will take care of that. You need to take this into account when you setup your screens. Since we are working with Bootstrap, a screen-block is always devided in 12 columns. If you have two element on one row, it is not a good idea to use a width of 5 and 7. The total is 12, but when you resize, they will both be changed to 6. It is always the best to use values as: 1,2,3,4,6,8,9,10 or 12.
