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'><span data-smark='{"action":"position"}'>/</span><span>&nbsp;</span>
                  <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);
          });