HTML Form Submission

Understanding HTML Form Submission

When a user submits an HTML form, the browser collects the form data and sends it to the location specified by the form.

The <form> element uses attributes such as action and method to determine where the data is sent and how the request is made.

What Happens When a Form Is Submitted

When a submit button is activated, the browser first checks any applicable HTML validation rules. If the form is valid, the browser creates a request containing the form's submitted data.

The request is then sent to the resource identified by the form's action attribute using the HTTP method specified by the method attribute.

The action Attribute

The action attribute specifies the URL that receives the submitted form data.

<form action="/html5/tutorials/forms/php/result-topic.php" method="post">
  ...
</form>

In this example, the browser sends the form data to /html5/tutorials/forms/php/result-topic.php when the form is submitted.

The method Attribute

The method attribute specifies how the form data is sent. The two methods most commonly used with HTML forms are get and post.

<form action="/search.php" method="get">
  ...
</form>

<form action="/contact.php" method="post">
  ...
</form>

GET usually sends form data as part of the URL, while POST sends the data in the request body. The differences between these methods are covered in detail on the next tutorial page.

Submitted Form Data

Form controls normally contribute data using their name attribute. The name becomes the field identifier, while the control's current value becomes the submitted value.

<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name" value="John">

If this control is submitted, the form data includes the name first-name and the current value entered in that field.

Successful Form Controls

Not every control in a form necessarily contributes a value when the form is submitted. In general, a control must be eligible for submission and have a name when its value is intended to be sent.

<input type="text" id="first-name" name="first-name">

<input type="text" id="display-only">

The first input has a name and can contribute form data. The second input has no name, so its value is not included as a named form field in normal submission.

Unchecked checkboxes and radio buttons normally do not contribute their values, and disabled controls are generally not submitted.

Submit Buttons

A button with type="submit" starts the form submission process.

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

A submit button can also have name and value attributes. When that button is used to submit the form, those values can be included with the submitted data.

<button type="submit" name="action" value="save">Save</button>
<button type="submit" name="action" value="preview">Preview</button>

Server-Side Processing

HTML defines the form and submits its data, but HTML does not process or store the submitted information. A server-side application receives the request and decides what happens next.

The server might validate the values, send an email, save information in a database, process an order, perform a search, upload a file, or return a response page.

Submitted data should always be validated and handled safely on the server, even when the form also uses HTML validation in the browser.

Form Submission Example

The following example uses fields from the master form and submits them to the shared result page. Enter different values, submit the form, and compare the fields you entered with the data displayed by the receiving page.

Form Submission Best Practices

• Give every form control that should submit data a meaningful name.
• Set the action to the correct resource that will process the submitted data.
• Choose the appropriate method for the type of request being made.
• Use post with multipart/form-data when uploading files.
• Use clear submit button text that describes the action being performed.
• Validate submitted data on the server even when browser validation is present.
• Do not place sensitive information in a GET query string.

Summary

HTML form submission sends the values of eligible form controls to the resource specified by the form's action attribute. The method determines how the request is sent, while each control's name identifies its submitted value.

HTML handles the structure and submission of the form, while the receiving server-side application is responsible for validating, processing, storing, or responding to the submitted data.