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

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

Standard 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.

Medium Input Whoa, cowboy. Try that again. Textarea This 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

---

Nice Forms

Changing the form style to a slightly fancier version is dead simple - just add a class of 'nice' to the form itself.

Standard Input Small Input

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

Medium Input Whoa, cowboy. Try that again. Large Input Expanded (Full Width) Input Oversize Input Textarea This 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 add a class of 'custom' to a form and, 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.

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

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

This is a dropdown

• 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.