Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify where to send the form-data when a form is submitted in HTML?
The action attribute in HTML forms specifies where to send the form data when the form is submitted. This attribute defines the destination URL, file path, or email address that will process the submitted form data.
Syntax
Following is the syntax for the action attribute −
<form action="destination" method="method_type"> <!-- form elements --> </form>
Where destination can be a URL, file path, or email address, and method_type is typically GET or POST.
Common Action Attribute Values
The action attribute accepts different types of destinations −
Server URL − Points to a server-side script like
action="process.php"Email address − Uses mailto protocol like
action="mailto:user@example.com"Relative path − Points to a local file like
action="submit.html"External URL − Points to another website like
action="https://example.com/submit"
Using Action with Server-Side Processing
Example
Following example shows a form that sends data to a server-side script for processing −
<!DOCTYPE html>
<html>
<head>
<title>Form with Server Action</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Registration Form</h2>
<form action="process.php" method="post">
<label for="name">Student Name:</label><br>
<input type="text" id="name" name="student_name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="student_email" required><br><br>
<label for="course">Course:</label><br>
<select id="course" name="course">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select><br><br>
<input type="submit" value="Register Student">
</form>
</body>
</html>
This form sends data to process.php on the server when submitted. The server script receives the form data as student_name, student_email, and course.
Using Action with Email (mailto)
Example
Following example demonstrates sending form data directly to an email address −
<!DOCTYPE html>
<html>
<head>
<title>Email Contact Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Contact Form</h2>
<form action="mailto:admin@tutorialspoint.com" method="post" enctype="text/plain">
<label for="sname">Student Name:</label><br>
<input type="text" id="sname" name="sname" required><br><br>
<label for="ssubject">Student Subject:</label><br>
<input type="text" id="ssubject" name="ssubject" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Send Email">
</form>
</body>
</html>
When submitted, this form opens the user's default email client with the form data pre-filled in the message body. The enctype="text/plain" ensures the data is sent as plain text rather than URL-encoded.
Action Attribute with Different Methods
The action attribute works with different HTTP methods −
| Method | Description | Use Case |
|---|---|---|
| GET | Appends form data to the URL as query parameters | Search forms, navigation |
| POST | Sends form data in the request body | Registration, login, file uploads |
Example − GET Method with Action
<!DOCTYPE html>
<html>
<head>
<title>Search Form with GET</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Tutorials</h2>
<form action="search.php" method="get">
<label for="query">Search Term:</label>
<input type="text" id="query" name="q" placeholder="Enter search term">
<input type="submit" value="Search">
</form>
<p><small>This will redirect to: search.php?q=your_search_term</small></p>
</body>
</html>
With the GET method, the search term appears in the URL, making it bookmarkable and shareable.
Empty or Missing Action Attribute
If the action attribute is empty or missing, the form submits to the same page (current URL) −
Example
<!DOCTYPE html>
<html>
<head>
<title>Self-Submitting Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Feedback Form</h2>
<form action="" method="post">
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="40"></textarea><br><br>
<input type="submit" value="Submit Feedback">
</form>
<p><small>This form submits to the same page</small></p>
</body>
</html>
An empty action attribute (action="") causes the form to submit to the current page, useful for forms processed by server-side scripts on the same page.
Conclusion
The action attribute is essential for defining where form data should be sent upon submission. It can point to server-side scripts, email addresses, or other URLs. Always pair the action attribute with the appropriate method (GET or POST) based on your form's purpose and data sensitivity requirements.
700 Views
