Simplify Web Form Development with SmarkForm

Introduction:

Creating web forms can often feel like reinventing the wheel. Every time we need to implement a form, we find ourselves going through the same process.

For simple forms with a few plain fields, it may be pretty straightforward. However, as soon as we need a little more complexity, such as lists, nested data, dynamic options, and more, it can quickly become a time-consuming and effort-intensive task that diverts our focus from the core functionality of our applications. But fear not! With SmarkForm, you can break free from this repetitive cycle and streamline your form development process.

SmarkForm is a powerful and straightforward JavaScript library that will greatly simplify form development in your web applications. With SmarkForm, you can quickly and efficiently create interactive forms without having to worry about writing complex JavaScript code.

What is SmarkForm?

It is based on the idea that web forms should be easy to create and maintain directly in HTML markup, without the need for writing a lot of additional JavaScript code.

We just need to add a few properties in so-called data-smark attributes to make our HTML markup more semantic and let SmarkForm library do the rest.

Key Features of SmarkForm:

• Easy and quick creation of interactive forms.
• Complete separation between layout/desingn and application logic.
• Support for complex data structures, such as nested objects and arrays.
• Ability to dynamically add and remove items from a list.
• (Comming soon) Dynamic loading of options for select fields based on the values of other form fields.
• Customization and extensibility through custom components.

See it in action

The following is a really simple example showing nearly all (yet implemented) power of SmarkForm:

• CodePen SmarkForm complete example

On the other hand, here you have a bare minimal example with simple HTML, no CSS at all but all the power of SmarkForm:

• CodePen SmarkForm bare minimal example

Getting Started with SmarkForm:

SmarkForm is available in both ESM and UMD modules both vailable through CDN (thanks to jsdelivr) and NPM package:

• ESM CDN: https://cdn.jsdelivr.net/npm/smarkform/dist/SmarkForm.esm.js
• UMD CDN: https://cdn.jsdelivr.net/npm/smarkform/dist/SmarkForm.umd.js
• NPM: https://www.npmjs.com/package/smarkform

Then, enhancing your form as a SmarkForm form is as easy as:

const form = new SmarkForm(document.getElementById("myForm"));

For more detailed instructions see:

• GitHub Repository
• SmarkForm's Reference Manual

There you will discover amazing features like so called actions which are operations available for given component types which you only need to place other components of the special type action (such as buttons) in the right place (or pointing to that place through the to property) in your markup.

You can also play with existing CodePen SmarkForm Examples.

Feel free to explore SmarkForm and simplify your web form development process. Happy coding!

Questions:

If you have any questions or if you find this article unclear or incomplete, please let me know.

I've made an effort to be approachable and prevent it from being tedious by excluding certain details that can already be found in the documentation and examples.

However, if you believe that something is lacking, please provide your feedback in the comments.