HTML Forms for Practice — Exercises with Working Solutions

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="redirect"   value="https://yoursite.com/thanks" />

  <label>Name<input name="name" required /></label>
  <label>Email<input name="email" type="email" required /></label>
  <label>Message<textarea name="message" required></textarea></label>

  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
  <button type="submit">Send</button>
</form>

The fastest way to learn HTML forms is to build six of them and submit them to a real backend. Tutorials that demo HTML markup without a working POST destination teach you 60% of the picture — the markup, the validation, the styling — but skip the part where the submission has to land somewhere. The exercises below close that gap by using splitforms's free `/api/submit` endpoint.

Exercise 1: build a minimal contact form (name, email, message). Submit it to splitforms. Verify the email arrives in your inbox. This is the baseline; if this doesn't work, nothing else does. Exercise 2: extend the form with native validation — `required`, `type="email"`, `minlength`. Try submitting empty fields and observe the browser's native validation UI.

Exercise 3: build a registration form with password confirmation. Hint: native HTML has no `equalTo` attribute; use `setCustomValidity` in 5 lines of JS. Exercise 4: add a file upload field. Don't forget `enctype="multipart/form-data"` on the form — the #1 forgotten step. Exercise 5: convert the form to multi-step (3 steps), with a progress indicator and partial-save behavior.

Exercise 6: audit your form for accessibility. Run it through axe DevTools or Lighthouse. Fix issues — missing labels, low contrast, keyboard navigation, focus order. Browse the /guides directory for solution snippets to each exercise.

Six exercises, real backend, real submissions. That's the loop.