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'>
<button class='foldButton' data-smark='{"action":"fold","hotkey":"f","context":"employees","foldedClass":"folded"}'>⬇</button><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","preserve_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":"*","preserve_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":"Delete","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'><strong data-smark='label'>Telephones</strong>
<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'><strong data-smark='label'>Emails</strong>
<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","preserve_non_empty":true,"autoscroll":"elegant"}' 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","preserve_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":"clear","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> </span>
<input data-smark name='title' type='text' placeholder='Task title'>
</div>
<div class='form-group'>
<div class='input-group'><strong data-smark='label'>Goals</strong>
<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":"clear","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","preserve_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>
<h3 data-smark='label'>Origin</h3>
<div class='form-group' data-smark='{"type":"form","name":"origin"}'>
<label class='inline'><span>0</span><span role='img' aria-label=''> 📌</span></label>
<input data-smark name='coordinates' type='text' placeholder='Lat, Lng'>
<input data-smark name='date' type='date' placeholder='dd/mm/yyyy'>
<input data-smark name='time' type='time' placeholder='hh:mm'>
<input data-smark name='place' placeholder='Place name or address'>
<input data-smark name='city' placeholder='City'>
</div>
<h3 data-smark='label'>Stops</h3>
<div class='form-group' data-smark='{"type":"list","name":"stops","min_items":0,"exportEmpties":false}'>
<div class='full-width form-group aside'>
<label class='inline'><span data-smark='{"action":"position"}'></span><span role='img' aria-label=''> 📌</span></label>
<div class='form-group'>
<input data-smark name='coordinates' type='text' placeholder='Lat, Lng'>
<input data-smark name='date' type='date' placeholder='dd/mm/yyyy'>
<input data-smark name='time' type='time' placeholder='hh:mm'>
<input data-smark name='place' placeholder='Place name or address'>
<input data-smark name='city' placeholder='City'>
</div>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove stop place' style='margin-left:auto'><span role='img' aria-label='Remove stop place'>➖</span></button>
</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>
<h3 data-smark='label'>Destination</h3>
<div class='form-group' data-smark='{"type":"form","name":"destination"}'>
<label class='inline'><span data-smark='{"action":"count","context":"../stops","delta":1}'>N</span><span role='img' aria-label=''> 📌</span></label>
<input data-smark name='coordinates' type='text' placeholder='Lat, Lng'>
<input data-smark name='date' type='date' placeholder='dd/mm/yyyy'>
<input data-smark name='time' type='time' placeholder='hh:mm'>
<input data-smark name='place' placeholder='Place name or address'>
<input data-smark name='city' placeholder='City'>
</div>
</section>
<section>
<h2>Participants</h2>
<h3 data-smark='label'>Organizers</h3>
<div class='form-group' data-smark='{"type":"list","name":"organizers","exportEmpties":false}'>
<div class='full-width form-group aside'>
<label class='inline'><span data-smark='{"action":"position"}'></span><span role='img' aria-label=''> 🧑💼</span></label>
<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>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove organizer' style='margin-left:auto'><span role='img' aria-label='Remove organizer'>➖</span></button>
</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>
<h3 data-smark='label'>Participants</h3>
<div class='form-group' data-smark='{"type":"list","name":"participants","min_items":0,"exportEmpties":false}'>
<div class='full-width form-group aside'>
<label class='inline'><span data-smark='{"action":"position"}'></span><span role='img' aria-label=''> 🏃</span></label>
<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>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove participant' style='margin-left:auto'><span role='img' aria-label='Remove participant'>➖</span></button>
</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":"clear"}' 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>
<div class="SmarkForm">
<h2>General data</h2>
<div class='form-group'>
<div class='form-group'>
<label data-smark>Name:</label>
<input data-smark type='text' name='name' placeholder='Beach Name'>
</div>
<div class='form-group'>
<label data-smark>Risk Level:</label>
<select data-smark name='risk' style='max-width: 8em'>
<option value='low'>Low</option>
<option value='medium'>Medium</option>
<option value='high'>High</option>
</select>
</div>
</div>
<div class='form-group'>
<div class='form-group'>
<label data-smark>Municipality:</label>
<input data-smark type='text' name='municipality'>
</div>
<div class='form-group'>
<label data-smark>Coordinates:</label>
<input data-smark type='text' name='coordinates' placeholder='Lat, Lng'>
</div>
</div>
<h2>Surveillance Periods</h2>
<div data-smark='{"type":"list","name":"periods","exportEmpties":true}'>
<section>
<div class='form-group aside'>
<h2>Period <span data-smark='{"action":"position"}'>N</span></h2>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove this period'><span role='img' aria-label='Remove this item'>➖</span></button>
</div>
<div class='form-group'>
<div class='form-group'>
<label data-smark>Start Date:</label>
<input data-smark type='date' name='start_date'>
</div>
<div class='form-group'>
<label data-smark>End Date:</label>
<input data-smark type='date' name='end_date'>
</div>
</div>
<h3>Schedule</h3>
<div class='form-group'>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"surveillance_schedule"}' title='Less intervals'><span role='img' aria-label='Remove interval'>➖</span></button>
<button data-smark='{"action":"addItem","hotkey":"+","context":"surveillance_schedule"}' title='More intervals'><span role='img' aria-label='Add new interval'>➕</span></button>
<label>Surveillance:</label><span data-smark='{"type":"list","name":"surveillance_schedule","min_items":0,"max_items":3}'><span>
<input class='small' data-smark type='time' name='start'>to
<input class='small' data-smark type='time' name='end'></span><span data-smark='{"role":"empty_list"}'>(No Surveillance)</span><span data-smark='{"role":"separator"}'>, </span><span data-smark='{"role":"last_separator"}'> and </span></span>
</div>
<div class='form-group'>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"boat_schedule"}' title='Less intervals'><span role='img' aria-label='Remove interval'>➖</span></button>
<button data-smark='{"action":"addItem","hotkey":"+","context":"boat_schedule"}' title='More intervals'><span role='img' aria-label='Add new interval'>➕</span></button>
<label>Boat:</label><span data-smark='{"type":"list","name":"boat_schedule","min_items":0,"max_items":3}'><span>
<input class='small' data-smark type='time' name='start'>-
<input class='small' data-smark type='time' name='end'></span><span data-smark='{"role":"empty_list"}'>(No Boat Service)</span><span data-smark='{"role":"separator"}'>, </span><span data-smark='{"role":"last_separator"}'> and </span></span>
</div>
<div class='form-group aside'>
<h3>Observation Points</h3>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"-","context":"observers"}' title='Less points'><span role='img' aria-label='Remove observation point'>➖</span></button>
<button class='inline' data-smark='{"action":"addItem","hotkey":"+","context":"observers"}' title='More points'><span role='img' aria-label='Add new observation point'>➕</span></button>
</div>
<div class='form-group' data-smark='{"type":"list","name":"observers","sortable":true}'>
<fieldset class='form-group'>
<div class='form-group'>
<label data-smark>Type:</label>
<select data-smark name='type' style='max-width: 12em'>
<option value='tower'>Tower</option>
<option value='station'>Lifeguard Station</option>
<option value='post'>Surveillance Post</option>
<option value='other'>Other</option>
</select>
</div>
<div class='form-group'>
<label data-smark>Color:</label><span data-smark='{"type":"color","name":"color"}'>
<!-- ,'value':'#ffff00' (...won't work here YET)-->
<input data-smark>
<button data-smark='{"action":"clear"}'>❌</button></span>
<!-- input(data-smark='{'type':'color','name':'color','value':'#ffff00'}')-->
<!-- button(data-smark='{'action':'clear','context':'color'}') ❌-->
</div>
<div class='form-group'>
<label data-smark>Name:</label>
<input data-smark type='text' name='name' placeholder='(Optional)'>
</div>
<div class='form-group'>
<label data-smark>Position:</label>
<input data-smark type='text' name='position' placeholder='Latitude, Longitude'>
</div>
<div class='form-group full-width'>
<div style='display: block'>
<div class='input-group'><strong data-smark='label'>Telephones</strong>
<div data-smark='{"name":"phones","type":"list","of":"input","max_items":3}'>
<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>
<div class='form-group'>
<label data-smark>Indications:</label>
<textarea rows='4' data-smark name='indications' placeholder='Where it is'></textarea>
</div>
</div>
</fieldset>
</div>
<div class='form-group aside'><span></span>
<button class='inline' data-smark='{"action":"addItem","source":".-1","hotkey":"+"}' style='float: right'><span role='img' aria-label='Duplicate this item'>✨</span>Clone this Period</button>
</div>
</section>
</div>
<div class='form-group aside reverse'>
<button class='inline' data-smark='{"action":"addItem","hotkey":"+","context":"periods"}'><span role='img' alt>➕</span> Add new Period</button>
</div>
<p> </p>
<div class='form-group aside reverse'>
<button class='inline' data-smark='{"action":"export"}'>💾 Submit</button>
<button class='inline' data-smark='{"action":"clear"}'>❌ Clear</button>
</div>
</div>
<div class="SmarkForm">
<section>
<div class='form-group h1'>Event Details</div>
<div class='input-group'>
<label data-smark>Event Name</label>
<input data-smark name='event_name' type='text' placeholder='Name of the event'>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Date</label>
<input data-smark name='event_date' type='date'>
</div>
<div class='input-group'>
<label data-smark>Time</label>
<input data-smark name='event_time' type='time'>
</div>
</div>
<div class='input-group'>
<label data-smark>Venue</label>
<input data-smark name='venue' type='text' placeholder='Venue name and address'>
</div>
</section>
<section>
<div class='form-group h2'>
<button class='foldButton' data-smark='{"action":"fold","hotkey":"f","context":"attendees","foldedClass":"folded"}'>⬇</button><span><span>Attendees (</span><span data-smark='{"action":"count","context":"attendees"}'></span><span>)</span></span>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"attendees","autoscroll":"self"}' title='Add attendee'><span role='img' aria-label='Add attendee'>➕</span></button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"attendees","preserve_non_empty":true}' title='Remove attendees from bottom prioritizing empties'><span role='img' aria-label='Shrink attendee list'>➖</span></button>
<button data-smark='{"action":"removeItem","hotkey":"*","context":"attendees","target":"*","preserve_non_empty":true}' title='Clear all empty attendees'><span role='img' aria-label='Remove all empty attendees'>🧹</span></button>
</div>
</div>
<div class='form-group'>
<div class='form-group' data-smark='{"name":"attendees","type":"list","exportEmpties":true,"sortable":true,"min_items":1}'>
<fieldset class='full-width form-group aside reverse' data-smark='{"exportEmpties":false}'>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"Delete","failback":"clear"}' title='Remove this attendee'><span role='img' aria-label='Remove this attendee'>❌</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='first_name' placeholder='First name'>
</div>
<div class='input-group'>
<label data-smark>Last Name</label>
<input data-smark name='last_name' placeholder='Last name'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Email</label>
<input data-smark name='email' type='email' placeholder='email@example.com'>
</div>
<div class='input-group'>
<label data-smark>Phone</label>
<input data-smark name='phone' type='tel' placeholder='+1 234 567 8900'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Ticket Type</label>
<select data-smark name='ticket_type'>
<option value='general'>General Admission</option>
<option value='vip'>VIP</option>
<option value='student'>Student</option>
<option value='speaker'>Speaker / Presenter</option>
</select>
</div>
<div class='input-group'>
<label data-smark>Quantity</label>
<input data-smark name='quantity' type='number' min='1' max='10' placeholder='1'>
</div>
</div>
<div class='form-group'>
<div class='input-group'><strong data-smark='label'>Dietary Requirements</strong>
<div data-smark='{"name":"dietary","type":"list","of":"input","max_items":5}'>
<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='e.g. Vegetarian, Gluten-free'/>
<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'><strong data-smark='label'>Accessibility Needs</strong>
<div data-smark='{"name":"accessibility","type":"list","of":"input","max_items":5}'>
<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='e.g. Wheelchair access'/>
<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":"attendees","autoscroll":"elegant"}' title='Add attendee'>➕</button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"attendees","preserve_non_empty":true,"autoscroll":"elegant"}' title='Remove attendee'><span role='img' aria-label='Shrink attendee list'>➖</span></button>
</div>
</section>
<section>
<div class='form-group h2'>Additional Information</div>
<div class='input-group'>
<label data-smark>How did you hear about this event?</label>
<select data-smark name='referral_source'>
<option value=''>— Select —</option>
<option value='social_media'>Social Media</option>
<option value='email'>Email Newsletter</option>
<option value='friend'>Friend or Colleague</option>
<option value='website'>Website</option>
<option value='other'>Other</option>
</select>
</div>
<div class='input-group'>
<label data-smark>Special Requests</label>
<textarea data-smark name='special_requests' placeholder='Any other requests or comments...' rows='3'></textarea>
</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":"clear","hotkey":"x"}' title='Clear form data'><span role='img' aria-label=''>❌</span> Cancel</button>
<button data-smark='{"action":"export","hotkey":"s"}' title='Submit registration'><span role='img' aria-label=''>💾</span> Register</button>
</div>
</section>
</div>
<div class="SmarkForm">
<section>
<div class='form-group h1'>Report Information</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Employee Name</label>
<input data-smark name='employee_name' type='text' placeholder='Full name'>
</div>
<div class='input-group'>
<label data-smark>Department</label>
<input data-smark name='department' type='text' placeholder='Department or team'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Report Period — Start</label>
<input data-smark name='period_start' type='date'>
</div>
<div class='input-group'>
<label data-smark>Report Period — End</label>
<input data-smark name='period_end' type='date'>
</div>
</div>
<div class='input-group'>
<label data-smark>Purpose / Project</label>
<input data-smark name='purpose' type='text' placeholder='Business purpose or project name'>
</div>
</section>
<section>
<div class='form-group h2'>
<button class='foldButton' data-smark='{"action":"fold","hotkey":"f","context":"expenses","foldedClass":"folded"}'>⬇</button><span><span>Expense Items (</span><span data-smark='{"action":"count","context":"expenses"}'></span><span>)</span></span>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"expenses","autoscroll":"self"}' title='Add expense'><span role='img' aria-label='Add expense'>➕</span></button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"expenses","preserve_non_empty":true}' title='Remove expense'><span role='img' aria-label='Remove expense'>➖</span></button>
<button data-smark='{"action":"removeItem","hotkey":"*","context":"expenses","target":"*","preserve_non_empty":true}' title='Clear empty expenses'><span role='img' aria-label='Remove empty expenses'>🧹</span></button>
</div>
</div>
<div class='form-group'>
<div class='form-group' data-smark='{"name":"expenses","type":"list","exportEmpties":true,"sortable":true,"min_items":1}'>
<fieldset class='full-width form-group aside reverse' data-smark='{"exportEmpties":false}'>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"Delete","failback":"clear"}' title='Remove this expense'><span role='img' aria-label='Remove this expense'>❌</span></button>
<div class='form-group spacer'>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Date</label>
<input data-smark name='date' type='date'>
</div>
<div class='input-group'>
<label data-smark>Category</label>
<select data-smark name='category'>
<option value='travel'>Travel</option>
<option value='meals'>Meals & Entertainment</option>
<option value='accommodation'>Accommodation</option>
<option value='office'>Office Supplies</option>
<option value='software'>Software / Subscriptions</option>
<option value='other'>Other</option>
</select>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Description</label>
<input data-smark name='description' placeholder='Brief description of the expense'>
</div>
<div class='input-group'>
<label data-smark>Amount</label>
<input data-smark name='amount' type='number' min='0' step='0.01' placeholder='0.00'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Currency</label>
<select data-smark name='currency'>
<option value='USD'>USD — US Dollar</option>
<option value='EUR'>EUR — Euro</option>
<option value='GBP'>GBP — British Pound</option>
<option value='CAD'>CAD — Canadian Dollar</option>
<option value='AUD'>AUD — Australian Dollar</option>
<option value='other'>Other</option>
</select>
</div>
<div class='input-group'>
<label data-smark>Receipt Ref.</label>
<input data-smark name='receipt_ref' placeholder='Receipt number or filename'>
</div>
</div>
<div class='input-group'>
<label data-smark>Notes</label>
<textarea data-smark name='notes' placeholder='Additional details...' rows='2'></textarea>
</div>
</div>
</fieldset>
</div>
</div>
<div class='form-group f2'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"expenses","autoscroll":"elegant"}' title='Add expense'>➕</button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"expenses","preserve_non_empty":true,"autoscroll":"elegant"}' title='Remove expense'><span role='img' aria-label='Shrink expense list'>➖</span></button>
</div>
</section>
<section>
<div class='form-group h2'>Approval</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Manager / Approver</label>
<input data-smark name='approver' type='text' placeholder='Approver name'>
</div>
<div class='input-group'>
<label data-smark>Submission Date</label>
<input data-smark name='submission_date' type='date'>
</div>
</div>
<div class='input-group'>
<label data-smark>Additional Comments</label>
<textarea data-smark name='comments' placeholder='Any additional information for the approver...' rows='3'></textarea>
</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":"clear","hotkey":"x"}' title='Clear form data'><span role='img' aria-label=''>❌</span> Cancel</button>
<button data-smark='{"action":"export","hotkey":"s"}' title='Submit expense report'><span role='img' aria-label=''>💾</span> Submit Report</button>
</div>
</section>
</div>
<div class="SmarkForm">
<section>
<div class='form-group h1'>Patient Information</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>First Name</label>
<input data-smark name='first_name' type='text' placeholder='First name'>
</div>
<div class='input-group'>
<label data-smark>Last Name</label>
<input data-smark name='last_name' type='text' placeholder='Last name'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Date of Birth</label>
<input data-smark name='dob' type='date'>
</div>
<div class='input-group'>
<label data-smark>Sex</label>
<select data-smark name='sex'>
<option value=''>— Select —</option>
<option value='male'>Male</option>
<option value='female'>Female</option>
<option value='other'>Other / Prefer not to say</option>
</select>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Phone</label>
<input data-smark name='phone' type='tel' placeholder='+1 234 567 8900'>
</div>
<div class='input-group'>
<label data-smark>Email</label>
<input data-smark name='email' type='email' placeholder='email@example.com'>
</div>
</div>
<div class='input-group'>
<label data-smark>Address</label>
<textarea data-smark name='address' placeholder='Street address, city, state, ZIP' rows='2'></textarea>
</div>
</section>
<section>
<div class='form-group h2'>Emergency Contact</div>
<div class='form-group' data-smark='{"type":"form","name":"emergency_contact"}'>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Name</label>
<input data-smark name='name' type='text' placeholder='Full name'>
</div>
<div class='input-group'>
<label data-smark>Relationship</label>
<input data-smark name='relationship' type='text' placeholder='e.g. Spouse, Parent'>
</div>
</div>
<div class='input-group'>
<label data-smark>Phone</label>
<input data-smark name='phone' type='tel' placeholder='+1 234 567 8900'>
</div>
</div>
</section>
<section>
<div class='form-group h2'><span>Current Medications</span>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"medications","autoscroll":"self"}' title='Add medication'><span role='img' aria-label='Add medication'>➕</span></button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"medications","preserve_non_empty":true}' title='Remove medication'><span role='img' aria-label='Remove medication'>➖</span></button>
</div>
</div>
<div class='form-group' data-smark='{"name":"medications","type":"list","min_items":0,"exportEmpties":false}'>
<div class='full-width form-group aside'>
<label class='inline'><span data-smark='{"action":"position"}'></span><span> 💊</span></label>
<div class='form-group spacer'>
<div class='form-group'>
<input style='flex:4' data-smark name='name' placeholder='Medication name'>
<input style='flex:2' data-smark name='dose' placeholder='Dose (e.g. 10mg)'>
<input style='flex:3' data-smark name='frequency' placeholder='Frequency (e.g. twice daily)'>
</div>
</div>
<button class='inline' data-smark='{"action":"removeItem"}' title='Remove this medication' style='margin-left:auto'><span role='img' aria-label='Remove this medication'>➖</span></button>
</div>
</div>
<div class='form-group'>
<div class='spacer'></div>
<button class='inline' data-smark='{"action":"addItem","hotkey":"+","context":"medications","autoscroll":"elegant"}'><span role='img' aria-label=''>➕</span> Add Medication</button>
</div>
</section>
<section>
<div class='form-group h2'><span>Allergies</span>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"allergies","autoscroll":"self"}' title='Add allergy'><span role='img' aria-label='Add allergy'>➕</span></button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"allergies","preserve_non_empty":true}' title='Remove allergy'><span role='img' aria-label='Remove allergy'>➖</span></button>
</div>
</div>
<div class='form-group' data-smark='{"name":"allergies","type":"list","min_items":0,"exportEmpties":false}'>
<div class='full-width form-group aside'>
<label class='inline'><span data-smark='{"action":"position"}'></span><span> ⚠️</span></label>
<div class='form-group spacer'>
<div class='form-group'>
<input style='flex:4' data-smark name='allergen' placeholder='Allergen (e.g. Penicillin, Peanuts)'>
<select style='flex:3' data-smark name='reaction'>
<option value=''>— Reaction type —</option>
<option value='rash'>Rash / Hives</option>
<option value='anaphylaxis'>Anaphylaxis</option>
<option value='nausea'>Nausea / Vomiting</option>
<option value='respiratory'>Respiratory issues</option>
<option value='other'>Other</option>
</select>
</div>
</div>
<button class='inline' data-smark='{"action":"removeItem"}' title='Remove this allergy' style='margin-left:auto'><span role='img' aria-label='Remove this allergy'>➖</span></button>
</div>
</div>
<div class='form-group'>
<div class='spacer'></div>
<button class='inline' data-smark='{"action":"addItem","hotkey":"+","context":"allergies","autoscroll":"elegant"}'><span role='img' aria-label=''>➕</span> Add Allergy</button>
</div>
</section>
<section>
<div class='form-group h2'>Medical History</div>
<div class='form-group'>
<label data-smark>Do you have any chronic conditions?</label>
<label>
<input data-smark type='radio' name='chronic_conditions' value='yes'> Yes
</label>
<label>
<input data-smark type='radio' name='chronic_conditions' value='no'> No
</label>
</div>
<div class='input-group'><strong data-smark='label'>Known Conditions</strong>
<div data-smark='{"name":"conditions","type":"list","of":"input","min_items":0,"max_items":20}'>
<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='e.g. Diabetes, Hypertension'/>
<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>Previous Surgeries or Hospitalizations</label>
<textarea data-smark name='surgery_history' placeholder='Briefly describe any past surgeries or hospital stays...' rows='3'></textarea>
</div>
</section>
<section>
<div class='form-group h2'>Reason for Visit</div>
<div class='input-group'>
<label data-smark>Chief Complaint</label>
<textarea data-smark name='chief_complaint' placeholder='Please describe your main concern or reason for today's appointment...' rows='3'></textarea>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Symptoms Since</label>
<input data-smark name='symptoms_since' type='date'>
</div>
<div class='input-group'>
<label data-smark>Pain Level (0–10)</label>
<input data-smark name='pain_level' type='number' min='0' max='10' placeholder='0'>
</div>
</div>
<div class='input-group'>
<label data-smark>Additional Notes</label>
<textarea data-smark name='notes' placeholder='Anything else you'd like the doctor to know...' rows='3'></textarea>
</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":"clear","hotkey":"x"}' title='Clear form data'><span role='img' aria-label=''>❌</span> Cancel</button>
<button data-smark='{"action":"export","hotkey":"s"}' title='Submit intake form'><span role='img' aria-label=''>💾</span> Submit</button>
</div>
</section>
</div>
<div class="SmarkForm">
<section>
<div class='form-group h1'>Property Details</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Property Address</label>
<input data-smark name='address' type='text' placeholder='Street address, city, state, ZIP'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Inspection Date</label>
<input data-smark name='inspection_date' type='date'>
</div>
<div class='input-group'>
<label data-smark>Inspector Name</label>
<input data-smark name='inspector_name' type='text' placeholder='Full name'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Landlord / Owner</label>
<input data-smark name='landlord' type='text' placeholder='Name'>
</div>
<div class='input-group'>
<label data-smark>Tenant</label>
<input data-smark name='tenant' type='text' placeholder='Name'>
</div>
</div>
<div class='form-group'>
<label data-smark>Inspection Type</label>
<label>
<input data-smark type='radio' name='inspection_type' value='move_in'> Move-In
</label>
<label>
<input data-smark type='radio' name='inspection_type' value='routine'> Routine
</label>
<label>
<input data-smark type='radio' name='inspection_type' value='move_out'> Move-Out
</label>
</div>
</section>
<section>
<div class='form-group h2'>
<button class='foldButton' data-smark='{"action":"fold","hotkey":"f","context":"rooms","foldedClass":"folded"}'>⬇</button><span><span>Rooms (</span><span data-smark='{"action":"count","context":"rooms"}'></span><span>)</span></span>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"rooms","autoscroll":"self"}' title='Add room'><span role='img' aria-label='Add room'>➕</span></button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"rooms","preserve_non_empty":true}' title='Remove room'><span role='img' aria-label='Remove room'>➖</span></button>
<button data-smark='{"action":"removeItem","hotkey":"*","context":"rooms","target":"*","preserve_non_empty":true}' title='Clear empty rooms'><span role='img' aria-label='Remove empty rooms'>🧹</span></button>
</div>
</div>
<div class='form-group'>
<div class='form-group' data-smark='{"name":"rooms","type":"list","exportEmpties":true,"sortable":true,"min_items":1}'>
<fieldset class='full-width form-group aside reverse' data-smark='{"exportEmpties":false}'>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"Delete","failback":"clear"}' title='Remove this room'><span role='img' aria-label='Remove this room'>❌</span></button>
<div class='form-group spacer'>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Room Name</label>
<input data-smark name='room_name' placeholder='e.g. Living Room, Bedroom 1'>
</div>
<div class='input-group'>
<label data-smark>Overall Condition</label>
<select data-smark name='condition'>
<option value='excellent'>Excellent</option>
<option value='good'>Good</option>
<option value='fair'>Fair</option>
<option value='poor'>Poor</option>
</select>
</div>
</div>
<div class='form-group h3'><span>Issues Found</span>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"issues","autoscroll":"self"}' title='Add issue'><span role='img' aria-label='Add issue'>➕</span></button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"issues","preserve_non_empty":true}' title='Remove issue'><span role='img' aria-label='Remove issue'>➖</span></button>
</div>
</div>
<div class='form-group' data-smark='{"name":"issues","type":"list","min_items":0,"exportEmpties":false}'>
<div class='full-width form-group aside'>
<label class='inline'><span data-smark='{"action":"position"}'></span><span> 🔍</span></label>
<div class='form-group spacer'>
<div class='form-group'>
<input style='flex:4' data-smark name='description' placeholder='Issue description'>
<select style='flex:2' data-smark name='severity'>
<option value='minor'>Minor</option>
<option value='moderate'>Moderate</option>
<option value='major'>Major</option>
</select>
</div>
</div>
<button class='inline' data-smark='{"action":"removeItem"}' title='Remove this issue' style='margin-left:auto'><span role='img' aria-label='Remove this issue'>➖</span></button>
</div>
</div>
<div class='input-group'>
<label data-smark>Notes</label>
<textarea data-smark name='notes' placeholder='Additional notes for this room...' rows='2'></textarea>
</div>
</div>
</fieldset>
</div>
</div>
<div class='form-group f2'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"rooms","autoscroll":"elegant"}' title='Add room'>➕</button>
</div>
</section>
<section>
<div class='form-group h2'>Utilities Check</div>
<div class='form-group' data-smark='{"type":"form","name":"utilities"}'>
<fieldset class='form-group'>
<label data-smark>Electricity</label>
<label>
<input data-smark type='radio' name='electricity' value='ok'> OK
</label>
<label>
<input data-smark type='radio' name='electricity' value='issue'> Issue
</label>
<label>
<input data-smark type='radio' name='electricity' value='na'> N/A
</label>
</fieldset>
<fieldset class='form-group'>
<label data-smark>Water / Plumbing</label>
<label>
<input data-smark type='radio' name='plumbing' value='ok'> OK
</label>
<label>
<input data-smark type='radio' name='plumbing' value='issue'> Issue
</label>
<label>
<input data-smark type='radio' name='plumbing' value='na'> N/A
</label>
</fieldset>
<fieldset class='form-group'>
<label data-smark>Heating / Cooling</label>
<label>
<input data-smark type='radio' name='hvac' value='ok'> OK
</label>
<label>
<input data-smark type='radio' name='hvac' value='issue'> Issue
</label>
<label>
<input data-smark type='radio' name='hvac' value='na'> N/A
</label>
</fieldset>
</div>
<div class='input-group'>
<label data-smark>General Observations</label>
<textarea data-smark name='general_observations' placeholder='Overall property condition and additional remarks...' rows='3'></textarea>
</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":"clear","hotkey":"x"}' title='Clear form data'><span role='img' aria-label=''>❌</span> Cancel</button>
<button data-smark='{"action":"export","hotkey":"s"}' title='Submit inspection report'><span role='img' aria-label=''>💾</span> Submit Report</button>
</div>
</section>
</div>
<div class="SmarkForm">
<section>
<div class='form-group h1'>Reservation Details</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Guest Name</label>
<input data-smark name='guest_name' type='text' placeholder='Full name'>
</div>
<div class='input-group'>
<label data-smark>Phone</label>
<input data-smark name='phone' type='tel' placeholder='+1 234 567 8900'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Email</label>
<input data-smark name='email' type='email' placeholder='email@example.com'>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Date</label>
<input data-smark name='reservation_date' type='date'>
</div>
<div class='input-group'>
<label data-smark>Time</label>
<select data-smark name='reservation_time'>
<option value=''>— Select time —</option>
<option value='12:00'>12:00 — Lunch</option>
<option value='13:00'>13:00</option>
<option value='14:00'>14:00</option>
<option value='19:00'>19:00 — Dinner</option>
<option value='20:00'>20:00</option>
<option value='21:00'>21:00</option>
</select>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Party Size</label>
<input data-smark name='party_size' type='number' min='1' max='20' placeholder='Number of guests'>
</div>
<div class='input-group'>
<label data-smark>Seating Preference</label>
<select data-smark name='seating'>
<option value=''>— No preference —</option>
<option value='indoor'>Indoor</option>
<option value='outdoor'>Outdoor / Terrace</option>
<option value='private'>Private Room</option>
<option value='bar'>Bar Area</option>
</select>
</div>
</div>
<div class='input-group'><strong data-smark='label'>Dietary Requirements</strong>
<div data-smark='{"name":"dietary_requirements","type":"list","of":"input","min_items":0,"max_items":10}'>
<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='e.g. Vegetarian, Gluten-free, Halal'/>
<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>Special Requests</label>
<textarea data-smark name='special_requests' placeholder='Occasion, accessibility needs, high chairs, etc.' rows='2'></textarea>
</div>
</section>
<section>
<div class='form-group h2'>
<button class='foldButton' data-smark='{"action":"fold","hotkey":"f","context":"preorders","foldedClass":"folded"}'>⬇</button><span><span>Preorder (</span><span data-smark='{"action":"count","context":"preorders"}'></span><span>guests)</span></span>
<div class='form-group'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"preorders","autoscroll":"self"}' title='Add guest preorder'><span role='img' aria-label='Add guest preorder'>➕</span></button>
<button data-smark='{"action":"removeItem","hotkey":"-","context":"preorders","preserve_non_empty":true}' title='Remove guest preorder'><span role='img' aria-label='Remove guest preorder'>➖</span></button>
<button data-smark='{"action":"removeItem","hotkey":"*","context":"preorders","target":"*","preserve_non_empty":true}' title='Clear empty preorders'><span role='img' aria-label='Remove empty preorders'>🧹</span></button>
</div>
</div>
<div class='form-group'>
<div class='form-group' data-smark='{"name":"preorders","type":"list","min_items":0,"exportEmpties":false,"sortable":true}'>
<fieldset class='full-width form-group aside reverse' data-smark='{"exportEmpties":false}'>
<button class='inline' data-smark='{"action":"removeItem","hotkey":"Delete","failback":"clear"}' title='Remove this guest preorder'><span role='img' aria-label='Remove this guest preorder'>❌</span></button>
<div class='form-group spacer'>
<div class='form-group h3'><span>Guest <span data-smark='{"action":"position"}'></span></span></div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Guest Name / Label</label>
<input data-smark name='guest_label' placeholder='e.g. Guest 1 or Alice'>
</div>
<div class='input-group'>
<label data-smark>Dietary Notes</label>
<input data-smark name='dietary_notes' placeholder='e.g. Vegan, Nut allergy'>
</div>
</div>
<div class='form-group h3'>Courses</div>
<div class='form-group' data-smark='{"type":"form","name":"courses"}'>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Starter</label>
<select data-smark name='starter'>
<option value=''>— None —</option>
<option value='soup'>Soup of the Day</option>
<option value='salad'>Garden Salad</option>
<option value='bruschetta'>Bruschetta</option>
<option value='shrimp_cocktail'>Shrimp Cocktail</option>
<option value='charcuterie'>Charcuterie Board</option>
</select>
</div>
<div class='input-group'>
<label data-smark>Main Course</label>
<select data-smark name='main'>
<option value=''>— None —</option>
<option value='steak'>Grilled Steak</option>
<option value='salmon'>Pan-Seared Salmon</option>
<option value='pasta'>Pasta Primavera</option>
<option value='risotto'>Mushroom Risotto</option>
<option value='chicken'>Roasted Chicken</option>
<option value='veggie_burger'>Veggie Burger</option>
</select>
</div>
</div>
<div class='form-group'>
<div class='input-group'>
<label data-smark>Dessert</label>
<select data-smark name='dessert'>
<option value=''>— None —</option>
<option value='tiramisu'>Tiramisu</option>
<option value='cheesecake'>Cheesecake</option>
<option value='sorbet'>Lemon Sorbet</option>
<option value='brownie'>Chocolate Brownie</option>
<option value='fruit'>Seasonal Fruit</option>
</select>
</div>
<div class='input-group'>
<label data-smark>Drink</label>
<select data-smark name='drink'>
<option value=''>— None —</option>
<option value='water'>Still Water</option>
<option value='sparkling'>Sparkling Water</option>
<option value='juice'>Juice</option>
<option value='wine_red'>Red Wine</option>
<option value='wine_white'>White Wine</option>
<option value='beer'>Beer</option>
<option value='soft'>Soft Drink</option>
</select>
</div>
</div>
</div>
<div class='input-group'>
<label data-smark>Additional Course Notes</label>
<textarea data-smark name='course_notes' placeholder='e.g. Steak medium-rare, sauce on the side...' rows='2'></textarea>
</div>
</div>
</fieldset>
</div>
</div>
<div class='form-group f2'>
<div class='spacer'></div>
<button data-smark='{"action":"addItem","hotkey":"+","context":"preorders","autoscroll":"elegant"}' title='Add guest preorder'>➕</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":"clear","hotkey":"x"}' title='Clear form data'><span role='img' aria-label=''>❌</span> Cancel</button>
<button data-smark='{"action":"export","hotkey":"s"}' title='Confirm reservation and preorder'><span role='img' aria-label=''>💾</span> Confirm Reservation</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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.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 clear action
myForm.on("BeforeAction_clear", async ({context, preventDefault}) => {
// Ask for confirmation:
if (
context.getPath() == "/" // Only for the whole form
&& ! await context.isEmpty() // Don't even ask if already empty
&& ! confirm("Are you sure?")
) 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.on("afterRender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.add("animated_item");
await delay(1); /* Important: Allow DOM to update */
item.classList.add("ongoing");
});
myForm.on("beforeUnrender", async function(ev) {
if (ev.context.parent?.options.type !== "list") return; /* Only for list items */
const item = ev.context.targetNode;
item.classList.remove("ongoing");
/* Await for transition to be finished before item removal: */
await delay(150);
});