Creating form layout

To design forms in PHsPeed, the standard rules of Bootstrap will apply. Therefore we will not go into detail regarding the bootstrap grid system. If you are not familiar with bootstrap forms, we suggest that you first take a view on the Bootstrap website for the details. Generally bootstrap paint area's are divided into rows and columns. Each column can occupy max.12 units. Depending on the device that is presenting the form you can define the number of units to be used on a mobile, tablet or desktop. So if you have a row with two columns you could define each column to occupy 6 units on a desktop, but 12 units on smaller devices. That will break up the form on smaller devices causing the two columns to be presented below each other. The best way of getting the principle is creating a test application and play with the settings.

PHsPeed has a special tab regarding layouting your forms.

The grid system can be setup on two different components:

  1. Area
    • The Area component will generate a simple

      pair, but will follow the Bootstrap rules of 12 units.

  2. Panel
    • The Panel component will generate a bootstrap panel/card class, which causes a default border space around and within that panel. The panel can have a header which is a separate component that you can put on the panel.

To make use of the grid system you can define rows and within the rows columns (which can contain new rows etc.). Each row will be presented below each other. Columns willl break depending on the grid settings.
Within the IDE you are able to move rows and columns to get another sequence. Also, if you are on a valid parent component you can add rows, columns of a full grid by a few mouseclicks.

Within a column you can put different components for showing data or doing your input.