Resources
CDN
Examples
<div class="SmarkForm">
<section>
<div class='form-group h1'>Company</div>
<div class='input-group'>
<label data-smark>Corporate Name</label>
<input data-smark name='company' type='text' placeholder='Company Name'>
</div>
<div class='input-group'>
<label data-smark>Address</label>
<textarea data-smark name='address' placeholder='Address'></textarea>
</div>
<div class='form-group'>
<label data-smark>City,State,Zip</label>
<input data-smark name='city' placeholder='City' style='flex: 6'>
<input data-smark name='state' placeholder='State' style='flex:1'>
<input data-smark name='postCode' placeholder='Postal Code' style='flex:2'>
</div>
</section>
<section>
<div class='form-group h2'><span class='foldButton' data-smark='{"action":"fold","hotkey":"f","context":"employees","foldedClass":"folded"}'></span><span><span>Employees (</span><span data-smark='{"action":"count","context":"employees"}'></span><span>)</span></span>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"employees","autoscroll":"self"}' title='Add employee'><span role='img' aria-label='Append new employee'>➕</span></button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"employees","keep_non_empty":true}' title='Remove employees from bottom priorizing empties'><span role='img' aria-label='Wisely shrink employee list'>➖</span></button>
<button data-smark='{"action":"removeItem","hotkey":"*","context":"employees","target":"*","keep_non_empty":true}' title='Clear all empty employees'><span role='img' aria-label='Remove all empty employees'>🧹</span></button>
</div>
</div>
<div class='form-group'>
<div class='form-group' data-smark='{"name":"employees","type":"list","exportEmpties":true,"sortable":true}'>
<fieldset class='full-width form-group aside reverse' data-smark='{"exportEmpties":false}'>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-","failback":"clear"}' title='Remove this employee'><span role='img' aria-label='Remove this employee'>➖</span></button>
<div class='form-group spacer'>
<div class='form-group'>
<div class='input-group'>
<label data-smark>First Name</label>
<input data-smark name='name' placeholder='Name'>
</div>
<div class='input-group'>
<label data-smark>Last Name</label>
<input data-smark name='lastName' placeholder='Surnme'>
</div>
</div>
<div class='form-group'>
<label data-smark>Sex:</label>
<label>
<input data-smark type='radio' name='sex' value='male'>Male
</label>
<label>
<input data-smark type='radio' name='sex' value='female'>Female
</label>
<label>
<input data-smark type='radio' name='sex' value='other'>Other
</label>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Date of Birth</label>
<input data-smark type='date' name='birth' placeholder='dd/mm/yyyy'>
</div>
<div class='input-group'>
<label data-smark>Salary</label>
<input data-smark type='number' name='salary' step='0.01' placeholder='Euros'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark='data-smark'>Telephones</label>
<div data-smark='{"name":"phones","type":"list","of":"input","max_items":4}'>
<div class='singleton'>
<button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove this item'><span role='img' aria-label='Remove this item'>➖</span></button>
<input data-smark='data-smark' type='tel' placeholder='Telephone'/>
<button data-smark='{"action":"addItem","hotkey":"+"}' title='Add new item below'><span role='img' aria-label='Add new item'>➕</span></button>
</div>
</div>
</div>
<div class='input-group'>
<label data-smark='data-smark'>Emails</label>
<div data-smark='{"name":"emails","type":"list","of":"input","max_items":4}'>
<div class='singleton'>
<button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove this item'><span role='img' aria-label='Remove this item'>➖</span></button>
<input data-smark='data-smark' type='email' placeholder='Email'/>
<button data-smark='{"action":"addItem","hotkey":"+"}' title='Add new item below'><span role='img' aria-label='Add new item'>➕</span></button>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class='form-group f2'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"employees","autoscroll":"elegant"}' title='Add employee'>➕</button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"employees","keep_non_empty":true,"autoscroll":"elegant","failback":"clear"}' title='Remove employees from bottom priorizing empties'><span role='img' aria-label='Wisely shrink employee list'>➖</span></button>
<button data-smark='{"action":"removeItem","hotkey":"*","context":"employees","target":"*","autoscroll":"elegant","keep_non_empty":true}' title='Clear all empty employees'><span role='img' aria-label=''>🧹</span></button>
</div>
</section>
<section>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"import","hotkey":"i"}' title='Import (JSON) data'><span role='img' aria-label=''>📂</span> Import</button>
<button data-smark='{"action":"empty","hotkey":"x"}' title='Clear form data'><span role='img' aria-label=''>❌</span> Cancel</button>
<button data-smark='{"action":"export","hotkey":"s"}' title='Submit form data'><span role='img' aria-label=''>💾</span> Submit</button>
</div>
</section>
</div>
<div class="SmarkForm">
<section>
<div class='form-group h1 nowrap'>
<div class='spacer'></div>
<button data-smark='{"action":"import","context":"tasklist"}'><span role='img' aria-label=''>📂</span> Import (JSON)</button>
<button data-smark='{"action":"export","context":"tasklist"}'><span role='img' aria-label=''>💾</span> Export (JSON)</button>
</div>
<div data-smark='{"type":"list","name":"tasklist","sortable":true,"exportEmpties":true,"min_items":0}'>
<fieldset class='form-group aside reverse' data-smark='{"exportEmpties":false}'>
<button class='inline' data-smark='{"action":"removeItem"}' title='Remove task'><span role='img' aria-label='Remove task'>❌</span></button>
<div class='form-group spacer'>
<div class='form-group'>
<input data-smark name='title' type='text' placeholder='Task title'>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark='data-smark'>Goals</label>
<div data-smark='{"name":"goals","type":"list","of":"input","sortable":true,"max_items":100}'>
<div class='singleton'>
<button data-smark='{"action":"removeItem","failback":"clear","hotkey":"-"}' title='Remove this item'><span role='img' aria-label='Remove this item'>➖</span></button>
<input data-smark='data-smark' type='text' placeholder='New goal...'/>
<button data-smark='{"action":"addItem","hotkey":"+"}' title='Add new item below'><span role='img' aria-label='Add new item'>➕</span></button>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class='form-group f1 nowrap' style='text-align: right'>
<div class='spacer'></div>
<button data-smark='{"action":"empty","context":"tasklist","autoscroll":"elegant"}' title='Clear form data'><span role='img' aria-label=''>❌</span> Clear all</button>
<button data-smark='{"action":"removeItem","context":"tasklist","target":"*","autoscroll":"elegant","keep_non_empty":true}' title='Clear all empty tasks'><span role='img' aria-label=''>🧹</span> Clear empty</button>
<button data-smark='{"action":"addItem","context":"tasklist"}'><span role='img' aria-label=''>➕</span> Add new task</button>
</div>
</section>
</div>
<div class="SmarkForm">
<section>
<h2>Activity</h2>
<div class='form-group'>
<label data-smark>Title</label>
<input data-smark name='activity_name' type='text' placeholder='Name your planned activity...'>
</div>
<div class='input-group'>
<label data-smark>Description</label>
<textarea data-smark name='activity_description' placeholder='Brief description of your activity'></textarea>
</div>
<h2>Planning</h2>
<label data-smark>Origin</label>
<div class='form-group' data-smark='{"type":"form","name":"origin"}'>
<input data-smark name='place' placeholder='Place'>
<input data-smark name='city' placeholder='City'>
<input data-smark name='date' type='date' placeholder='dd/mm/yyyy'>
<input data-smark name='time' type='time' placeholder='hh:mm'>
</div>
<label data-smark>Stops</label>
<div class='form-group' data-smark='{"type":"list","name":"stops","min_items":0,"exportEmpties":false}'>
<div class='full-width form-group aside reverse'>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove stop place'><span role='img' aria-label='Remove stop place'>➖</span></button>
<div class='form-group'>
<input data-smark name='place' placeholder='Place'>
<input data-smark name='city' placeholder='City'>
<input data-smark name='date' type='date' placeholder='dd/mm/yyyy'>
<input data-smark name='time' type='time' placeholder='hh:mm'>
</div>
</div>
</div>
<div class='form-group'>
<div class='spacer'></div>
<button class='inline' data-smark='{"action":"addItem","hotkey":"+","context":"stops"}'><span role='img' aria-label=''>➕</span> Add Stop Place</button>
</div>
<label data-smark>Destination</label>
<div class='form-group' data-smark='{"type":"form","name":"destination"}'>
<input data-smark name='place' placeholder='Place'>
<input data-smark name='city' placeholder='City'>
<input data-smark name='date' type='date' placeholder='dd/mm/yyyy'>
<input data-smark name='time' type='time' placeholder='hh:mm'>
</div>
</section>
<section>
<h2>Participants</h2>
<label data-smark>Organizers</label>
<div class='form-group' data-smark='{"type":"list","name":"organizers","exportEmpties":false}'>
<div class='full-width form-group aside reverse'>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove organizer'><span role='img' aria-label='Remove organizer'>➖</span></button>
<div class='form-group spacer'>
<div class='form-group'>
<input style='flex: 6' data-smark name='name' placeholder='Name'>
<input style='flex: 2' data-smark name='phone' type='tel' placeholder='Phone number'>
</div>
</div>
</div>
</div>
<div class='form-group'>
<div class='spacer'></div>
<button class='inline' data-smark='{"action":"addItem","hotkey":"+","context":"organizers"}'><span role='img' aria-label=''>➕</span> Add Organizer</button>
</div>
<label data-smark>Participants:</label>
<div class='form-group' data-smark='{"type":"list","name":"participants","min_items":0,"exportEmpties":false}'>
<div class='full-width form-group aside reverse'>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove participant'><span role='img' aria-label='Remove participant'>➖</span></button>
<div class='form-group spacer'>
<div class='form-group'>
<input style='flex: 6' data-smark name='name' placeholder='Name'>
<input style='flex: 2' data-smark name='phone' type='tel' placeholder='Phone number'>
</div>
</div>
</div>
</div>
<div class='form-group'>
<div class='spacer'></div>
<button class='inline' data-smark='{"action":"addItem","hotkey":"+","context":"participants"}'><span role='img' aria-label=''>➕</span> Add Participant</button>
</div>
</section>
<section>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"import"}' title='Import (JSON) data'><span role='img' aria-label=''>📂</span> Import</button>
<button data-smark='{"action":"empty"}' title='Clear form data'><span role='img' aria-label=''>❌</span> Cancel</button>
<button data-smark='{"action":"export"}' title='Submit form data'><span role='img' aria-label=''>💾</span> Submit</button>
</div>
</section>
</div>
// Essential:
// ==========
// SmarkForm instantiation:
const myForm = new SmarkForm(document.querySelector("#main-form"));
// Import / Export data handling:
// ==============================
// Do Something on export action:
myForm.on("AfterAction_export"
, ({data})=>alert (JSON.stringify(data, null, 4))
);
// Fetching data on import action (example):
myForm.on("BeforeAction_import", (options) => {
let data = prompt('Provide JSON data');
try {
options.data = JSON.parse(data);
} catch (err) {
if (data.length) {
alert ('⚠️ Invalid JSON!!');
data = null; // Emulate prompt cancel.
} else {
data = {}; // Drop form contents
};
};
if (data === null) options.preventDefault();
});
// Aesthetic enhancements:
// =======================
// Ask for confirm on empty action
myForm.on("BeforeAction_empty", async ({context, preventDefault}) => {
if (
! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?") // Ask for confirmation
) preventDefault(); // Abort if user cancelled
});
// Allow for list items addition/removal CSS animation:
// (Propperly and/remove "animated_item" and "ongoing" CSS classes)
const delay = ms=>new Promise(resolve=>setTimeout(resolve, ms));
myForm.onAll("addItem", function({
newItemTarget, /* the target of the future new item */
onRendered
}) {
newItemTarget.classList.add("animated_item");
onRendered(async (newItem)=>{
await delay(1); /* Allow for default .animated_item style to be applied */
newItem.targetNode.classList.add("ongoing");
/* Here we could have used newItemTarget instead */
});
});
myForm.onAll("removeItem", async function({
oldItemTarget,
onRemmoved
}) {
oldItemTarget.classList.remove("ongoing");
/* Await for transition to be finished before item removal: */
await delay(150);
});
// Essential:
// ==========
// SmarkForm instantiation:
const myForm = new SmarkForm(document.querySelector("#main-form"));
// Import / Export data handling:
// ==============================
// Do Something on export action:
myForm.on("AfterAction_export"
, ({data})=>alert (JSON.stringify(data, null, 4))
);
// Fetching data on import action (example):
myForm.on("BeforeAction_import", (options) => {
let data = prompt('Provide JSON data');
try {
options.data = JSON.parse(data);
} catch (err) {
if (data.length) {
alert ('⚠️ Invalid JSON!!');
data = null; // Emulate prompt cancel.
} else {
data = {}; // Drop form contents
};
};
if (data === null) options.preventDefault();
});
// Aesthetic enhancements:
// =======================
// Ask for confirm on empty action
myForm.on("BeforeAction_empty", async ({context, preventDefault}) => {
if (
! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?") // Ask for confirmation
) preventDefault(); // Abort if user cancelled
});
// Allow for list items addition/removal CSS animation:
// (Propperly and/remove "animated_item" and "ongoing" CSS classes)
const delay = ms=>new Promise(resolve=>setTimeout(resolve, ms));
myForm.onAll("addItem", function({
newItemTarget, /* the target of the future new item */
onRendered
}) {
newItemTarget.classList.add("animated_item");
onRendered(async (newItem)=>{
await delay(1); /* Allow for default .animated_item style to be applied */
newItem.targetNode.classList.add("ongoing");
/* Here we could have used newItemTarget instead */
});
});
myForm.onAll("removeItem", async function({
oldItemTarget,
onRemmoved
}) {
oldItemTarget.classList.remove("ongoing");
/* Await for transition to be finished before item removal: */
await delay(150);
});
// Essential:
// ==========
// SmarkForm instantiation:
const myForm = new SmarkForm(document.querySelector("#main-form"));
// Import / Export data handling:
// ==============================
// Do Something on export action:
myForm.on("AfterAction_export"
, ({data})=>alert (JSON.stringify(data, null, 4))
);
// Fetching data on import action (example):
myForm.on("BeforeAction_import", (options) => {
let data = prompt('Provide JSON data');
try {
options.data = JSON.parse(data);
} catch (err) {
if (data.length) {
alert ('⚠️ Invalid JSON!!');
data = null; // Emulate prompt cancel.
} else {
data = {}; // Drop form contents
};
};
if (data === null) options.preventDefault();
});
// Aesthetic enhancements:
// =======================
// Ask for confirm on empty action
myForm.on("BeforeAction_empty", async ({context, preventDefault}) => {
if (
! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?") // Ask for confirmation
) preventDefault(); // Abort if user cancelled
});
// Allow for list items addition/removal CSS animation:
// (Propperly and/remove "animated_item" and "ongoing" CSS classes)
const delay = ms=>new Promise(resolve=>setTimeout(resolve, ms));
myForm.onAll("addItem", function({
newItemTarget, /* the target of the future new item */
onRendered
}) {
newItemTarget.classList.add("animated_item");
onRendered(async (newItem)=>{
await delay(1); /* Allow for default .animated_item style to be applied */
newItem.targetNode.classList.add("ongoing");
/* Here we could have used newItemTarget instead */
});
});
myForm.onAll("removeItem", async function({
oldItemTarget,
onRemmoved
}) {
oldItemTarget.classList.remove("ongoing");
/* Await for transition to be finished before item removal: */
await delay(150);
});