Note: I've decided to suspend development until the Forms Task Force comes to a decision on whether Web Forms 2.0 in its entirety will be incorporated into HTML 5. If they decide to come up with something new, I hope that this will be a place for a cross-browser implementation of the new Forms functionality in HTML 5.
Version 0.5.4 has been released. See the changelog, and try out the test suite.
A cross-browser implementation of the WHATWG Web Forms 2.0 specification. This specification is currently a mature working draft and has been adopted by the W3C HTML Working Group to serve as a starting point for the next version of HTML. This implementation will follow the HTML 5 specification that evolves from the W3C process.
The implementation has been tested and should function in:
- Mozilla Firefox 1.0.8
- Mozilla Firefox 1.5.0.9
- Mozilla Firefox 2
- Internet Explorer 6
- Internet Explorer 7
- Safari 2.0.4
- Safari 3 (Windows)
- Opera 9 (native experimental implementation)
Implemented Features
- Extensions to form control elements
- The form and select elements are extended with data attributes for fetching values and options from external resources.
- Extensions to the input element
- Support for the new types datetime, datetime-local, date, month, week, time, number, range, email, and url (widgets not yet created for new controls; creating hooks into widgets from libraries such as Ext is the plan)
- Ranges: the min and max attributes
- Precision: the step attribute
- Extensions to existing attributes
- The maxlength attribute for textarea elements
- The pattern attribute
- The required attribute
- The autofocus attribute
- The repetition model for repeating form controls
- New form controls: add, remove, move-up, and move-down buttons, along with the template attribute for add buttons
- The repeat-min and repeat-max attributes
- Event interface for repetition events
- The added, removed,and moved events
- Extension: the onadded, onremoved, and onmoved HTML attributes and DOM properties
- The repetition model
- Addition
- Removal
- Movement of repetition blocks
- Initial repetition blocks
- The forms event model: Form validation
- The invalid event and the oninvalid HTML attribute and DOM property
- The willValidate DOM property
- The validity interface
- The checkValidity method on form controls and the form element
- The setCustomValidity method on form controls
- Fetching data from external resources (with the data attribute)
- Filling select elements
- Seeding a form with initial values
For more information on the implemented features, see the implementation details.
Usage
Load webforms2.js in the head of your document:
<script type='text/javascript' src='webforms2.js'></script>
Or you may include the compressed version of this file (via Dean Edwards' packer along with other optimizations):
<script type='text/javascript' src='webforms2-p.js'></script>
It is important that the file webforms2.css and webforms2-msie.js both be located in the same directory as webforms2.js or webforms2-p.js (whichever you decide to use). For users of Internet Explorer, the file webforms2-msie.js is part of a hack that ensures that the Web Forms 2.0 functionality is initialized before the load event.
Alternatively, you may install a user script that enables testing (and usage) on any site.
Once the library has been included, then write HTML and JavaScript that take advantage of the features that Web Forms 2.0 specifies. In authoring XHTML pages using Web Forms 2.0, you may include the following DTDs to validate your code (these DTDs have passed validation but they have not been verified to correctly validate a WF2 document; please attempt to do so and write in with the results):
Feedback
Either start a new discussion in this implementation's group, send me your personal comments and suggestions via my feedback form, or if you find a bug, you may file an issue.
Donations
If you value this software, please donate to ensure that it may continue to be maintained and improved. Thank you!