Basic Form

Creating a form in Foundation is designed to be easy but extremely flexible. Forms are built with a combination of standard form elements, as well as the Grid (rows and columns).

Form elements in Foundation are styled based on their type attribute rather than a class, and can be sized in a couple of ways:

• You can size inputs using column sizes, like .large-6, .small-6.
• You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.

Defining a Fieldset

Pre/Postfix Labels & Actions

Inline Labels

Error States

Foundation includes error states for labels, inputs and messaging that you can have your app generate programatically. You can attach a class of .error either to the individual elements (label, input, small) or to a column/div.

Abide Validation

To enable validation with Abide, add the data-abide attribute to your form element. Then add the required attribute to each input that you want to require. Additionaly, you can define a pattern to define restraints on what users can input.