Form Styling on Page Load
The most common way to initialize Forms.JS is on page load by using its pageload() method:
<script type="text/javascript">
formsjs.pageload({
rootfolder: "",
elements: "buttons, checkboxes, radios, file, selects, textboxes",
skin: "Vista",
region: "Div1"
});
</script>Please, refer to the manual included in the distribution for more information on how to use the methods and properties of Forms.JS.
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:
Please, refer to the manual included in the distribution for more information on how to use the methods and properties of Forms.JS.
Form Styling 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:
<script type="text/javascript">
formsjs.demand({
rootfolder: "",
elements: "buttons, checkboxes, radios, file, selects, textboxes",
skin: "XP",
region: "Div3"
});
</script>Please, refer to the manual included in the distribution for more information on how to use the methods and properties of Forms.JS.
Skip Controls from Styling
Forms.JS does not style controls that have a CSS class name. In order to skip a control from skinning, just add any CSS class to it.
Please, refer to the manual included in the distribution for more information on how to use the methods and properties of Forms.JS.
Additional Methods of Forms.JS
The component comes with a bunch of handy methods ready to use methods for form element manipulation. These are described fully on the client-methods-demo-and-explanation.html page included in the distribution of the control, however they are not available in the lite version of the control, and the demo page will throw errors if you are using the free version.
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.
Browser Support
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
- Mozilla FireFox
- Opera
- Google Chrome
- Apple afari
Requirements and Troubleshooting
Forms.JS operates entirely on the client, and you do not need a server to play with it. The only requirement is that the page where the component will initialize is in standards compliance mode (XHTML1.0/1.1 or HTML5). Quirks mode is not supported, and the script shows a warning on non standards-compliant pages. The component does not initialize when viewed in browsers with disabled JavaScript.
For flawless performance in FireFox make sure you add space (1 symbol) between the form control and its parent on the left and on the right, i.e:
<div>_<input type="checkbox" />_</div>Differences Between the Lite and the Full Version
The Lite 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.