## 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

First Fieldset (`text-fields` & `select-boxes`)
Salutation *
First name
Field «Last name» not properly filled. Last name *
E-Mail *
Second Fieldset (`select`, `textarea` & `checkbox`)
More Options
Message
Sign me up for your newsletter
Third Fieldset (`radio-buttons`)
Option 1
Option 2
Option 3