Gladiator Components >> Basic Form Components >> Basic Form Components API
Basic Form Components
Gladiator implements basic form data entry components such as the text entry and dropdown components shown in the sample form here.
(Note Bene: Form components with advanced functionality, such as the date entry and spin components are all discussed individually on dedicated pages).
All Gladiator form data entry components, including the advanced form components discussed elsewhere, share a unique feature designed to vastly simplify form layout: In place of requiring the developer to specify coordinates or index positions for laying out the components in a grid, the components automatically "float" within whatever container they are placed in.
When the container is wide enough to hold three across, then the components will self-organize into a grid with three components per row. However, if the container is resized, then form components will re-organize themselves so that there are just two across in each row, or even just one.
Note: You can see this behavior by resizing the form window above.
This "liquid" form layout feature can be very useful.
On the one hand a designer can, if desired, specify a fixed-width container to hold either one, two, three, or even more form entry elements per row.
Alternatively --and we believe this is the superior way to do it-- a designer can permit the form entry components to "float" within the browser window itself (or within a resizable container therein) so that users with smaller screens see just one or two elements across each row, while users with larger screens see three or four. And yet in no case are elements hidden off the right- or left-edges of windows, thus eliminating horizontal scrolling.
Astute readers may have already guessed that this layout functionality has been
implemented by taking advantage of the CSS float property, and thus
no additional complex Javascript overhead has been introduced at all.