Input HarborISSUE #2 of 46

form attributes · action · method · target

FormaVSCaptain Invalid Input

Forma saysForm attributes control where and how data goes: action, method, target, enctype, and novalidate.

action is the destination URL; method is get (data in the URL, for searches) or post (data in the body, for changes). target can open the response in a new tab. enctype="multipart/form-data" is required when uploading files.

novalidate disables the browser's built-in validation. Get method right first: GET is bookmarkable and idempotent; POST is for anything that creates, changes, or is sensitive.

Power-ups you unlock

action = where · method = how (get/post)
GET → URL query (searches) · POST → body (changes)
enctype="multipart/form-data" for file uploads
novalidate turns off native validation

Captain Invalid Input attacks — common mistakes

POSTing a file upload without multipart/form-data enctype
Using GET to submit passwords or large payloads
Hard-coding action to an absolute URL that breaks across environments

Boss battleSwitch a form between method="get" and method="post" and observe where the submitted data shows up each time.

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="post" enctype="multipart/form-data">
    <label>file <input type="file" name="upload"></label><br><br>
    <button>upload (post + multipart)</button>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Forms · The User-Input Frame Form Elements · All The Input Families ›