devnotes.

Building a Basic Form

Forms let visitors submit data — signups, search boxes, contact requests. Every form starts with the <form> tag.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

Key pieces:

  • action — the URL the form data is sent to when submitted.
  • methodGET appends data to the URL (visible, used for searches/filters); POST sends data in the request body (used for anything sensitive or that changes data, like signups).
  • <label for="..."> paired with an input's matching id — clicking the label focuses the input, and screen readers announce the label when the input is focused. This pairing is not optional for accessible forms.
  • name — the key used when the data is sent to the server; without it, the field's value won't be submitted at all.
  • <button type="submit"> — triggers form submission. type="button" would do nothing by default (useful for JavaScript-only actions), and omitting type defaults to submit inside a form, which can cause accidental submissions.

Always pair every visible input with a <label> — placeholder text alone is not an accessible substitute for a label.