Input HarborISSUE #1 of 46

forms · the user-input frame

FormaVSCaptain Invalid Input

Forma saysA <form> collects user input and sends it somewhere — the gateway between your page and a server.

The <form> element wraps input controls and defines what happens when the user submits: action is the URL that receives the data, method is how it's sent (GET or POST).

Inside, you place controls — <input>, <select>, <textarea>, <button> — each with a name so the server knows which value is which. A submit button (or Enter) triggers the send.

Power-ups you unlock

<form action="url" method="get|post"> wraps the controls
Each control needs a name to be submitted
A submit button (or Enter) sends the form
Without JS, submitting navigates to the action URL

Captain Invalid Input attacks — common mistakes

Controls with no name attribute → their values are not sent
Using GET for sensitive data (it ends up in the URL)
Forgetting a submit button and wondering why Enter does nothing

Boss battleBuild a form with one named text input and a submit button. Submit it and watch the data appear in the URL (GET).

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="#" method="get">
    <label>name <input name="username"></label>
    <button>submit</button>
  </form>
</body></html>

▶ Open the interactive comic issue

Form Attributes · Action · Method · Target ›