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 or .full to <form>, <fieldset> or <div> elements, you can switch to alternative views.
The .full class should be used in forms with small widths, e.g. in multicolumnar forms.
YAML-based form styling
JavaScript has to be enabled for this demonstration.
Toggle to change the form layout: linear (default) | full | columnar