About this example

YAML's Form Construction Kit provides a set of standard form elements (html markup & css) and two different layouts for vertical forms (linear and columnar display).

The provided HTML markup is based on best practices for accessible forms and to allow easy cross-browser styling of all form elements.

The standard layout is the linear display were labels and form elements are placed below each other. By adding class .columnar to <form>, <fieldset> or <div> elements, you can switch to columnar display.

YAML-based form styling

JavaScript has to be enabled for this demonstration.

Options: switch to linear form display switch to columnar form display

First Fieldset (text-fields & select-boxes)
Field «Last name» not properly filled.
Second Fieldset (select, textarea & checkbox)
Third Fieldset (radio-buttons)