HTML Form Basics – form, action, method, label, input

The form Element

The <form> element wraps all the controls (inputs, buttons, selects) that belong to a single form. It tells the browser where to send the data and how to send it when the user submits.

<form action="/submit" method="POST">
  <!-- form controls go here -->
</form>

The two most important attributes on <form> are action and method.

The action Attribute

The action attribute specifies the URL the form data is sent to when the user submits. It can be an absolute or relative URL.

<!-- Relative URL – sends to same origin -->
<form action="/contact/send">…</form>

<!-- Absolute URL – sends to external server -->
<form action="https://api.example.com/subscribe">…</form>

<!-- No action or empty string – submits to current page URL -->
<form action="">…</form>
<form>…</form>

The method Attribute

The method attribute controls the HTTP method used to send the data. It accepts two values: get and post (case-insensitive).

<form action="/search" method="GET">…</form>
<form action="/login" method="POST">…</form>

GET vs POST – Key Differences

Choosing the right method matters for security, bookmarkability, and server behaviour.

The label Element

The <label> element provides a text description for a form control. It improves usability and is essential for accessibility — screen readers read the label aloud when a user focuses the associated input.

Connect a label to its input using the for attribute on the label and a matching id on the input.

<!-- Explicit label: for="" matches input id="" -->
<label for="username">Username</label>
<input type="text" id="username" name="username">

<!-- Implicit label: input nested inside label (no for/id needed) -->
<label>
  Email address
  <input type="email" name="email">
</label>

Basic Text Input and Submit Button

The simplest possible form has one text input and a submit button. The type="text" input accepts any text, and type="submit" creates the button that sends the form.

<form action="/search" method="GET">
  <label for="query">Search the site</label>
  <input type="text" id="query" name="q" placeholder="Enter a topic…">
  <input type="submit" value="Search">
</form>

When the user types "HTML forms" and clicks Search, the browser navigates to /search?q=HTML+forms.

The name Attribute – How Data is Keyed

The name attribute on each input is the key that identifies that piece of data when the form is submitted. Without a name, the browser silently omits that field from the submitted data.

<form action="/register" method="POST">
  <label for="first-name">First name</label>
  <input type="text" id="first-name" name="first_name">

  <label for="last-name">Last name</label>
  <input type="text" id="last-name" name="last_name">

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

  <input type="submit" value="Create account">
</form>

<!-- POST body sent to server (URL-encoded):
  first_name=Alice&last_name=Smith&email=alice%40example.com -->

Notice the difference between id (used only to connect a label) and name (used by the browser to build the submitted data). Both can be the same value, but they serve different purposes.

What Happens on Form Submit

When a user clicks a submit button (or presses Enter in a single-field form), the browser:

1. Collects all named form controls inside the <form> element.
2. Encodes them as key-value pairs using the name and current value of each control.
3. Sends an HTTP request to the action URL using the specified method.
4. Navigates to the response returned by the server.

For a GET form, the data is appended to the URL as a query string. For a POST form, the data travels in the invisible request body.

Complete Multi-Field Form Example

Here is a realistic contact form combining everything above:

<form action="/contact/send" method="POST">

  <div class="form-group">
    <label for="contact-name">Your name</label>
    <input type="text" id="contact-name" name="name" placeholder="Alice Smith">
  </div>

  <div class="form-group">
    <label for="contact-email">Email address</label>
    <input type="email" id="contact-email" name="email" placeholder="alice@example.com">
  </div>

  <div class="form-group">
    <label for="contact-subject">Subject</label>
    <input type="text" id="contact-subject" name="subject" placeholder="Question about billing…">
  </div>

  <div class="form-group">
    <label for="contact-message">Message</label>
    <textarea id="contact-message" name="message" rows="5" placeholder="Your message here…"></textarea>
  </div>

  <button type="submit">Send message</button>

</form>