What is an HTML form action?

What is an HTML form action?

You may be starting out in HTML coding or starting to create forms to collect data e.g. a contact form or job application submission and wondered what a form action is. Well let's go through it here.

The purpose of an html form action

Mozilla is a great resource to reference for HTML attributes, so certainly worth checking out if you are unsure about certain things regarding your HTML markup. Mozilla states the following regarding the purpose of the form action attribute:

The URL that processes the form submission. This value can be overridden by a formaction attribute on a <button>, <input type="submit">, or <input type="image"> element. This attribute is ignored when method="dialog" is set.

So what they mean is, this is where the 'script' whether on the same site or a seperate site / server altogether is that will handle the processing the form data. A lot of the time this could simply be a local script file name like action="form-to-email.php" or in other situations it could be a completely different site altogether like action="https://different-domain.com/form/process.php", so it really depends on your setup. As you can see in the example above i've shown a file extension of .php, that's because it's usually backend code (PHP, Python, Ruby etc.) that will process the form data.

Is the form action the only attribute that needs to be set on an HTML form?

Normally once you have told your HTML form where to send the form data, you also need to tell the form what method of sending that data it should use. That's because by default, the form will be sent using the GET method. So if you don't specify the method attribute on your form, this is how it will be sent.

This can therefore lead to an undesired response once your form is submitted. It might appear like nothing has happened. One way you can tell if your form is setup to be sent as a GET, is if you are seeing the page redirect your browser to the form action you specified and then there's the form data after that url separated by a ?. For example, using the url example above, if may redirect to that url and look like this with the form data afterwards:

Example of form being submitted using GET method.

Normally a form is sent using the POST method. The POST method tells the form data to be sent as the request body and that request body can then be picked up by your script and processed however intended.  So simply setting your form attribute to method="post" to fix the issue you may or may not be experiencing above.

So best practice is to make sure you set a method attribute along side your form action.

NOTE: One potential use (of many) to use a GET request is to send the form data your user or visitor has entered to another page of your site and then use javascript to then pick that data up and use it somewhere on the page or even add that to the next page or stage of your form, like a multistep form.

What if you can't host backend scripts on your hosting?

Some website hosting services (like a CDN) don't allow backend scripts to run as they need further server-side processing. A CDN for instance just hosts static files (usually for speed reasons). So how can you process your form data? Well by setting your form action to a script hosted somewhere where you can run backend code (like another hosting account) or an html form endpoint service like Hyperforms. A form endpoint service basically provides that backend script as a service, so you don't have to host it or code it yourself!

Show Comments