Accessibility
Accessible Labels and Names
Component Types Overview
SmarkForm enhances the HTML you author into a component tree. Forms represent objects, lists represent arrays, and fields provide values at the leaves. A trigger invokes an action on a component; a label associates text with a field or component. The pages below describe each type’s options and behavior.
📖 Table of Contents
Complex field types
| Type | Role | Value shape | Reference |
|---|---|---|---|
form | Groups named child components | JSON object | Form |
list | Repeats an item template | JSON array | List |
Scalar field types
Scalar types wrap native controls and normalize their values for import/export. Use the detailed references for accepted inputs, empty values, and options.
Input controls
| Type | Typical elements | Value shape | Reference |
|---|---|---|---|
input | <input>, <textarea>, <select> | Usually a string; checkboxes export booleans; format:"json" parses JSON text | Input |
radio | A group of <input type="radio"> elements | Selected value or null | Radio |
A native <select> is handled by input; it is not a separate built-in component type. Dynamic remote options are a separate proposal, not implemented; see Select and the Roadmap.
Number and date/time fields
| Type | Native element | Export shape | Reference |
|---|---|---|---|
number | <input type="number"> | Number or null | Number |
date | <input type="date"> | ISO date string or null | Date |
time | <input type="time"> | HH:mm:ss string or null | Time |
datetime-local | <input type="datetime-local"> | Local date-time string or null | DateTime-Local |
Color fields
| Type | Native element | Export shape | Reference |
|---|---|---|---|
color | <input type="color"> | Hex string or null | Color |
File and media fields
These fields embed their selected bytes in the form value. They export a self-describing data URL by default, or a structured object with format:"json"; an empty field exports null.
| Type | Native element | Specialization | Reference |
|---|---|---|---|
file | Explicit type:"file" on an input or singleton | Whole-file picker, drop, paste and download | File |
image | <img> (inferred) or singleton | Decode validation and optional resize/format conversion | Image |
video | <video> (inferred) or singleton | Native playback plus picker and size validation | Video |
audio | <audio> (inferred) or singleton | Native playback plus picker and size validation | Audio |
Non-field component types
Trigger
A trigger connects a button or other element to an action such as clear, export, addItem, or a registered custom action. See Trigger.
Label
A label associates native label text with a field or uses a non-native element to label a complex component. See Label and Accessible Labels and Names.
Singleton Pattern
A scalar field can use a non-field wrapper containing exactly one unnamed native field, with labels and triggers alongside it. This keeps the exported data tree scalar while allowing richer markup. See the Singleton Pattern guide.
A small component tree
The form below maps a project and its tasks to a nested object and array. The demoValue populates the example; choose Show JSON to inspect the exported shape. Use the controls to see how the list changes.
🔗
<div id="myForm">
<p>
<label data-smark>Project:</label>
<input name="project" data-smark type="text">
</p>
<fieldset>
<legend>Tasks</legend>
<ul data-smark='{"type":"list","name":"tasks","of":"form","min_items":0}'>
<li>
<label data-smark>Task:</label>
<input name="title" data-smark type="text">
<button data-smark='{"action":"removeItem"}' type="button">Remove</button>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"tasks"}' type="button">Add task</button>
</fieldset>
<button data-smark='{"action":"export"}' type="button">Show JSON</button>
<pre data-export aria-live="polite">Exported data appears here.</pre>
</div>
const myForm = new SmarkForm(document.getElementById("myForm"), {
"value": {
"project": "Website refresh",
"tasks": [
{"title": "Gather requirements"},
{"title": "Build the form"}
]
}
});const output = myForm.targetNode.querySelector("[data-export]");
myForm.on("AfterAction_export", (ev) => {
output.textContent = JSON.stringify(ev.data, null, 2);
});
Try it: Edit the project or task names, add or remove a task, then choose Show JSON. The output shows a form object containing a tasks array of item objects.
Quick reference
The Developer Cheatsheet collects common constructor options, component syntax, actions, paths, events, methods, and patterns in one place. Use the linked type references for complete options and edge cases.