SmarkForm

🚀 Powerful while effortless Markup-driven and Extendable form controller.

NPM Version npm dependencies NPM Downloads jsDelivr Hits License

SmarkForm is a lightweight and extendable form controller that enhances HTML forms to support subforms and variable-length lists without tying the layout to any specific structure. This enables it to import and export data in JSON format, while providing a smooth navigation with configurable hotkeys and a low-code experience among other features.

[🔗 More…]


🔗 Live Examples

Main Features

Sample Code

The following code snippet shows SmarkForm simplicity.

👉 You will find similar examples with working previews throughout this documentation. Don’t miss the 📝 Notes tab to be aware of the nitty-gritty details.

🔗
🗒️ HTML
🎨 CSS
⚙️ JS
👁️ Preview
📝 Notes
<div id="myForm">
<div id="myForm">
    <p>
        <label data-smark>Name:</label>
        <input data-smark='{"name":"name"}' placeholder='Full name' type="text">
    </p>
    <p>
        <button data-smark='{"action":"addItem","context":"phones"}' title='Add Phone'>➕ </button>
        <label data-smark>Phones:</label>
        <ul data-smark='{"name": "phones", "of": "input", "sortable":true, "max_items":5, "exportEmpties": true}'>
            <li>
                <label data-smark>📞 Tel.
                <span data-smark='{"action":"position"}'>N</span>
                </label>
                <input placeholder='+34...' type="tel" data-smark>
                <button data-smark='{"action":"removeItem"}' title='Remove Phone'>❌</button>
            </li>
        </ul>
    </p>
</div>
</div>

#myForm ul li {
    list-style-type: none;
}
#myForm button:disabled {
    opacity: .4;
}

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

👉 This is a simple form to show the power of SmarkForm.

  • Tinker with it, modifying data, adding or removing items from the Phones list, sorting its items by dragging them and then clicking the Export button to see resulting data.

👉 Its behavior is driven by the data-smark attributes, which are declarative and intuitive with straightforward defaults to match most common use cases.

  • …for instance, min_items is set to 1 by default, so you cannot remove the last item from the Phones list. But you can change it by setting min_items to 0, allowing an empty list.

  • Another interesting case is the exportEmpties property, which is set to false by default, so empty items are not usually exported. In this example, it is set to true since, for a first contact, it might seem counterintuitive.

👉 Check the JS tab to see the little JS just to initialize it as a SmarkForm and show you the data when exported.

To minimize clutter, the ⬇️ Export, ⬆️ Import and ❌ Clear buttons implementation have been omitted from the source code, as they are common to all examples and will be explained in detail in a 🔗 later section.

Current Status

SmarkForm implementation is stable and fully functional, but not all initially planned requirements are yet implemented. Hence, it’s not yet in the 1.0.0 version. [🔗 More…]

Last Updated: Thu Aug 07 2025.

Where to Go Next?

To get started with SmarkForm you can:

👉 Take a look at our 🔗 Showcase section to see its full potential at a glance.
👉 Follow our 🔗 Quick Start Guide to dive right in.
👉 Check out our 🔗 Downloadable Examples to see them in action and/or start tinkering.

License

🔗 MIT

Contributing

We welcome any feedback, suggestions, or improvements as we continue to enhance and expand the functionality of SmarkForm.

Hello footer