Form Action and Method in HTML
Form Submission Basics

Form Action and Method: Where the Data Goes and How

A form isn't complete until you tell it two things: where to send the data, and how to send it. That's exactly what the action and method attributes define in an HTML form.

What is the action Attribute?

The action attribute tells the form where to send the submitted data — usually a URL or server-side script that processes it.

Example: Submitting to a Script

<form action="/submit-fruit" method="post">
  <input type="text" name="fruit" placeholder="Apple">
  <input type="submit" value="Send">
</form>

[ Apple           ] [Send]

When you click "Send", the browser sends the form data to /submit-fruit.

What if action is Missing?

If you omit the action, the form submits to the same page it’s on.

<form method="post">
  ...
</form>

This can be useful for self-processing forms (e.g., feedback forms that reload the page).

What is the method Attribute?

The method tells the browser how to send the data. There are two common values:

• get: Appends the form data to the URL (visible)
• post: Sends data in the request body (hidden)

GET Method Example

<form action="/search" method="get">
  <input type="text" name="q" placeholder="Banana">
  <input type="submit" value="Search">
</form>

[ Banana          ] [Search]

If you search for "banana", the browser will navigate to:

/search?q=banana

GET is ideal for search forms or any action that doesn’t change data.

POST Method Example

<form action="/register" method="post">
  <input type="text" name="name" placeholder="Hello World"><br>
  <input type="submit" value="Register">
</form>

With post, the data goes in the request body — invisible in the browser’s address bar. Use this when collecting sensitive or permanent data like registrations or updates.

Choosing Between get and post

| Use Case | Method | Why | |--------------------|--------|------------------------------------| | Search queries | get | Easy to share/bookmark results | | Login or signup | post | Data is private and stored | | Poll voting | post | Prevent manipulation via URL | | Filtering items | get | Safe for navigation and SEO |

Full Example: Fruit Feedback Form

<form action="/submit-feedback" method="post">
  <label for="fruit">Fruit:</label><br>
  <input type="text" id="fruit" name="fruit" placeholder="Cherry" required><br><br>

  <label for="comment">Your Comment:</label><br>
  <textarea id="comment" name="comment" rows="4" cols="40" required></textarea><br><br>

  <input type="submit" value="Submit">
</form>

Fruit: [ Cherry           ]  
Your Comment:
[                                      ]
[                                      ]
[                                      ]
[                                      ]

[Submit]

Best Practices

• Use get for search and filters — when data isn’t sensitive
• Use post for anything stored, updated, or private
• Always define an action so your form knows where to go

Summary

HTML forms communicate with servers through action and method. You now know how to:

• Define the destination URL using action
• Choose between get and post based on your use case
• Test and observe how forms behave differently with each method

What’s Next?

Ready to group and organize your form content? Let’s explore <fieldset> and <legend> — structure that makes your forms more readable and accessible.