The HTML form action attribute defines what should happen to data when a form is submitted on a web page. The value of the action attribute should be the URL of the web resource that will process the contents of the form.
When building forms and asking data on your site or web application, you’ll often want to do something with your data, right? Here is where the form action attribute comes into play.
You should know the basics of creating a form in HTML. You basically wrap your form contents in the <form> element. In the opening tag there are a couple of attributes we can use, and one of them is the action.
The action attribute is used to specify where we want to send the form data when the form is submitted. So the value of the action is the page that will process the form.
HTML Form Action Attribute
The HTML form action attribute states the URL that will process the contents of a form. You should make sure the web resource to which the action attribute points accepts whatever method you have specified in your “method” attribute.
Let’s take a look at the syntax of the action attribute:
<form action="/submit.php"> </form>
The action attribute appears between our opening <form> tag. This attribute is often used with the method attribute.
By default, the method attribute is set to “get”. This means that your form will send data over an HTTP GET request when it is submitted. You can change the method by specifying “method=’post'” in your opening <form> tag.
Data from a form is sent to the “action” URL when a submit button is clicked.
Form action HTML Example
Let’s take a look at an example:
<form action="process.html" method="get"> <label for="username">User</label> <input type="text" id="username" name="username"><br><br> <label for="email">Email</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form>
Above, the action is sending the username and email data to a page named process.html. The username and email data has the input type “text”. We define a button with the input type “submit”. When clicked, this button will send our data to our “action” URL.
Now plug in the form example above in an actual HTML file. Then create another file named process.html in the same folder. This file should have the following contents:
<html>
<head>
<meta charset="UTF-8">
<title>Process</title>
</head>
<body>This is the destination process page</body>
</html>This code defines a simple web page that shows a paragraph of text when the page is loaded. Let’s go back to our web form that we defined earlier and fill it out:
Now click submit. Notice we were automatically taken to process.html page! Then, did you notice the URL bar, what is all that extra data? The data after the “?” symbol are query parameters, and since we specified the request as GET, the data is being passed as query parameters.
With this example you might think this is not very useful. That is true. Usually the action attribute is used to send form contents to server pages. For example, we might use a PHP file named process.php.
This process.php then will do all the magic with data. This page could save our data to a database, or register you to your favorite event, you name it. PHP is a powerful server scripting language, often used in web development. If you ever used WordPress, probably the data being processed is done via PHP.
To learn more about PHP, check out our How to Learn PHP guide.
Is the action Attribute Required?
Back in HTML4, the answer would be yes. Nowadays with HTML5, you are not required to specify an action attribute. If you have a form tag without an action attribute then the data will be sent to its own page.
Why would we do this? With the birth of single page applications (SPA), we might want to process our form data using JavaScript. Or we may want to process our data using another framework such as React / Angular.
If we use Vanilla JavaScript we often do this by adding a JavaScript event listener to when the form has been submitted.
Conclusion
The HTML form action attribute defines what happens to the contents of a form when the form is submitted. The action attribute accepts a URL as an argument.
Are you interested in becoming a web developer? Check out our complete How to Learn HTML guide. You’ll find expert advice on learning HTML as well as a list of top online courses and learning resources.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
