About SmarkForm
Showcase
Features
A web form must be:
- Easy to use
- Responsive and accessible UX
- Lightweight yet highly compatible
- Flexible and extendable
- Powerful
- Supports variable-length lists and subforms.
- Lists and subforms are just field types. Even the whole form is a field.
- Import/Export capabilities (actions) for all fields.
- Export proper data type for each field type:
- Allow users to add or remove items from arrays.
- Impose lower and upper limits for arrays lengths.
- Advanced UX improvements
Easy to use
Markup-driven and Intuitive API
- Leverage your existing HTML and CSS knowledge to create powerful forms with no effort.
- Just add the
data-smarkattribute to relevant tags and see the magic.
Zero-Wiring
- Controls (trigger components) reach their target fields by its context (position in the form) or by relative paths within the form.
- Just intercept import and export events for data load ond submit.
No need for extensive JavaScript coding.
- Most common functionalities are already built-in.
- Highly customizable through declarative options.
- Ex.:
<button data-smark='{action: "addItem"}'>
Responsive and accessible UX
Lightweight yet highly compatible
Only a few KBs of JavaScript
Just 37KB minified!
Bundled both as modern ES Module and UMD for wide compatibility.
> 0.25%, browser coverage thanks to Babel
Flexible and extendable
Markup agnostic
Don’t require specific HTML structure or CSS design rules.
Designers have complete freedom.
Develop your own component types to suit your specific needs.
Powerful
Supports variable-length lists and subforms.
Lists and subforms are just field types. Even the whole form is a field.
Import/Export capabilities (actions) for all fields.
Export proper data type for each field type:
- JSON object for forms.
- JSON array for lists.
- Number for numbers (
<input type="number" data-smark>). - Well formed date for date…
Allow users to add or remove items from arrays.
Impose lower and upper limits for arrays lengths.
Advanced UX improvements
Configurable context-driven keyboard shortcuts with awesome hints revelation.
Automatically enabled/disabled controls (depending on context).
- Ex.: Add Item and Remove Item buttons are disabled when the list is full or empty, respectively.