Skip to main content

Form Submission (Live Playground)

In this tutorial, we will discuss form submission methods in HTML. We will learn about the two most common methods: GET and POST, and how to use them in your HTML forms.

GET Method​

The GET method appends form data to the URL in the form of query parameters. It is suitable for non-sensitive data and simple forms. Here's an example of a form using the GET method:

HTML
<form action="process.php" method="get">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <input type="submit" value="Submit" />
</form>

When the user submits the form, the browser sends a request to the specified action URL with the form data appended as query parameters, e.g., process.php?username=johndoe.

Live Playground, Try it Yourself

POST Method​

The POST method sends form data in the request body, which is more secure than the GET method. It is suitable for sensitive data and large forms. Here's an example of a form using the POST method:

HTML
<form action="process.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <input type="submit" value="Submit" />
</form>

When the user submits the form, the browser sends a request to the specified action URL with the form data included in the request body, making it more secure and not visible in the URL.

Live Playground, Try it Yourself

Encoding Types​

When submitting a form using the POST method, you may also specify the encoding type using the enctype attribute on the form element. The default encoding type is application/x-www-form-urlencoded. However, if your form contains file uploads, you should use multipart/form-data as the encoding type.

HTML
<form action="upload.php" method="post" enctype="multipart/form-data">
  <label for="file">Choose a file:</label>
  <input type="file" id="file" name="file" />
  <input type="submit" value="Upload" />
</form>
Live Playground, Try it Yourself

Conclusion​

In this tutorial, we have learned about the two form submission methods, GET and POST, and how to use them in your HTML forms. By choosing the appropriate method and encoding type for your form, you can ensure that your form data is submitted securely and efficiently.