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.
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
- You can create
rowelements 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 in Yii Foundation are created using the FounActiveForm
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
will have it vertically center against an input.
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, 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.
Note: for these prefix and postfix labels we're using the mobile grid to size our labels correctly on small devices.
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.
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.