HTML Forms: Action and Method Attributes

HTML forms allow users to input data and send it to a server for processing. Two key attributes that define how form data is handled are action and method. Understanding these attributes helps you control where and how form data is sent.

1. The action Attribute

The action attribute specifies the URL where the form data should be sent. If not provided, the form submits data to the current page.

Example:

<form action="submit-form.php">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

Explanation:

• When the user submits the form, data is sent to “submit-form.php” for processing.

Default Behavior (Same Page Submission)

If no action is specified, the form submits to the same page.

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

2. The method Attribute

The method attribute specifies how the form data should be sent to the server. It supports two values:

• GET (default) – Sends data in the URL.
• POST – Sends data in the request body.

Example: Using method="get"

<form action="search.php" method="get">
  <input type="text" name="query" placeholder="Search">
  <input type="submit" value="Search">
</form>

Resulting URL after submission:

search.php?query=example

✔️ Use GET when retrieving data (e.g., search forms).
❌ Avoid GET for sensitive data (it appears in the URL).

Example: Using method="post"

<form action="submit.php" method="post">
  <input type="text" name="username" placeholder="Enter username">
  <input type="submit" value="Submit">
</form>

Result:

• The data is sent securely in the request body (not visible in the URL).

✔️ Use POST for sensitive data (passwords, login forms).
❌ Avoid POST for actions that should be bookmarkable.

3. GET vs. POST: Key Differences

Conclusion

The action and method attributes define where and how form data is sent.

• Use action to specify the processing URL.
• Use method="get" for retrieving data and method="post" for submitting sensitive data.

By understanding these attributes, you can create more secure and user-friendly web forms!

Further Reading

• MDN Web Docs: <form>
• W3Schools: HTML Forms