SmarkForm
Powerful while effortless Markup-driven and Extendable forms.
SmarkForm is a powerful library for creating markup-driven and extendable forms in web applications.
SmarkForm empowers designers to enhance their form templates with advanced capabilities, such as dynamic list manipulation and context-based interactions, with no need to deal with complex JavaScript code. [More…]
Features
- Responsive and accessible UX across devices.
- Imports/Exports JSON supporting nested subforms (objects) and variable-length lists (arrays).
- Configurable context-driven keyboard shortcuts (hotkeys)
- Easy to use Markup-driven and Intuitive API.
- No reliance on a specific HTML structure: Designers have complete freedom.
- No manual wiring between controls and fields.
- Lightweigh (Only 29KB minified), flexible and extendable.
- 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.
<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));
});
👉 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.
👉 Notice it inforces some default behaviours like a convenient minimum of one item or not exporting empty items for lists. 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 check out our 🔗 Complete Examples to see what SmarkForm is capable of in 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: Sun Dec 08 2024.
Where to Go Next?
To get started with SmarkForm you can:
👉 Follow our 🔗 Quick Start Guide to rapidly dive in. |
👉 Check out our 🔗 Downloadable Examples to see them in action and/or start tinkering. |
License
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…