Form integration

Two independent instances inside a single form. Each serialises its tags into its own hidden input. The Reset button restores tags to their initial values.

Submitted data

— submit the form to see the payload —

View code

<form id="survey" novalidate>
  <fieldset>
    <legend>Preferences</legend>

    <div class="field">
      <label for="skills">Skills</label>
      <input id="skills" type="text" name="skills" value="JavaScript,TypeScript" /
      <p class="note">Pre-populated from the value attribute.</p>
    </div>

    <div class="field">
      <label for="tools">Favourite tools</label>
      <input id="tools" type="text" name="tools" />
    </div>
  </fieldset>

  <div class="actions">
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>

<pre id="output">— submit the form to see the payload —</pre>

<script type="module">
  import { Taga11y } from '../dist/taga11y.mjs';

  new Taga11y(document.getElementById('skills'), {
    suggestions: ['CSS', 'Go', 'HTML', 'JavaScript', 'Python', 'Rust', 'TypeScript'],
  });

  new Taga11y(document.getElementById('tools'), {
    suggestions: ['ESLint', 'Git', 'Node.js', 'Playwright', 'Vite', 'Vitest', 'VS Code'],
  });

  document.getElementById('survey').addEventListener('submit', (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target));
    document.getElementById('output').textContent = JSON.stringify(data, null, 2);
  });
</script>