Fluid and Responsive HTML Forms

A fixed-layout snippet from the responsive job application form
A snippet from the responsive job application form in a narrowed container
A snippet from the degraded job application form

Need a fixed-layout, fluid, or responsive HTML form? Just download and start the achlina form designer. Its usage is straightforward, fast, and free of charge. Have a look at the screenshots and sample forms, including a five-minute feedback form, and see how easy it is to build HTML forms from scratch. Create your HTML form visually with drag-and-drop form editors and let the code generator do the coding job. The generated source code is free.

The code-generated HTML form comes in a <html> stub as client-server or client-only turnkey application, regular or accessible, in a fixed, fluid, or responsive form layout, with optional database support, and equipped with customizable accessible and responsive datepickers. Currently, the responsive form layout starts with a fluid HTML form layout and degrades to an indented one-column form layout if the form's container width falls below the form's minimum fluid width.

A 2D form layout tool is part of the HTML form designer. Its purpose is to arrange the form elements and decoration visually on the form, just as every drawing tool does with drawing shapes on a canvas. The 2D form layout tool is the form drawing tool that makes a difference and helps to create appealing, compact HTML forms.

HTML form accessibility is made easy by the achlina form designer. The separation of form structure and content from visual form layout was chosen to optimize work efficiency. As a side effect, the distinction between form structure and layout helps to take the blind user's point of view. The structure view invites to expose hierarchical relationships by grouping and nesting of related form elements to assist the blind user in recognizing the form structure.

The responsive HTML form is device agnostic and adapts its layout to its parent container's width without interfering with the CSS media queries of the embedding markup. Only the responsive datepicker looks to the left and right to fit the screen. Shown below is a responsive datepicker as part of a responsive HTML form in reaction to a narrowing container down to degradation.

Responsive datepicker in a wide form container
Responsive datepicker in a narrow form container
Responsive datepicker after degradation