Input HarborISSUE #15 of 46

button · type · submit · reset · button

FormaVSCaptain Invalid Input

Forma says<button> does three jobs set by type: submit (default), reset, and button (do-nothing until JS wires it).

A <button> defaults to type="submit" — inside a form it sends the data. type="reset" clears the form. type="button" does nothing on its own; it's the one you attach JavaScript to.

This default trips people up: a plain button inside a form submits it. If you want a JS-only button (e.g. "toggle"), you must set type="button" explicitly. Unlike <input type="submit">, <button> can contain HTML (icons, markup).

Power-ups you unlock

Default type is submit — buttons in forms submit
type="reset" clears the form
type="button" = inert until JS handles it
<button> can hold HTML; <input type=submit> cannot

Captain Invalid Input attacks — common mistakes

A JS button without type="button" accidentally submitting the form
Using reset buttons (they frustrate users who clear by accident)
Building a clickable <div> instead of a real <button>

Boss battlePut three buttons in a form: submit, reset, and a type="button" that shows an alert via JS.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <input name="x" value="edit me">
    <button>submit</button>
    <button type="reset">reset</button>
    <button type="button" onclick="alert('inert until JS')">JS button</button>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Textarea · Multiline Input Validation · Client-Side Vs Server-Side ›