Form Submission: Action and Method Attributes

When you click a Submit button on a website, a lot happens behind the scenes. The browser sends your form data (like your name or email) to a server. Two small HTML attributes control where the data goes and how it’s sent: action and method.

In this beginner-friendly guide, you’ll learn what action and method are, why they matter, and how to use them in your own forms. We’ll build a few simple examples together, step-by-step.

What is a form in HTML?

An HTML form is a section of a web page where users can type information. For example, a login box, a search bar, or a newsletter signup.

A basic form looks like this:

<form>
  <!-- Form fields go here -->
</form>

Inside the <form> tag, you add inputs like text boxes, email fields, and buttons. When the user clicks Submit, the browser sends the data somewhere.

That “somewhere” and the “how” are controlled by the action and method attributes.

The `action` Attribute: Where the Data Goes

Think of action as the destination address for your form data. It tells the browser which URL to send the information to when the form is submitted.

Basic example with `action`

<form action="https://example.com/submit-form">
  <label>
    Your name:
    <input type="text" name="username">
  </label>

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

What’s happening here?

<form action="https://example.com/submit-form">
- action is set to a URL.
- When you click Send, the browser sends your form data to that URL.
<input type="text" name="username">
- name="username" gives your field a label that the server can understand.
<button type="submit">
- This button triggers the form submission.

If you tried to submit this for real, the server at https://example.com/submit-form would receive something like: username=WhateverYouTyped.

Beginner tip: In your own tests, you probably don’t have a server yet. That’s okay! You can still learn how action and method change the URL and the way data is sent.

What if I leave `action` empty?

If you don’t set action, like this:

<form>
  <!-- fields -->
</form>

The browser will send the data to the same page the form is on (its current URL). This is often used in simple projects, but being explicit with action is usually clearer when you have a real server.

The `method` Attribute: How the Data Is Sent

The method attribute controls how the data is sent to the server. The two most common methods are:

GET
POST

Think of them as two different delivery styles.

`method="GET"`: Data in the URL

With GET, the form data is added to the URL as a query string. That means you’ll see the values you typed right in the address bar.

<form action="https://example.com/search" method="get">
  <label>
    Search:
    <input type="text" name="q">
  </label>

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

What happens when you submit?

If you type cats into the box and click Search, the browser will go to:

https://example.com/search?q=cats

?q=cats is the query string.
q comes from name="q".
cats is what you typed.

When to use GET:

For simple searches.
When data is not private.
When you don’t mind the data showing in the URL.

Important: Never use GET for passwords or sensitive information. The data is visible in the address bar and can be stored in browser history.

`method="POST"`: Data in the Request Body

With POST, the form data is not shown in the URL. Instead, it’s sent in the background as part of the request body.

<form action="https://example.com/contact" method="post">
  <label>
    Your email:
    <input type="email" name="email">
  </label>

  <label>
    Message:
    <textarea name="message"></textarea>
  </label>

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

What happens when you submit?

The browser sends email=yourEmail&message=yourText to the server.
The URL will stay as https://example.com/contact.
You won’t see the form data in the address bar.

When to use POST:

For contact forms, login forms, and signups.
Whenever data is private or long.
When you are creating, updating, or deleting data on the server.

Security note: POST hides data from the URL, but it’s not automatically encrypted. For real sites, developers also use HTTPS for security.

Putting It Together: Action + Method

Now let’s combine what you’ve learned into a more complete example.

Example 1: A simple login form (POST)

<form action="https://example.com/login" method="post">
  <label>
    Username:
    <input type="text" name="username">
  </label>
  <br>
  <label>
    Password:
    <input type="password" name="password">
  </label>
  <br>
  <button type="submit">Log in</button>
</form>

What this does:

Sends data to https://example.com/login.
Uses POST, so the data is not visible in the URL.
Sends something like: username=youTypedThis&password=secretValue in the request body.

You won’t be able to truly log in without a real server, but the structure is correct.

Try it yourself: See GET vs POST in action

You can do this experiment locally on your computer.

Open a text editor (Notepad, VS Code, etc.).
Copy the code below into a new file.
Save it as form-test.html.
Double-click the file to open it in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form Test</title>
</head>
<body>
  <h1>GET vs POST Demo</h1>

  <!-- GET form -->
  <h2>Search (GET)</h2>
  <form action="https://httpbin.org/get" method="get">
    <label>
      Search term:
      <input type="text" name="q">
    </label>
    <button type="submit">Search</button>
  </form>

  <hr>

  <!-- POST form -->
  <h2>Contact (POST)</h2>
  <form action="https://httpbin.org/post" method="post">
    <label>
      Your name:
      <input type="text" name="name">
    </label>
    <br>
    <label>
      Message:
      <textarea name="message"></textarea>
    </label>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

What you’ll see

When you submit the GET form, look at the address bar. You’ll see ?q=yourText added to the URL.
When you submit the POST form, the URL won’t show your data.
The httpbin.org site will show a page describing what data it received. This is a safe testing service.

Play around: Change the name values in the inputs and see how the data changes in the results page.

Common mistakes (and how to avoid them)

Forgetting the name attribute

<input type="text">

Without name, the value won’t be sent to the server. Always add a descriptive name:

<input type="text" name="username">

Using GET for sensitive data

Avoid sending passwords or personal details with method="get". Use POST instead.

Incorrect or missing action URL

If action points to the wrong URL, the server won’t receive your data correctly. Double-check for typos.

Quick recap and what’s next

You’ve just learned the two key attributes that control form submission:

action – tells the browser where to send the data (the destination URL).
method – tells the browser how to send it (GET with data in the URL, or POST with data in the request body).

You also saw practical examples of:

A basic form with action.
A search form using GET.
A contact/login-style form using POST.
A hands-on test you can run in your own browser.

If you made it this far, that’s a big win—many beginners get stuck on forms. Your next steps could be:

Learn about different input types (like email, number, checkbox).
Explore form validation to check user input before sending it.
Start experimenting with a simple backend (for example, using a tutorial for Node.js, Python, or PHP) to actually process the form data.

Keep experimenting, breaking things, and fixing them. Every small form you build is another step toward becoming comfortable with web development.

Mudzinga