Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Set where to send the form-data when a form is submitted in HTML?

HTML Web Development Front End Technology

In HTML, the action attribute specifies where to send form data when a form is submitted. This attribute defines the URL of the server-side script or page that will process the form data. Additionally, the formaction attribute on individual form controls can override the form's default action for specific buttons.

Syntax

Following is the syntax for the action attribute on the form element −

<form action="URL" method="get|post">
   <!-- form controls -->
</form>

Following is the syntax for the formaction attribute on input elements −

<input type="submit" formaction="URL" value="Submit">

Parameters

The action and formaction attributes accept the following values −

  • Absolute URL − Complete web address like https://example.com/process.php

  • Relative URL − Path relative to current page like /submit or process.php

  • Empty string − Submits to the same page (current URL)

  • mailto: − Opens email client with form data as email body

Using Form Action with POST Method

The POST method sends form data in the request body, making it suitable for sensitive information and large amounts of data.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Form Action with POST Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>User Registration Form</h2>
   <form action="https://httpbin.org/post" method="post">
      <p>
         <label for="firstname">First name:</label><br>
         <input type="text" id="firstname" name="firstname" required><br><br>
         
         <label for="lastname">Last name:</label><br>
         <input type="text" id="lastname" name="lastname" required><br><br>
         
         <label for="email">Email:</label><br>
         <input type="email" id="email" name="email" required><br><br>
         
         <input type="radio" name="gender" value="Male" id="male">
         <label for="male">Male</label><br>
         <input type="radio" name="gender" value="Female" id="female">
         <label for="female">Female</label><br><br>
         
         <input type="submit" value="Send" style="padding: 8px 16px;">
         <input type="reset" value="Reset" style="padding: 8px 16px;">
      </p>
   </form>
</body>
</html>

This form uses the POST method to submit data to a test server. When submitted, the data is sent securely in the request body rather than visible in the URL.

User Registration Form

First name: [text input]
Last name: [text input]
Email: [email input]
? Male
? Female

[Send] [Reset]

Using Form Action with GET Method

The GET method appends form data to the URL as query parameters, making it suitable for search forms and non-sensitive data.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Form Action with GET Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Search Form</h2>
   <form action="https://httpbin.org/get" method="get" target="_blank">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" placeholder="Enter first name"><br><br>
      
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" placeholder="Enter last name"><br><br>
      
      <input type="submit" value="Submit" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px;">
   </form>
</body>
</html>

This form opens results in a new tab using target="_blank". With GET method, form data appears in the URL as query parameters like ?fname=John&lname=Doe.

Search Form

First name: [text input with placeholder]
Last name: [text input with placeholder]

[Submit]

Using formaction Attribute

The formaction attribute allows individual submit buttons to override the form's default action URL.

Example

<!DOCTYPE html>
<html>
<head>
   <title>formaction Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Document Management</h2>
   <form action="https://httpbin.org/post" method="post">
      <label for="docname">Document Name:</label><br>
      <input type="text" id="docname" name="document" value="Sample Document" style="width: 200px; padding: 5px;"><br><br>
      
      <input type="submit" value="Save" style="padding: 8px 16px; margin-right: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px;">
      
      <input type="submit" formaction="https://httpbin.org/get" formmethod="get" value="Preview" style="padding: 8px 16px; margin-right: 10px; background-color: #008CBA; color: white; border: none; border-radius: 4px;">
      
      <input type="submit" formaction="https://httpbin.org/delete" formmethod="delete" value="Delete" style="padding: 8px 16px; background-color: #f44336; color: white; border: none; border-radius: 4px;">
   </form>
</body>
</html>

Each submit button sends the form to a different URL − "Save" uses the default POST action, "Preview" overrides to use GET method, and "Delete" uses DELETE method with a different endpoint.

Document Management

Document Name: [Sample Document]

[Save] [Preview] [Delete]
Form Submission Flow HTML Form with action attribute Submit Browser processes form data HTTP Request Server at action URL processes data GET: Data in URL POST: Data in body Validates & encodes form data Returns response (HTML, JSON, etc.)

Comparison of Methods

Following table compares GET and POST methods for form submission −

Aspect GET Method POST Method
Data Location URL query parameters Request body
Data Visibility Visible in URL Hidden from URL
Data Size Limit Limited (~2048 characters) No practical limit
Security Less secure (data in URL) More secure
Bookmarking Can be bookmarked Cannot be bookmarked
Caching Can be cached Not cached by default
Use Cases Search forms, filters Login, file upload, sensitive data

Key Points

  • The action attribute is required for proper form submission − without it, forms submit to the current page.

  • Use formaction on submit buttons to override the form's default action URL.

  • Choose GET for search and filtering operations where data visibility is acceptable.

  • Choose POST for sensitive data, large datasets, and operations that modify server state.

  • Always validate and sanitize form data on the server side regardless of the method used.

Conclusion

The action attribute in HTML forms specifies the destination URL where form data is sent upon submission. Combined with the appropriate HTTP method (GET or POST), it enables proper client-server communication. The formaction attribute provides additional flexibility by allowing different submit buttons to send data to different endpoints within the same form.

Updated on: 2026-03-16T21:38:53+05:30

290 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements