Yii Foundation 3 Documentation

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.

The Basics

Form elements in Foundation 3 are styled based on their type attribute rather than .input-text classes, so the SCSS/CSS is much simpler.

Inputs in Foundation 3 have another major change — 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 .six.
• 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.

---

Forms

Forms in Yii Foundation are created using the FounActiveForm

Row Layouts

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

This is a label. Address

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.

Address Name:

City:

ZIP:

---

Fieldsets

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

Fieldset Name

This is a label. Address

---

Labels and Actions with Collapsed Columns

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

Input with a prefix character

#

Note: for these prefix and postfix labels we're using the mobile grid to size our labels correctly on small devices.

Input with a postfix label

.com

Input with a postfix action (button)

Search

---

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 container column or div.

Field with Error *Invalid entry

Another Error *Invalid entry

---

Large Form Example

Name Occupation Twitter

@

URL

.com

Field with Error *Invalid entry

Another Error *Invalid entry

Address

CA

View the code for this form →

---

Custom Inputs

Creating easy to style custom form elements is so crazy easy, it's practically a crime. Just add a type of "custom" to a form and, if you want, jquery.customforms.js will do everything for you.

The Foundation forms js will look for any checkbox, radio button, or select element and replace it with custom markup that is already styled with forms.css.

If you want to avoid a potential flash (waiting for js to load and replace your default elements) you can supply the custom markup as part of the page, and the js will instead simply map the custom elements to the inputs.

Foundation custom forms will even correctly respect and apply default states for radio, checkbox and select elements. You can use the "checked" or "selected" properties just like normal, and the js will apply that as soon as the page loads.

Radio Buttons and Checkboxes

Radio Button 1 Radio Button 2 Radio Button 3

Radio Button 1 Radio Button 2 Radio Button 3

Label for Checkbox Label for Checkbox Label for Checkbox

Dropdown / Select Elements

Dropdown Label This is a dropdown This is another option Look, a third option Dropdown Label This is a dropdown This is another option Look, a third option

Adding Custom Forms with JavaScript

If you are creating these custom forms using JavaScript (via AJAX, JavaScript templates or whatever), you will also need to create the custom markup that Foundation typically creates for you.

Foundation detects any custom forms when the document has loaded and adds the custom markup required to make the forms pretty. However, if you are adding these forms after the document has loaded, Foundation does not know to append this markup.

All the custom forms events are bound using jQuery.fn.on(), so you don't need to worry about event handlers not being bound to new elements.