HTML Form Actions

HTML form actions define what happens when a form is submitted. They are specified using attributes in the <form> element, controlling the destination, method, and encoding of submitted data.

Key Form Action Attributes

1. action

Specifies the URL or endpoint where the form data will be sent.

<form action="/submit-data">
  <input type="text" name="username" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>

Output: When submitted, the data is sent to /submit-data.

2. method

Defines the HTTP method used to send form data. Common values are:

• GET: Sends data via the URL query string.
• POST: Sends data in the request body.

<form action="/submit-data" method="POST">
  <input type="text" name="username" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>

Output: Data is sent securely via the POST method.

3. enctype

Determines how form data should be encoded before submission. Common values are:

• application/x-www-form-urlencoded (default): Encodes data as key-value pairs.
• multipart/form-data: Used for file uploads.
• text/plain: Sends plain text data.

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>

Output: Enables file uploads with multipart/form-data encoding.

4. target

Specifies where to display the response after submitting the form. Common values include:

• _self (default): Opens the response in the same window.
• _blank: Opens the response in a new tab or window.
• _parent: Opens the response in the parent frame.
• _top: Opens the response in the full body of the window.

<form action="/submit-data" target="_blank">
  <input type="text" name="username" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>

Output: The form response opens in a new tab.

5. novalidate

Disables HTML5 form validation, allowing the form to be submitted without meeting validation rules.

<form action="/submit-data" method="POST" novalidate>
  <input type="email" name="email" placeholder="Enter your email" required>
  <button type="submit">Submit</button>
</form>

Output: The form can be submitted without a valid email address.

6. autocomplete

Controls whether the browser should autocomplete form fields.

• on: Enables autocomplete (default).
• off: Disables autocomplete.

<form action="/login" autocomplete="off">
  <input type="text" name="username" placeholder="Enter username">
  <input type="password" name="password" placeholder="Enter password">
  <button type="submit">Login</button>
</form>

Output: Browser autocomplete suggestions are disabled.

 

Summary

HTML form actions, defined using attributes like action, method, enctype, and target, determine how data is processed after submission. Proper configuration ensures secure, efficient, and user-friendly form behavior.