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 design and application logic.
- Support for complex data structures, such as nested objects and arrays.
- Ability to manually sort and add or remove items from a lists (arrays).
- (Comming soon) Dynamic loading of options for select fields based on the values of other form fields.
- Customization and extensibility through custom components.
Try it yourself:
Learn more about SmarkFor in its Documentation site.
Don't miss its examples section where you can check out its HTML source and JS example.
Smarkform is available both as standard ESM and legacy UMD modules in npm package and CDN.
Former examples use UMD CDN so that they can be downloaded as single and fully functional HTML pages.
It's styles are also served as separate CDN but you can use your own styling.
Feel free to play modifying them as you like.
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.
Top comments (0)