Simplify Web Form Development with SmarkForm
Tags: javascript, webdev, opensource, library
Published: 2023-07-07 11:28:00

---
title: Simplify Web Form Development with SmarkForm
series: SmarkForm
published: true
description: SmarkForm is a powerful effortless, markup-driven, extendable and layout and css agnostic form library with advanced capabilities like variable-length lists and context-based interactions.
tags: javascript, webdev, opensource, library
cover_image: https://fastly.picsum.photos/id/885/1000/420.jpg?hmac=cGaNrtjiBxC0UgrDIUZko_Sv9S6-YLLrd08oORvJLmM
# Use a ratio of 100:42 for best results.
published_at: 2023-07-07 11:28 +0000
---


**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](https://codepen.io/bitifet/full/LYgvobZ)

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](https://codepen.io/bitifet/pen/mdzZPXm)


**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](https://www.npmjs.com/package/smarkform)

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

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

For more detailed instructions see:

  * [GitHub Repository](https://github.com/bitifet/SmarkForm#readme)
  * [SmarkForm's Reference Manual](https://github.com/bitifet/SmarkForm/blob/main/doc/index.md)

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](https://codepen.io/collection/YyvbPz).


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.