Foundation Forms Testing

Forms

We set out in Foundation 3 to create an easy to handle, powerful, and versatile form layout system. A combination of form styles and the Foundation grid means you can do basically anything.

Row Layouts

Here's an example of a form layout controlled with rows and columns.

Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of .right to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of .inline will have it vertically center against an input.

Fieldsets

Simple elements that can contain all or part of a form to create better division.

Labels and Actions with Collapsed Columns

Foundation forms support actions tied to buttons, and prefix / postfix labels. Essentially you can use a 'collapsed' row to create label / action / input combinations. Here are a few examples.

Input with a prefix character

Input with a postfix label

.com

Input with a postfix action (button)

Error States

Foundation includes error states for labels, inputs and messaging that you can have your app generate programatically.

Field with Error Invalid entry

Another Error Invalid entry

Large Form Example

Here's an example of a really extensive form.

Large Form Example

Name Occupation Twitter

URL

.com

Field with Error Invalid entry

Another Error Invalid entry

Address

Custom Inputs

Custom form input types that are included with Foundation.

Radio Buttons and Checkboxes

Radio Button 1 Radio Button 2 Radio Button 3

Label for Checkbox Label for Checkbox Label for Checkbox

Dropdown / Select Elements

Dropdown Label Dropdown Label