Forms

Forms are not a lot of fun. We've taken that lack of fun and dodged it with this ready-made code. In this release there are two sets of forms styles - basic and nice. Both are simple, both are flexible, both are easy to customize. Make sure to include app.js if you're going to use these forms.

---

Forms

Forms in Yii Foundation are created using the FounActiveForm

Inputs support a number of different base classes. Any text input has a class of 'input-text' and supports several sizes:

Standard Input Password Input File Input Captcha Input

Small Input Medium Input Large Input Expanded (Full Width) Input Oversize Input

Inline Labels

Inline labels are accomplished using the HTML5 Placeholder attribute, with a built-in JS fallback.

Error States

Error states can be applied in two ways:

• Using a wrapper for div.form-field.error, which will apply styles to text inputs, labels, and a small.error message (optional). This is ideal for programmatically generated forms.
• You can also apply the .red class to labels, inputs, and also append a small.error.

Medium Input (with wrapper) *Whoa, cowboy. Try that again.

Error states in Yii Foundation use the wrapper method, you dont have to do anything to get the styles, the extension takes care of it for you

---

TextareaThis is a textarea Inline Label Textarea Label for Checkbox Label for Radio Dropdown Label This is a dropdown This is another option Look, a third option

Fieldset Header H2

This is a paragraph within a fieldset.

Standar Input

---

Nice Forms

Changing the form style to a slightly fancier version is dead simple - set the FounActiveForm type attribute to 'nice'.

Standard Input Small Input

Medium Input (with wrapper) *Whoa, cowboy. Try that again.

Large Input Expanded (Full Width) Input Oversize Input TextareaThis is a textarea Inline Label Textarea Label for Checkbox Label for Radio Dropdown Label This is a dropdown This is another option Look, a third option

Fieldset Header H2

This is a paragraph within a fieldset.

Standard Input

---

Custom Forms

Creating easy to style custom form elements is so crazy easy, it's practically a crime. Just set the FounActiveForm type attribute to 'custom', if you want, forms.jquery.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.

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

Checkboxes

Radio Button 1Radio Button 2Radio Button 3

Radio Button 1Radio Button 2Radio Button 3

Label for CheckboxLabel for CheckboxLabel 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.