HTML Forms and Submission

Forms are how HTML collects information from users and sends it somewhere for processing — a login, a search box, a checkout page, or a contact form. The <form> element wraps all of these interactive controls and defines where and how their collected data is submitted.

Why it matters

Login, sign-up, search, checkout and contact pages are all forms. They are how users send data to a server. Understanding what action, method and name do explains what actually leaves the browser when the button is pressed, which is essential for working with any back end.

The action and method Attributes

action specifies the URL that receives the submitted form data; if omitted, the form submits to the current page's own URL. method specifies the HTTP method used: GET appends form data as a visible query string in the URL (suitable for searches or non-sensitive filters), while POST sends data in the request body, which is required for anything that changes server state or contains sensitive information like passwords.

The Submission Flow

When a user activates a submit control (typically a <button type="submit"> or <input type="submit">) inside a form, the browser first runs any native validation on the fields (like required or pattern), and if all fields pass, it gathers each control's name/value pair and sends the request to action using method. If validation fails, submission is blocked and the browser highlights the first invalid field.

• Every field that should be submitted needs a name attribute — without it, its value is not included in the submitted data.
• GET — data visible in the URL, bookmarkable, appropriate for searches.
• POST — data sent in the request body, appropriate for sensitive or state-changing submissions.

Example

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

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send Message</button>
</form>

Displays a text field and a textarea with a Send Message button; clicking it validates that both fields are filled in, then sends a POST request to /submit-contact with name and message values in the request body.

Exercise

Build a contact form that sends its data with the POST method to /contact. It needs a text field named name, a multi-line field named message, each with a label, and a submit button reading Send.

Expected result: a form with two labelled fields and a Send button.

<!-- TODO: form with action and method -->
<!-- TODO: labelled name field -->
<!-- TODO: labelled message field -->
<!-- TODO: submit button -->

<form action="/contact" method="post">
  <p>
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
  </p>
  <p>
    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>
  </p>
  <button type="submit">Send</button>
</form>

Quick quiz

Interview questions