Product

Overview

The product view is the code generator. It turns the form into code, i.e., HTML, CSS, JavaScript, and PHP, client-only or client-server, depending on the code settings in the settings view. The generated code can be exported as ASCII text via the system clipboard using the keyboard shortcuts (MacOS: Ctrl+…). The server part will be available in other languages than PHP soon.

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.

Generator Options

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.

Code : Form

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) …

CSS table-cells are used for vertical centering

… 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).

Code : Accessible Form

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.

A snippet from the accessible job application form

The <fieldset> form element is represented by the group component in the structure view. Group component labels are turned into <legend> by the code generator.

Currently implemented is: <label for="…">, <fieldset>, <legend>, aria-required, aria-invalid, role="alert".

Documentation : Form

Documentation : Accessible Form

The code generator creates the documentation as HTML document. Below is a documentation snippet with PHP, HTML, and JavaScript.

An code snippet with PHP, HTML, and JavaScript