Custom checkbox elements
This idea came about from AOL's use of image checkboxes in the recently launched version of their WebMail product as a means of selecting email messages rather than standard checkboxes. The images you see are inserted after each input element who's type attribute is "checkbox" for every form found in the document. The original checkbox has its display set to "none" and all events that are assigned to that checkbox are then assigned to the image. The images are given alt attributes that describe their current status as well.
This idea came about from AOL's use of image checkboxes in the recently launched version of their WebMail product as a means of selecting email messages rather than standard checkboxes. The images you see are inserted after each input element who's type attribute is "checkbox" for every form found in the document. The original checkbox has its display set to "none" and all events that are assigned to that checkbox are then assigned to the image. The images are given alt attributes that describe their current status as well.
An alternative to the select element with enabled multiple attribute. Enjoy scrollable checklists without all the hassle of worrying about deselecting previously-selected options.
This script is compatible with: IE 5.0+, Firefox 0.8+ for Win32 platform and Safari 1.2+, IE 5.2, Camino 8.2+, Netscape 7+, OmniWeb 4.1+, iCab 3.0+ for Apple Macintosh platform.
JotForm is web based WYSIWYG form builder. You can design forms to use somewhere else or design forms and let this service collect the data for you as well. Solution is completely free. JotForm requires a javascript and cookies enabled browser. Currently it is completely tested on Firefox and Internet Explorer.
DESCR
Typically, textareas, buttons and text fields have been easy enough to style and the functionality to use images as buttons is inherant to HTML. The styled form controls needed to be dynamically inserted into the page using a javascript. No javascript, no change.
formStyle has been tested in the following browsers: Internet Explorer 7 (Beta 1), 100% Compatibility, some cosmetic flicker issues when toggling controls. Mozilla Firefox 1.0.6 - Full compatibility. Netscape Navigator 7.2 - Full compatibility. Netscape 6.0 - Full compatibility. Minor CSS-styling fault in BigOrb example. Opera Browser 8.0 - Full compatibility.
This combination of JavaScript and CSS will hide checkbox and radio inputs that have a class = "crirHiddenJS", an id, and a proper label tag.
This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. If javascript is disabled no inputs will be hidden and the form is still be fully functional.
wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.
Since normal input fields (including radio buttons, checkboxes, textareas, etc) can only be styled to a small degree, we'll just go ahead and hide them while replacing their visual appearance with our own custom look.
It works great in Mozilla(Win) and IE6. There are some display issues on IE5.x and Opera that can be corrected in the next version.
Robust javascript validation library that is simple to implement and didn't require do any extra work other than creating the form. It is easy with Prototype.
0 comments: