Keyboard Navigation

SmarkForm provides an intuitive keyboard-driven interface that lets users fill data fluently without switching between keyboard and mouse.

Enter / Shift+Enter Navigation

Press Enter to move forward to the next field, and Shift+Enter to move backward. This is more convenient than Tab and Shift+Tab — it skips controls that would otherwise interrupt the data-entry flow, providing a more fluid experience.

🔗
🗒️ HTML
🎨 CSS
⚙️ JS 👁️ Preview 📝 Notes ❓ 
<div id="myForm">
  <p>
    <label data-smark>First name:</label>
    <input data-smark type="text" name="first">
  </p>
  <p>
    <label data-smark>Last name:</label>
    <input data-smark type="text" name="last">
  </p>
  <p>
    <label data-smark>Email:</label>
    <input data-smark type="email" name="email">
  </p>
  <p>
    <label data-smark>Message:</label>
    <textarea data-smark name="message"></textarea>
  </p>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"));

Press Enter in any text field to move to the next one. Shift+Enter goes backward. In the textarea, use Ctrl+Enter to advance (plain Enter` inserts a new line).

Every example in this section comes with many of the following tabs:

  • HTML: HTML source code of the example.
  • CSS: CSS applied (if any).
  • JS: JavaScript source code of the example.
  • Preview: Live, sandboxed rendering of the example — fully isolated from the page styles.
  • Notes: Additional notes and insights for better understanding. Don't miss it‼️

🛠️ Between the tab labels and the content there is always an edit toolbar:

  • ✏️ Edit — activates edit mode: each source tab turns into a syntax-highlighted code editor (powered by Ace) pre-filled with the full, merged source. Changes are sandboxed — the original example is not affected.
  • 📋 Include playground editor — (only visible in edit mode) controls whether the JSON playground editor is included in the preview. When toggled, the HTML and JS editors update instantly so you can see exactly what code is needed to add or remove it. Disabled for this example.
  • ▶️ Run — (only visible in edit mode) re-renders the Preview from the current editor contents and switches to the Preview tab.

In textareas, use Ctrl+Enter instead. Plain Enter inserts a new line in the text.

Tab-Flow Exclusion for Hotkey-Equipped Buttons

Buttons that have a hotkey defined are automatically taken out of the Tab navigation flow. This prevents having to tab through dozens of inner-list action buttons (e.g. ➖ remove buttons) when filling a long list.

  • Inner buttons (inside list items): Removed from Tab flow — users can activate them via their hotkey instead.
  • Outer buttons (siblings of the list): Kept in Tab flow — with min_items: 0, the only way to create the first item is via the outer add button, which must remain keyboard-accessible.

🔗
🗒️ HTML
🎨 CSS
⚙️ JS 👁️ Preview 📝 Notes ❓ 
<div id="myForm">
  <button data-smark='{"action":"addItem","context":"items","hotkey":"+"}' title="Add">➕ Add</button>
  <button data-smark='{"action":"removeItem","context":"items","hotkey":"Delete","preserve_non_empty":true}' title="Remove empty">🧹</button>
  <ul data-smark='{"type":"list","name":"items","min_items":1}'>
    <li>
      <input data-smark type="text" placeholder="Item name">
      <button data-smark='{"action":"removeItem","hotkey":"-"}' title="Remove this">➖</button>
      <button data-smark='{"action":"addItem","hotkey":"+"}' title="Insert here">➕</button>
    </li>
  </ul>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"));

Press Tab through the form — the outer ➕ Add/🧹 buttons are reachable, but the inner ➖/➕ buttons inside each list item are skipped. Hold Ctrl to reveal their hotkey shortcuts instead.

Every example in this section comes with many of the following tabs:

  • HTML: HTML source code of the example.
  • CSS: CSS applied (if any).
  • JS: JavaScript source code of the example.
  • Preview: Live, sandboxed rendering of the example — fully isolated from the page styles.
  • Notes: Additional notes and insights for better understanding. Don't miss it‼️

🛠️ Between the tab labels and the content there is always an edit toolbar:

  • ✏️ Edit — activates edit mode: each source tab turns into a syntax-highlighted code editor (powered by Ace) pre-filled with the full, merged source. Changes are sandboxed — the original example is not affected.
  • 📋 Include playground editor — (only visible in edit mode) controls whether the JSON playground editor is included in the preview. When toggled, the HTML and JS editors update instantly so you can see exactly what code is needed to add or remove it. Disabled for this example.
  • ▶️ Run — (only visible in edit mode) re-renders the Preview from the current editor contents and switches to the Preview tab.

Hold Ctrl to discover available hotkeys — each trigger button with a hotkey shows a tooltip revealing its keyboard shortcut.

Alt+Enter for Collapsed Sections

When navigating with Enter / Shift+Enter, fields inside a closed <details> element are skipped. To navigate into them, hold Alt while pressing Enter — SmarkForm automatically opens any closed <details> ancestors along the path.

This allows you to keep optional sections collapsed by default while still being able to arrow-key into them when you need to fill data.

🔗
🗒️ HTML
🎨 CSS
⚙️ JS 👁️ Preview 📝 Notes ❓ 
<div id="myForm">
  <p>
    <label data-smark>Full name:</label>
    <input data-smark type="text" name="name">
  </p>
  <p>
    <label data-smark>Email:</label>
    <input data-smark type="email" name="email">
  </p>
  <details>
    <summary>Optional: Billing Address</summary>
    <p>
      <label data-smark>Street:</label>
      <input data-smark type="text" name="street">
    </p>
    <p>
      <label data-smark>City:</label>
      <input data-smark type="text" name="city">
    </p>
    <p>
      <label data-smark>ZIP:</label>
      <input data-smark type="text" name="zip">
    </p>
  </details>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"));

Press Enter from the Email field — navigation jumps over the collapsed Billing Address section. Hold Alt+Enter instead, and SmarkForm opens the <details> before moving focus into its first field.

Every example in this section comes with many of the following tabs:

  • HTML: HTML source code of the example.
  • CSS: CSS applied (if any).
  • JS: JavaScript source code of the example.
  • Preview: Live, sandboxed rendering of the example — fully isolated from the page styles.
  • Notes: Additional notes and insights for better understanding. Don't miss it‼️

🛠️ Between the tab labels and the content there is always an edit toolbar:

  • ✏️ Edit — activates edit mode: each source tab turns into a syntax-highlighted code editor (powered by Ace) pre-filled with the full, merged source. Changes are sandboxed — the original example is not affected.
  • 📋 Include playground editor — (only visible in edit mode) controls whether the JSON playground editor is included in the preview. When toggled, the HTML and JS editors update instantly so you can see exactly what code is needed to add or remove it. Disabled for this example.
  • ▶️ Run — (only visible in edit mode) re-renders the Preview from the current editor contents and switches to the Preview tab.

Using <details> as List Items

A powerful design pattern is to wrap each list item in a <details> element with the item’s key identifying field placed inside the <summary>. This way, even when collapsed, the key information remains visible so the user can quickly scan the list, while the full details expand on click.

SmarkForm fields inside the <details> work exactly as they would anywhere else — the browser handles the show/hide toggle natively. Combined with Space/Shift+Space toggling and Alt+Enter for navigation into collapsed sections, this creates an accessible, space-efficient list UI without any custom JavaScript.

Working with Forms
Form Traversing
Working with Forms
Hotkeys