Simple styling for HTML Form elements.

First, include it on your page

Add the CSS on your page:


Optionally, you can load it through the YUI().use():

      YUI().use(gallerycss-cssform', function(Y) {
        Y.log('gallerycss-cssform has been added to the  as a CSS file');     

The latest (unstable) is on Github, and available for forking.

Fork from Github

Default Form

A default inline form can be created by adding the yui3-form to any form element.

A default inline form.

Multi-Column Form (with YUI Grids)

Multi-column forms such as the one below can be created by pulling down YUI Grids.


Stacked Form

Apply stacked label styling to any form by applying the yui3-form-stacked classname.


Aligned Form

Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls. Add the yui3-form-aligned classname to get this style.

Grouped Inputs

Grouped inputs are great for grouping small sets of text-based input elements. They work well for sign-up forms, and look natural on mobile devices.

Input Sizing

You can take advantage of YUI Grids and the yui3-input-* class to create fluid width inputs in practically any size that you want.

You can also use input elements within grid elements to lay them out across the page. In this example, the inputs are all full width with a class of yui3-input-1, inside a wrapper with a specific fluid width set by YUI Grids.

Invalid Inputs

Add the required attribute to any form control.

Disabled Inputs

Add the disabled attribute to any form control.

Rounded Form

Add the yui3-input-rounded classname to any form control.


Checkboxes and Radios