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