Skinnable Form Controls

by Acid.JS and WeMakeSites.NET

Are you planning to buy several components from Acid.JS? You can now compile your own Creative Web 2.0 Bundle and the more components you add to it, the more money you save. Start here.

Forms.JS 3.0 / July 17, 2010

Forms.JS is the successor of 6 separate controls for form styling, now consolidated in a single powerful component that will give you total control over the form elements on your page without any additional markup or sophisticated JavaScript. All you have to do is to add a single line of JavaScript in the head section of your webpage, define which elements will be styled, specify skinning region, set a skin, reload the page and leave the rest to Forms.JS. The component will seamlessly add cool Web 2.0 looks to input boxes, buttons, file inputs, checkboxes, radiobuttons and dropdowns.

Initialize on Page Load

The most common way to initialize Forms.JS is on page load by using its pageload() method.

Using the region property of Dialogs.JS

The region property of Forms.JS can accept two possible values - page or element ID. If set to page, Forms.JS will style all form controls found on the page. The ID value can be used to style different parts of the page with a different skin, as Forms.JS supports multiple skins on a single page. For example, the form below is styled with the XP skin of the control:

Initialize on Demand

Forms.JS is shipped with a separate method for form styling upon user interaction (demand()), for example after dynamically added controls on the page, after AJAX or simply upon button click:

click to style the form below

Form.JS and Accessibility

The controls styled with Forms.JS support all native keyboard showrcuts of the real controls - arrow navigation, spacebar and enter key.

Supported Browsers

Forms.JS works with all major browsers. Internet Explorer 6 is not supported, and the component does not initialize on that browser, leaving the existing form controls untouched.

  • Internet Explorer 7
  • Internet Explorer 8
  • Internet Explorer 9 Ready
  • Mozilla FireFox
  • Opera
  • Google Chrome
  • Apple afari

License Information

Free Trial1 - 3 WebsitesMultiple WebsitesDeveloper
The free license is for consideration and testing purposes only. The use of any Acid.JS component as a trial version on a live site is strictly proibited and will be considered an infringement of its copyright.A component purchased with this license is delivered with the full functionality and complete set of skins and can be used on 1-3 websites.The multiple website license allows the use of the component on an unrestricted number of websites, and is delivered with the full functionality and complete set of skins.The developer license includes the source code, full functionality and set of skins. The component can be used on multiple websites. Obfuscation before uploading on a live site is required.
download$20$30$200

If you consider purchasing more than one Acid.JS component you may create and order a custom Creative Web 2.0 Bundle and save money. More information about the Creative Web 2.0 Bundle program is available on my blog.

Difference Between the Free and the Commerical Versions

The free version of Forms.JS is displays a trial message at the top of the page, the client methods for enable, disable and toggle of form controls are disabled, and is shipped with three skins only. The full version is fully functional, does not display any trial messages and comes with the full set of 12 skins.

Check what is trending now on Acid.JS