SmarkForm

🚀 Powerful while effortless Markup-driven and Extendable forms.

SmarkForm enhances HTML forms with advanced features like dynamic list manipulation and context-based interactions, without requiring specific layout or complex JavaScript code. [More…]

Main Features

Subforms: Nested forms to any depth.
Lists: Sortable and variable-length arrays either of scalars or subforms.
Conigurable hot keys: Context-driven keyboard shortcuts.
Low code: No manual wiring between controls and fields.
JSON format: Data is imported / exported as JSON.
Lightweight: Only 38KB minified.
Flexible, extendable and more…

Sample Code

The following code snippet shows SmarkForm simplicity.

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

🔗

🗒️ HTML

🎨 CSS

⚙️ JS

👁️ Preview

📝 Notes

<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>📞 </label>
                <input placeholder='+34...' type="tel" data-smark>
                <button data-smark='{"action":"removeItem"}' title='Remove Phone'>❌</button>
            </li>
        </ul>
    </p>
    <button data-smark='{"action":"export"}'>⬇️  Export</button>
</div>

button:disabled {
    opacity: .5;
}

const myForm = new SmarkForm(document.getElementById("myForm"));
myForm.on("AfterAction_export", ({data})=>{
    window.alert(JSON.stringify(data, null, 4));
});

Name:

Phones:

📞

👉 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.

👉 Note that it enforces default behaviors, such as requiring a minimum of one item and excluding empty list items during export. But it can be easily changed, with properties like min_items and exportEmpties.

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

Also, explore our 🔗 Complete Examples to see SmarkForm capabilities at a glance!!

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: Tue Apr 01 2025.

Where to Go Next?

To get started with SmarkForm you can:

👉 Take a look to our 🔗 Showcase section to see its full potential at a glance.

👉 Follow our 🔗 Quick Start Guide to rapidly dive 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.

See the 🔗 Contributing Section for more details…