Using Forms for POST Requests8:32 with Chris Ramacciotti
As you've seen, a POST request is used to modify the requested resource on a server. In this video, you'll see how a browser uses an HTML form with a POST method so construct an HTTP POST request when the user submits the form.
HTML Forms with File Uploads
The HTML for a form that includes a file upload is slightly different. Specifically, there are two changes:
- An input element with the type "file" is added, and
- The encoding type of the form element must be set to "multipart/form-data"
Here is how the HTML might look:
<form method="post" action="/update_profile" enctype="multipart/form-data"> <input type="text" name="handle"> <input type="file" name="avatar"> <button type="submit">Upload</button> </form>
When the form is submitted, the request looks something like the following:
POST /update_profile HTTP/1.1 Content-Type: multipart/form-data; boundary=----TH23XJ Content-Length: 34209 ------TH23XJ Content-Disposition: form-data; name="handle" treehouse ------TH23XJ Content-Disposition: form-data; name="avatar"; filename="me.jpg" Content-Type: image/jpeg [binary data of file] ------TH23XJ
Notice that the data is transmitted in parts, which explains the "multipart/form-data" encryption type of the form, as well as the resulting and identical content-type header.
We've now see a couple of ways to trigger get requests in a browser. 0:00 We can either include an anchor with an href attribute that lists another page 0:04 on our site or another site, or 0:07 we can include a form whose method attribute has the value get. 0:09 In the first case a user clicking on the anchor will trigger an HTTP get 0:14 request to the URL listed in the href attribute. 0:18 In the second case submitting the form will result in an http get request to 0:22 the URL listed in the action attribute. 0:27 All this is great, but what about post request? 0:31 What about those times when we want to update a resource on the server? 0:34 Like adding a new contact or editing a current one? 0:38 It turns out that the change in HTML is fairly trivial and 0:41 what the browser does with the data does with the data is fully in line with how 0:44 data is meant to be transferred in a post request according to the HTTP specs. 0:48 Let's look at an example on httpben.org to see a post request in action. 0:54 In Chrome with Developer Tools open I'll navigate to httpbin.org. 1:02 Now if you scroll down you'll see a link to /forms/post. 1:06 Go ahead and click on that. 1:11 In this form we have some other input types such as radio buttons, 1:14 check boxes, here's a time field and even a text area. 1:18 One thing remains the same though. 1:23 All of these elements have name attributes and 1:25 the values will be determined by what the user fills in. 1:26 And I can see that that's the case if I inspect one of these elements. 1:30 Let's expand the label element there to reveal the underlying input 1:34 whose name has value of topping. 1:39 And the value that's passed, when the form is submitted, 1:42 will be determined by whether or not the user has checked this box. 1:45 I can take a peek at some of the other input elements if I inspect those as well, 1:49 just to verify all their name attributes. 1:53 There we have a cust name, standing for customer name. 1:56 We'll click on that one. 1:59 The name there is custtel, standing for customer telephone. 2:01 And then finally, the email address, whose name is custemail. 2:04 Now, if you scroll up, what you'll notice if you check the opening tag 2:08 is that the method attribute has a value of post. 2:13 This is exactly what we would expect from a post form. 2:16 Also notice the action attribute has a value of slash post that is the relative 2:19 URL where the HTTP request will be sent when this form is submitted. 2:24 That is a relative URL, which means this is relative to the domain name. 2:29 It starts with /, which means it's relative to the domain, 2:34 the full URL for which would be httpbin.org/post. 2:40 Let's fill in some information in this form to examine the http request that 2:45 happens when we submit the form. 2:50 So I'll just drop in whatever information I feel like. 2:52 I'll take a medium pizza with onions and mushrooms. 3:01 I want that right at noon. 3:05 Very hungry at lunch. 3:08 And I would like it delivered directly to my mouth. 3:10 Okay. 3:18 And let's go ahead and submit that order to see that HTTP Request that was sent. 3:19 Now, I'm going to, for now, ignore the results in the view port up 3:25 above because we are going to focus on the http request. 3:29 Now remember, that appears in the network tab. 3:33 Let's drag this panel up a little bit to give ourselves some more room. 3:38 And, I'll click on net post request to reveal the request headers. 3:41 And if you click view source you can view the raw request headers that were sent 3:48 exactly as they appear in the HTTP request. 3:52 First you see the request method is indeed post as opposed to get, and 3:56 here's our host httpbin.org. 4:01 Also worth noting here is the content-length header of 193. 4:04 Remember, that's measured in bytes. 4:09 And that's the length of the data that was included in the payload. 4:12 The payload is simply the query string of data sent. 4:15 In Chrome developer tools you'll find the payload of a request in the form 4:18 data section, so I'll scroll down to the bottom and here's the form data section. 4:21 If you'd like to see the raw form data that was sent you can again choose 4:26 view source and you'll see the query string version 4:31 of that data that was submitted with the request. 4:34 Now you might see some characters in here that you didn't actually 4:38 enter that are included in the values of the form data. 4:41 For example this percent 40, we've got a percent 3A here. 4:45 What those are are URL encoded characters, and 4:49 they allow a browser to use a special sequence of characters starting with 4:52 a percent sign, that make the query string safe to transfer in a URL. 4:56 For example, this percent 40 is the URL encoded version of the @ sign and 5:01 this percent 3a is the URL encoded version of the colon sign. 5:06 Check the teacher's notes for the reference of the URL encoded characters. 5:11 Now, in a post request the data isn't sent through the URI like it 5:15 is in a GET-Request but the same approach is used in constructing a Query string 5:19 regardless of whether they are being transfer with GET or Post request. 5:23 That is the name value pairs are separated by ampersands and for each parameter 5:27 name-value pair, the name is separated from its value with an equals sign. 5:34 If you want to verify the content length, copy the entire query string 5:41 and paste it into a character counter website like Charactercounter.com or 5:47 I'll use charcounter.com. 5:53 When I paste that in there, I will see 193 characters. 5:56 I'll go back to my original request. 6:01 Scroll up a bit to verify that my content length was indeed 193 bytes. 6:04 That's one byte per character. 6:10 The nice thing is we didn't have to calculate that value ourselves and 6:13 construct an HTTP request using that value. 6:16 The browser takes care of that for us. 6:19 There is one more new header that you might notice and 6:22 that is the Content-Type header. 6:25 In this request it has the value application/x-www-form-urlencoded. 6:28 This communicates to the server that the data has been encoded with 6:35 URL safe characters. 6:37 Check out the teacher's notes for 6:39 some information on how this differs when a form includes a file upload field. 6:40 And there you have an example of a browser performing a post request 6:47 upon submitting a form. 6:51 Just like I did with the GET form submission, let me give you 6:53 an illustration of what is happening in the browser with the POST form submission. 6:56 First, the browser renders the HTML for a form to present it to the user. 7:02 The form contains a method, an action attribute. 7:07 And inside the form are various named elements 7:09 giving the user a chance to provide information. 7:12 After entering this information, the user submits the form, 7:15 either by clicking a submit button or by pressing enter. 7:18 This send the browser into action, using the URL in the action attribute, 7:22 the browser establishes a network connection to host, 7:26 then begins to construct a HTTP POST request, 7:29 since the the forms method attribute is always set as POST. 7:33 The forms data is put together as a query string using the name attributes as 7:37 parameter names, and the user provided values as the parameter values. 7:41 Since this is a post request your browser calculates the number of 7:46 bytes in the query string and adds a content length header to the request. 7:50 Then it sticks this query string into the payload of the request 7:54 after the blank line following the header section. 7:58 When the browser is done constructing the request 8:02 the request is sent over the established network connection and 8:04 when the response arrives as HTML the browser renders the results. 8:08 When compared to a get form submission, the differences in a post form submission, 8:14 are that in a post request content type and content length headers are required. 8:18 And the query string data is included in the pay low below the headers 8:24 instead of in the request line above the headers. 8:28
You need to sign up for Treehouse in order to download course files.Sign up