Basic examples of the creation of new form objects to extend HTML 5.
To create new forms objects, three-way arise, and to get an idea of their advantages and disadvantages, comparing the creation of a simple custom button in each format.
CSS 3 Button
These buttons are based on standard HTML tags, <button> for the first two, <input> for the last, and customized with a style sheet. We can combine HTML tags to create more complex objects such as a tree-view.
These buttons are CSS compatible with modern browsers.
Canvas or SVG objects do not offer this possibility, they require to have recourse to alternative frameworks or plugins for older browsers.
SVG enables effects that we will be visually defined from a program like Inkscape. Unfortunately, the rendering could differ between browsers (the button is ugly on Chrome).
This demonstration is used primarily to see how the user can interact with an SVG object. This format is a mean to extend HTML 5 with new complex objects, allowing to interact with specific parts of the object. Simply attach event handlers to a tag, as it is done in this example.
A third possibility is the use of Canvas. It is easier to get a compatible rendering that in SVG, but to create composite interactive objects will be as complicated as creating a game. This format is appropriate to create new objects with little user interaction, such as a clock .
Conclusion: Choosing the right format for each use
It is difficult by creating a SVG or Canvas object to write code that is compatible with all browsers, each having its own interpretation of the implementation of these formats. Most of the work is therefore to solve the compatibility problems which is a waste of time, unless we find ready to use widgets.
It will be preferable to use:
HTML and CSS to build its own new form objets,
SVG for things like auto-generated and interactive graphics,
Canvas for graphics independent of the page or for more elaborate widgets than a simple button, that could include images or animations.