Acid.JS Web 2.0 Components Help Topics

Forms.JS

Forms.JS Setup, Installation and Help Topics

Forms.JS is a 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.

View online demo of Forms.JS or download it straight away. Buy via PayPal.

Because the component or parts of it are rendered entirely on the client, and the source is not available via the standard View Source command of the browser, it is recommended that you use IE DevToolBar or FireBug or other troubleshooting and code inspection tool (such as Opera Dragonfly or the development tools of Safari and Google Chrome) in order to inspect the HTML and the CSS classes.

Requirements

  • Standards-compliant (XHTML1.0/1.1, HTML5) or skinny doctype page - the control will not initialize on non-standards-compliant pages. If the component is added to a quirks mode page, it will throw and exception and will not initialize.
  • Web server.
  • Server platform-independent (PHP, .NET, JAVA, etc).

Supported Browsers

  • 6
  • 7
  • 8
  • 9
  •  
  •  
  •  
  •  

Installing the Default Configuration of the Component

To copy a chunk of code from the listings below and keep its indentation, double click to select it, then right click and choose "Copy" from the context menu or use Ctrl + C.

1. Add the runtime scripts and base stylesheet of Forms.JS in the <head>...</head> section of your webpage:

<link rel="stylesheet" type="text/css" href="Forms.JS/Scripts/Forms.JS.css" />
<script type="text/javascript" src="Forms.JS/Scripts/jQuery.js"<>/script>
<script type="text/javascript" src="Forms.JS/Scripts/Forms.JS.js"<>/script>

If you keep your scripts in a common directory, you can copy Forms.JS there as well, just make sure you change the path in the src attribute of the <script>...</script> tag. Also, please, refer to the properties of the initialization methods for explanation of how to use the rootfolder property if your root directory is different.

2. Add the initialization method below the runtime script from Step 1:

<script type="text/javascript">
formsjs.pageload({
	enabled: true,
	iecss3: false,
	rootfolder: "",
	skin: "Mac",
	region: "page",
	browsebutton: "Browse...",
	elements: ["button", "checkbox", "radio", "file", "select", "textbox"]
});
</script>

3. Reload the page. If the steps have been followed correctly, Forms.JS will style all of the form controls found on the page (because the value of the region property is set to "page") and you are ready to proceed to the next topis in the manual.

Initialization Methods of Forms.JS

The formsjs.pageload() and demand() methods of Forms.JS require the setting of 7 properties - enabled, iecss3, rootfolder, skin, region, browsebutton, elements.

The formsjs.pageload() method will style the selected control when page loads:

<script type="text/javascript">
formsjs.pageload({
	enabled: true,
	iecss3: false,
	rootfolder: "",
	skin: "Mac",
	region: "page",
	browsebutton: "Browse...",
	elements: ["button", "checkbox", "radio", "file", "select", "textbox"]
});
</script>

The formsjs.demand() method will style the controls upon user interaction - for example when new controls are added dynamically on the page or after AJAX request:

<script type="text/javascript">
formsjs.demand({
	enabled: true,
	iecss3: false,
	rootfolder: "",
	skin: "Mac",
	region: "page",
	browsebutton: "Browse...",
	elements: ["button", "checkbox", "radio", "file", "select", "textbox"]
});
</script>

Both properties can be used as many times on the page as you need - for example in order to style different parts regions with different skins.

Using formsjs.demand() is typically not required, because since version 4.0, Forms.JS automatically handles dynamically added controls to the specified region.

Properties of the Initialization Methods
enabled

Boolean value (true or false). If set to false, the component will not initialize for the specified region.

rootfolder

By default, the folder of the component does not have a root directory, but it can be added to a custom folder, for example Scripts. If you add the Forms.JS folder to another folder, use the rootfolder property to set the name of your custom folder, and do not forget the trailing slash (as "Scripts/"), for example:

rootfolder: "path/to/my/scripts/"

If you put the main Forms.JS folder in a custom directory, you should also change the src and href values in the runtime files of the component, i.e:

<link rel="stylesheet" type="text/css" href="path/to/my/scripts/Forms.JS/Scripts/Forms.JS.css" />
<script type="text/javascript" src="path/to/my/scripts/Forms.JS/Scripts/jQuery.js"></script>
<script type="text/javascript" src="path/to/my/scripts/Forms.JS/Scripts/Forms.JS.js"></script>

... and also the url value of the behavior property in the Forms.JS/Forms.JS.CSS3.IE.css file:

.forms-js.fjs-button.forms-js-ie-css3 input[type="button"],
.forms-js.fjs-button.forms-js-ie-css3 input[type="submit"],
.forms-js.fjs-button.forms-js-ie-css3 input[type="reset"],
.forms-js.fjs-button.forms-js-ie-css3 button,
.forms-js.forms-js-ie-css3.fjs-textbox input[type="text"],
.forms-js.forms-js-ie-css3.fjs-textbox input[type="password"],
.forms-js.forms-js-ie-css3.fjs-textbox textarea
{
    filter: none !important;
	behavior: url("path/to/my/scripts/Forms.JS/Scripts/PIE.htc");
}

... Because it requires absolute value.

elements

This is the array with the form elements that you want to style in a given region:

elements: ["button", "checkbox", "radio", "file", "select", "textbox"]
region

The property can accept two types of values - one is "page", and the other one is the id of a parent element, in which the form controls will be styled. If the value is "page", then Forms.JS will style all form controls found on the page. To style the controls in a particular parent only, use its id. If you set id, make sure that element with the same id really exists on the page, for example:

<div id="Div1">...</div>

region: "Div1"

If the value of the region property is not "page" or the region element id is not found on the page, Forms.JS will display a warning message and will not initialize.

iecss3

Boolean value (true or false). If set to true, the component will initialize CSS3PIE and will try to apply the CSS3 properties in the skins by using VML for Internet Explorer 7-8. Please, make sure you refer to supporting documentation page of CSS3PIE for known issues and bugs if you experience trouble.

browsebutton

Allows to set custom text for the Browse... button of the skinned file inputs.

browsebutton: "Browse...",
skin

This property sets the skin that will applied by Forms.JS. The skin files are stored in the Forms.JS/Skins/[SkinName] folder, and the name of the skin is the name of the folder, for example:

skin: "Vista"

Client Methods of Forms.JS *

Please, refer for demo and explanation of the client methods for form control manipulation (enable, disable, check, uncheck) to the client-methods-demo-and-explanation.html page included in the distribution of the component you have probably already downloaded.

*The client methods of Forms.JS for form control manipulation (enable, disable, check, uncheck, group selection, etc.) are not available in the free version of the component, however you may take a look at the source code of the page to see how they are invoked and what methods are available.

Forms.JS and Accessibility

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

Difference Between the Trial and the Full Version

The trial version of Forms.JS displays a trial message at the top of the page. Is shipped with three skins only, and all client methods for form elements manipulation (enable, disable, toggle, etc) are disabled.

The full version is fully functional, and does not display any trial messages and comes with the full set of 12 skins. If you wish to remove the trial notice and get the full functionality and the full set of skins, you may purchase Forms.JS via PayPal for USD20. A purchase link is provided on the demo page and in the trial message of the component. You may also purchase the full version by following this link.

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.

Upgrade to the Full Version after Purchase

After getting the full version you will notice that it contains only certain files, not the entire distribution required to run the script - the rest of the skins and JavaScript. You have to replace the files in the trial version distribution with the ones that you have received after having purchased the full version manually. After this, the control should work without trial notices and the emails sent by it will not contain trial strings.