plum.Form

A jQuery plugin to create forms perfectly in-sync with your site

The basics

plum.Form creates wrappers for each form element on a page. The wrappers are created dynamically, so you can easily add plum.Form to various designs without needing to change any markup.

Having wrappers allows more intriguing designs, like adding double borders.

Select all in "group 1" Group 1, box 1, disabled Group 1, box 2 Non-grouped box Group 1, box 4 Group 1, box 5, checked	Select all in "group 1" Group 2, box 1 Group 2, box 2, disabled, checked Group 2, box 3 Select all in "group 2"
Group 3, box 1 Group 3, box 2 Group 3, box 3 Group 3, box 4, disabled, checked	Group 4, box 1 Group 4, box 2, disabled Group 4, box 3, checked Group 4, box 4

Checkboxes and radio buttons

Checkboxes support "check all" groups. The only extra markup needed to create a "check all" button is to write the code for the button itself. Check all boxes can be placed anywhere on the page; they aren't limited to a certain container.

"Check all" boxes also support a "mixed" status, typically a filled box. plum.Form recognizes groups automatically, so if you load a page with only a few boxes in a group checked, the "check all" boxes will be given a mixed status.

File uploads

What's a form without a nice file upload? By default, plum.Form creates a button that allows users to upload multiple files. You can further customize it to limit the number of files to upload at once, the file type, and give each file a maximum size.

Single- and multiple-select menus

plum.Form keeps the same functionality as a traditional select menu, including navigating through the options with arrow keys, typing the name of the option, and using the shift key to select multiple items.

If a menu is near the end of a page and contains too many items to display without making the page longer, it slides above the top of the menu. The number of visible items in a menu can be adjusted with the simple addition of a "size" attribute.