<% @page_title = "Forms" %>

<%= @page_title %>

With Foundation, we set out 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.

Building Forms with HTML

OK, so you have a client that needs a form with an unhuman layout. "You can't back down because of some legal reason," he says. What are you to do? Foundation has you covered with versatile forms that looks great out of the box and are easily customizable as you need.

Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:

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 ultimately adds a bit of code to your forms, but it's worth the trade off! Here's what the example above looks like in HTML:

<%= code_example ' ', :html %>

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.

<%= code_example ' ', :html %>

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.

<%= code_example ' ', :html %>

Defining a Fieldset

We don't see them too much, but one of the useful form elements included with Foundation is <fieldset>. 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 <legend>. Here's some HTML to help make copy paste.

<%= code_example ' ', :html %>

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 <div class="row collapse"> to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix <span class="postfix"> or <span class="prefix">. Here are a few examples:

<%= code_example ' ', :html %>

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.

<%= code_example ' ', :html %>

Build with Mixins

A lot of elements in Foundation can be created using SCSS mixins so that you can include your own classes and just enough style as needed for the job at hand. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _forms.scss, _global.scss and _buttons.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "foundation/variables", "foundation/components/global", "foundation/components/buttons", "foundation/components/forms";', :css %>

We include most of the form styles by default, but the ones that are attached to HTML classes can be accessed via the mixins below. The error states have mixins, but we suggest using the classes since they are usually only visible temporarily.

The Pre/Postfix Mixin

With the form label mixin, you can control which classes make your labels line up how you want them to next to their form elements. You'll use these in conjunction with the grid mixin.

<%= code_example ' ', :html %>

Since you need to wrap columns in a container anyway, we've used a .row.collapse rather than creating our own class to hold those mixins. Feel free to attach those styles to your own class or ID though.

The base mixin:

<%= code_example ' .your-prefix-class { @include prefix-postfix-base; @include grid-column($columns:3,$float:left); } input[type="text"].your-input-class { @include grid-column($columns:9); }', :css %>

The Prefix & Postfix Style Mixins

You can control the style you add to your prefix or postfix elements using this mixin, it looks like this:

<%= code_example ' .your-prefix-class { @include prefix-postfix-base; @include prefix; @include grid-column($columns:3,$float:left); } input[type="text"].your-input-class { @include grid-column($columns:9); }', :css %>

There are two options you can set with the prefix and postfix mixins, these are:

<%= code_example ' @include prefix($bg, $is-button); /* Control the background color, which also effect the border and font color */ $bg: $input-prefix-bg /* If you prefix or postfix element is a button, make sure to set this to true */ $is-button: false ', :css %>

Default SCSS Variables

<%= code_example ' $include-html-form-classes: $include-html-classes; /* We use this to set the base for lots of form spacing and positioning styles */ $form-spacing: em-calc(16); /* We use these to style the labels in different ways */ $form-label-pointer: pointer; $form-label-font-size: em-calc(14); $form-label-font-weight: 500; $form-label-font-color: lighten(#000, 30%); $form-label-bottom-margin: em-calc(3); $input-font-family: inherit; $input-font-color: rgba(0,0,0,0.75); $input-font-size: em-calc(14); $input-bg-color: #fff; $input-focus-bg-color: darken(#fff, 2%); $input-border-color: darken(#fff, 20%); $input-focus-border-color: darken(#fff, 40%); $input-border-style: solid; $input-border-width: 1px; $input-disabled-bg: #ddd; $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); $input-include-glowing-effect: true; /* We use these to style the fieldset border and spacing. */ $fieldset-border-style: solid; $fieldset-border-width: 1px; $fieldset-border-color: #ddd; $fieldset-padding: em-calc(20); $fieldset-margin: em-calc(18 0); /* We use these to style the legends when you use them */ $legend-bg: #fff; $legend-font-weight: bold; $legend-padding: em-calc(0 3); /* We use these to style the prefix and postfix input elements */ $input-prefix-bg: darken(#fff, 5%); $input-prefix-border-color: darken(#fff, 20%); $input-prefix-border-size: 1px; $input-prefix-border-type: solid; $input-prefix-overflow: hidden; $input-prefix-font-color: #333; $input-prefix-font-color-alt: #fff; /* We use these to style the error states for inputs and labels */ $input-error-message-padding: em-calc(6 4); $input-error-message-top: 0; $input-error-message-font-size: em-calc(12); $input-error-message-font-weight: bold; $input-error-message-font-color: #fff; $input-error-message-font-color-alt: #333; /* We use this to style the glowing effect of inputs when focused */ $glowing-effect-fade-time: 0.45s; $glowing-effect-color: $input-focus-border-color;', :css %>

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

<%= render "_sidebar-components.html.erb" %>