HTML.form.guide

How to add a form action button to your HTML form

html form action form action button

A form action button is a button element that is used to submit a form to a server. It triggers the form submission when clicked, and sends the form data to the server for processing.

It’s the “submit” button

However, the button that submits the form is often called a “submit” button and is created using a <button> tag with type="submit"

<button type="submit">Submit</button>

The button can be styled using CSS. For example, if you are using Bootstrap framework,

<button class="btn btn-primary" type="submit">Submit</button>

The action attribute of the form

The action attribute of an HTML form element specifies the URL to which the form data will be sent when the form is submitted. This URL is typically a server-side script that processes the form data and generates a response.

When a user submits a form, the browser sends an HTTP POST request to the URL specified in the action attribute, along with the data from the form fields. The server-side script can then process the form data and generate a response, which is sent back to the browser and displayed to the user.

Here is some code that shows the action attribute and a button that submits the form:

<form method="POST" action="/submit-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Submit</button>
</form>

In this code example, we have a simple form that asks for the user’s name, email, and message. The form element has two attributes: method and action. The method attribute specifies the HTTP method to use when submitting the form, which is POST in this case. The action attribute specifies the URL that the form data will be submitted to, which is /submit-form in this case.

How to create the server-side script that receives the form submissions

Even though you have completed your form with a button to submit the form, you still need a server-side script that will receive the form submission and perhaps sends you an email and saves the form data to a database for record keeping.

You can find such a script here. The script is written in PHP. So you should be comfortable editing PHP script to be able to use the script.

That’s a catch! You need a server and a script running on the server to handle form submissions. However, there is an easier solution. Use Ratufa form back-end.

Pro Tip: Attach a form handler with just one line of code

Ratufa is a form back-end as service. You just have to add one line of code to your form page and the form immediately becomes fully functional.

See a quick demo here:

Here are the steps:

  • Go to Ratufa and press the connect my form button. It shows a line of code that has to be added to your form page.
  • Update your page with the code and test submit the form. You can now see the form submission data at Ratufa.io . You can even configure email notifications whenever the form is submitted.

See Also

Categories