HTML Form Attributes

While the <form> tag creates the container for user input, it doesn't actually know what to do with the data on its own. To make a form functional, we must configure it using specific Form Attributes. Think of these attributes as shipping instructions for an envelope full of data.

---

The Action Attribute

The action attribute is the most crucial part of a functional form. It defines the destination URL where the collected data should be sent when the user clicks the "Submit" button.

Typically, this destination is a file on a backend server (like a PHP, Python, or Node.js script) that is programmed to receive and process the information.

<!-- Sending data to an internal file for processing -->
<form action="/process_login.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Log In">
</form>

---

The Method Attribute (GET vs POST)

If action tells the form where to send the data, the method attribute tells the form how to package and transport it. There are two primary methods used on the web:

1. Method: GET (The Default)

When you use method="GET", the browser takes all the form data and appends it directly to the end of the URL. This is the exact same mechanism Google uses when you search for something.

• Best used for: Search bars, filtering data, or any action where you want the user to be able to bookmark the result page.
• Security Warning: Never use GET for passwords or sensitive information, as it will be plainly visible in the browser's address bar and saved in network history logs.

<!-- Submitting "Shoes" to this form creates a URL like: /search.php?query=Shoes -->
<form action="/search.php" method="GET">
  <input type="text" name="query">
  <input type="submit" value="Search">
</form>

2. Method: POST

When you use method="POST", the data is tucked securely inside the HTTP request body. It is completely invisible in the URL address bar.

• Best used for: Passwords, updating user profiles, sending emails, or processing large amounts of text (like a blog post).
• Advantage: Much more secure than GET and has no length limitations.

<form action="/submit-password.php" method="POST">
  <input type="password" name="user_pass">
  <input type="submit" value="Update Password">
</form>

---

The Target Attribute

By default, when you submit a form, the browser will navigate the current tab to the action URL to show the result. The target attribute allows you to choose where the result page opens.

Target Value	Behavior upon Submit
_self	Loads the result in the current window/tab (This is the default).
_blank	Opens the result page in a brand-new browser tab or window.
_parent	Loads the result in the parent frame (used in older iFrame layouts).

<!-- Submitting this form opens the success page in a new tab -->
<form action="/newsletter-success.html" target="_blank" method="POST">
  ...
</form>

---

The Autocomplete Attribute

Browsers are smart—they learn what you type and offer to automatically fill out forms for you later (like your email address or street name). The autocomplete attribute lets developers turn this helpful feature on or off.

You can apply it to the entire form, or just to specific input fields. It is generally set to "on" by default, but you might want to switch it to "off" for highly sensitive data or unique security tokens.

<!-- Turning off autocomplete for a secure banking form -->
<form action="/transfer" method="POST" autocomplete="off">
  <label for="acct">Account Number:</label>
  <input type="text" id="acct" name="account"><br><br>
  <input type="submit" value="Transfer Funds">
</form>