YUI3 Forms CSS

CSSForm is a YUI module that makes it easy to display good looking forms on your website.

Default Form

A default inline form.

Remember me Sign in

Multi-Column Form (with YUI Grids)

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

Legend

First Name

Last Name

E-Mail

City

State AL CA IL MD NY

I've read the terms and conditions Submit

Stacked Form

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

Legend

First Name Last Name E-Mail City State AL CA IL MD NY I've read the terms and conditions Submit

Aligned Form

Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.

Username

Password

Email Address

Supercalifragilistic Label

Check me out Submit

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.

Sign in

Input Sizing

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

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.

Search

Selects

Brazil Canada United States United Kingdom Venezuela Brazil Canada United States United Kingdom Venezuela

Checkboxes and Radios

Here's option one. Here's a radio button. You can choose this one.. ..Or this one!