Example 1: Login

This example demonstrates basic usage (default options):

new DKS.CompactAccessibleForms('compactform');
Example 2: Login with input field class update

This example enables input field class update (updateInputFieldClass option):

new DKS.CompactAccessibleForms($('compactformICU'), {updateInputClass:true});
Example 3: Login with input field class update (custom)

This example enables input field class update but using custom class names for input fields (updateInputClass, visibleInputClassName and hiddenInputClassName options:

new DKS.CompactAccessibleForms('compactformICUC', {updateInputClass:true, visibleInputClassName:"compactVisibleCustom", hiddenInputClassName:"compactHiddenCustom"});
Example 4.a: Multiple forms with a single call

This example shows how you can process multiple forms with a single line of code by sending an array of container elements (most probably forms or fieldset elements):

new DKS.CompactAccessibleForms($$('.cforms'));
Example 4.b: Multiple forms with a single call (second form)

This form is initialized with the same call made to initialize the form in Example 4.a.

Example 5: Safari "placeholder" attribute

This example uses the Safari proprietary "placeholder" input field attribute instead of binding custom events. This example will behave the same way as others unless viewed under Safari.

new DKS.CompactAccessibleForms('compactSPH', {usePlaceholderAttr:true});
Example 6: Pre populated field and untargeted field

This example shows how the plug-in handles pre populated fields as well as the ability not to target a field (not compacted).