Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up