The HTML form comes in a <html> stub as client-server or client-only turnkey application, regular or accessible, with database support and lightweight custom datepickers. Processing and validation of passed form data is performed both client and server side. The HTML form works out of box (server ready) as a self-contained and stand-alone unit (no third-party code, no dependencies, no unnecessary abstraction). The custom datepickers are responsive, accessible, and easily internationalizable. The accessible datepicker is keyboard navigable and unobtrusive. A consistent naming scheme and substantial symmetry of client and server-side form validation help to read and customize the code.
The product view below shows the currently available code generator options. The code generator creates the source code for the regular or the accessible HTML form. If documentation is requested, the source code comes colored with comments as HTML document.
The aim is to have a code generator that creates and wraps more differentiated form code, i.e., low-bandwidth (e.g. the degraded 2D layout), low-bandwidth plus accessibility, 2D layout, 2D layout plus accessibility, and fully accessible with dedicated markup.
The code generator creates the HTML form as defined in the structure view and styled in the layout view with the 2D drawing tool. Below is a screenshot snippet (Firefox on OS-X) from the job application form.
The 2D styled HTML form is based on percentages. The code generator creates CSS table cells to center the form controls (cells marked orange below) …
… and labels vertically to equalize browser rendering behaviour.
Labels are allowed to dynamically increase in width, unless they collide with other form elements (depending on alignment).
The structure view contains all the information required to create the accessible HTML form. Since the HTML form is generated, not handwritten, accessibility can easily be optimized by extra code, but without any extra effort. The accessible HTML form comes in an one-column layout and with partially different markup.
Currently implemented is: <label for="…">, <fieldset>, <legend>, aria-required, aria-invalid, role="alert".