--- title: Forms layout: doc/layouts/default.html --- # Forms

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

*** ## Building Forms With HTML 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. This is an example form we've created that is laid out using the grid:

HTML

{{> examples_form_basic_rendered}}

Rendered HTML

{{> examples_form_basic}}
### Inline Labels Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can put the label inside a different column to the left of the input. Then add a class of `.right` to the label to have it align to the right.

HTML

{{> examples_form_inline_labels_rendered}}

Rendered HTML

{{> examples_form_inline_labels}}
Adding a class of `.inline` will have it vertically center against an input. You can use one or both of these classes to accomplish the look you want.

HTML

{{> examples_form_inline_rendered}}

Rendered HTML

{{> examples_form_inline}}
*** ### Defining a Fieldset We don't see them too much, but one of the useful form elements included with Foundation is `
`. This is used as a wrapper right inside the form element. Right after you define a fieldset, you can include a legend title by using ``. Here's some HTML to help make copy paste.

HTML

{{> examples_form_fieldset_rendered}}

Rendered HTML

{{> examples_form_fieldset}}
*** ### Pre/Postfix Labels & Actions Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use `
` to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix `` or ``. Here are a few examples:

HTML

{{> examples_form_labels_rendered}}

Rendered HTML

{{> examples_form_labels}}
You'll notice that on the last postfix element, we've included the class of `radius`. This adds the border radius on the appropriate edge depending on whether it's a prefix or a postfix element. You can even include buttons with these styles, just apply the `.button` as well as the pre/postfix class. *** ### 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.

HTML

{{> examples_form_errors_rendered}}

Rendered HTML

{{> examples_form_errors}}
*** ## Customize With Sass Forms can be easily customized with our provided Sass variables.

SCSS

{{> examples_form_variables}} *** ## Semantic Markup With Sass You can create your own forms using our Sass mixins.

Pre/Postfix Mixin

You can use the `prefix-postfix-base()` and `prefix()` mixin to create your own form, like so: ##### Base mixin

SCSS

{{#markdown}} ```scss .custom-prefix-class { @include prefix-postfix-base(); @include grid-column( $columns:3, $float:left ); } input[type="text"].custom-input-class { @include grid-column($columns:9); } ``` {{/markdown}}
{{#markdown}} ```html
Label
``` {{/markdown}}
##### Prefix & Postfix Style Mixins We use this mixin to create prefix label styles

SCSS

{{#markdown}} ```scss .custom-prefix-class { @include prefix-postfix-base(); @include prefix( // Control the background color, which also effect the border and font color. Default:$input-prefix-bg (scale-color(#fff, $lightness: -5%)) $bg: $input-prefix-bg, // Toggle position settings if prefix is a button. Default:false $is-button: false ); @include grid-column($columns:3,$float:left); } input[type="text"].custom-input-class { @include grid-column($columns:9); } ``` {{/markdown}}

HTML

{{#markdown}} ```html
Label
``` {{/markdown}}
*** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/buttons"; @import "foundation/components/forms"; ```