Posting HTML Form to the Server

To post HTML form data to the server in URL-encoded format, you need to make an HTTP POST request to the server and provide the HTML form data in the body of the POST message in key=value format. You must also specify the data type using the Content-Type: application/x-www-form-urlencoded request HTTP header. You can also send HTML form data to the server using the HTTP GET method. To do this, HTML form data is passed in the URL as key=value pairs separated by ampersands (&), and keys are separated from values by equality (=). In this HTML Form POST Example, we post the form data to the ReqBin echo URL in the application/x-www-form-urlencoded format. Click Send to run the HTML Form POST example online and see the results.
Posting HTML Form to the Server Send
POST /echo/post/form HTTP/1.1
Host: reqbin.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 23

key1=value1&key2=value2
Updated: Viewed: 92957 times

What is HTTP POST?

HTTP POST is one of the nine standard methods of the Hypertext Transfer Protocol. The POST method is used to post data to the server, upload files and images, and submit HTML forms. The HTTP POST method differs from HTTP GET and HEAD requests in that POST requests can change the server's state.

What is HTML Form?

A form is a section of an HTML document that contains controls such as text and password input fields, radio buttons, checkboxes, and a Submit button, enclosed in an HTML <form> tag. HTML forms collect user input and send it to a server for processing. Examples of HTML forms are login and image upload forms.

HTML Form Example
<form action="/register" method="post">
  <input type="text" id="name" name="name">
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

Submitting HTML Forms over HTTP

In HTTP, there are two ways to submit HTML forms to the server using the application/x-www-form-urlencoded and multipart/form-data content types. HTML forms can be submitted from browsers and from code.

  1. Submitting HTML forms using the application/x-www-form-urlencoded media type.
    The application/x-www-form-urlencoded media type is mainly used for submitting short HTML forms as key-value pairs, for example, when authorizing a user using login/password forms.

    HTML Login Form Request Example
    POST /login HTTP/1.1
    Host: reqbin.com
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 36
            
    login=my_login&password=my_password

  2. Submitting HTML forms using the multipart/form-data media type.
    The multipart/form-data media type is used by browsers when uploading binary data to the server (for example, when uploading multiple images). In this case, the form data is formatted as a sequence of parts separated by MIME boundaries.

    HTML Upload Form Request Example
    POST /upload HTTP/1.1
    Host: reqbin.com
    Content-Type: multipart/form-data
    Content-Length: 526
              
    =======MIME boundary string
    Content-Disposition: form-data; login="login",
              
    my_login
    =======MIME boundary string
    Content-Disposition: form-data; name="file"; filename="image1.jpg"
    Content-Type: image/jpeg
              
    [image data]
    =======MIME boundary string
    Content-Disposition: form-data; name="file"; filename="image2.jpg"
    Content-Type: image/jpeg
              
    [image data]
    =======boundary string--

Submitting HTML Forms in JSON Format

HTML does not have native methods for converting forms to JSON objects. If you want to convert form data to JSON, you need to use JavaScript to:

  1. Collect form data from a DOM object into a JavaScript object. If you are using jQuery, you can convert your HTML form into a JavaScript object with a single line using the $("#form").serializeArray() jQuery method.
  2. Convert the JavaScript object to JSON string using JSON.stringify() method.
  3. Send the form data to the server using the XMLHttpRequest or fetch methods.

Submitting HTML Forms using the HTTP GET Method

In some cases, you can submit form data using the HTTP GET method. The form data is passed to the server as a series of name/value URL parameters, and you are limited to the maximum length of the URL. For browsers, the limit is around 2000 characters (browser dependent) for the code, there is no such limit, but your server may have its limitations. For example, the maximum length of an Apache URL is 8177 characters. Submitting HTML forms using the HTTP GET method is less secure because you pass URL parameters data.

Example of Sending an HTML Form using HTTP GET Method
GET /login?login=my_login&password=my_passowrd HTTP/1.1
Host: reqbin.com

See also

Generate Code Snippets for POST HTML Form Example

Convert your POST HTML Form request to the PHP, JavaScript/AJAX, Node.js, Curl/Bash, Python, Java, C#/.NET code snippets using the ReqBin code generator.