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
In the last video, you saw how anchors are used to trigger GET requests following a user click. In this video, you'll see how search forms are commonly used to send data in an HTTP GET request. In particular, you'll see how this data will be sent with the HTTP GET request as a query string in the URI of the request line.
URI Path Parameters
Sometimes when you're searching using a web form, upon submitting a form, you won't see a query string in the resulting URL in your address bar. Consider the hypothetical scenario of searching on example.com. Let's say it has a search form that looks like this:
<form method="get" action="/search">
<input type="text" name="q">
<button type="submit">Search</button>
</form>
Now let's say you enter "http" into the text input and submit the form. What you may observe when you finally see the search results is that the URL in your browser's address bar says
example.com/search/http
instead of
example.com/search?q=http
What's important to note here is that your browser hasn't done anything different with your form or with its submission. Assuming it's a standard HTML form, and the form's submission is handled natively by the browser, here's what likely happened:
- User enters "http" into text input
- User submits form
- Browser makes request as
GET /search?q=http HTTP/1.1
- Server receives request, sends a response that includes the following:
HTTP/1.1 302 Found Location: /search/http
- Browser receives the response and makes GET request to "/search/http"
- Server receives the request and responds with search results
- Browser displays search results (address bar says "example.com/search/http" at this point)
Given that a user would only see the bolded steps (1,2, and 7), it might appear that something peculiar is happening. In fact, in Chrome Developer Tools if you check the box next to "Preserve log", you'll see this initial GET request with the query string on the URI (step 3), and the subsequent 302 response with a location header (step 5).
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
You've just seen how browsers render links
from HTML anchor elements such that, when
0:00
clicked, result in an HTTP get request to
the URL in the anchor's HREF attribute.
0:05
There's another way that HTML is used
in a browser to make get requests and
0:11
that's with forms.
0:15
Before we see that in action, I want to
remind you that get requests are read
0:17
only requests to view resources on a web
server and not make changes to them.
0:21
Also remember that passing data along
with a get request means appending that
0:26
data to the URI in query string format
beginning with a question mark.
0:30
Let's review the important
components of an HTML form.
0:35
In an HTML form, there are five
important pieces I'd like to highlight.
0:39
Form tags, the form method attribute,
the form action attribute,
0:43
form elements for users to provide info,
and the submit button.
0:49
An HTML form begins quite naturally
with a pair of form tags.
0:54
Inside the opening form tag there is a
method attribute and an action attribute.
0:58
The method attribute value
should be either get or
1:03
post, or
when omitted is assumed to be get.
1:06
This is the HTTP request method that
will be used when the form is submitted.
1:11
Also in the opening form
tag is an action attribute.
1:17
The value is the relative or
1:20
absolute URL that will be used
when the form is submitted.
1:22
This URL is where the data the user enters
will be sent when the form is submitted.
1:26
Inside the form tag should appear
any number of named input elements.
1:32
The most common ones are input tags for
plain text, passwords, radio buttons or
1:37
checkboxes, select elements for
1:42
drop downs, text area elements for
long form texts and
1:44
even hidden inputs with predetermined
values to include during submission.
1:49
Each of these must have a name attribute
in order to be included in the data sent
1:54
when the form is submitted.
1:58
Finally, the form can have
a submit button with an input or
2:00
button element whose
type attribute is submit.
2:04
Put together this HTML structure for
a form renders nicely for the user.
2:08
Now that you're reminded of basic input
elements that constitute a HTML form,
2:14
let's see how a form
looks in the browser and
2:19
see what happens when one is submitted.
2:22
I'm back in Chrome now and
2:26
with the developer tools open I'm
going to navigate to Java.com.
2:27
Now a common use for a form for
get request in HTML is for searching.
2:32
This is because when you fill out
a search form online and submit it,
2:37
your submission doesn't change anything
about the search resource or page.
2:40
It simply results in a display of
resources already on the server
2:45
that match the data you sent along.
2:49
Again, get requests are intended
to be read only requests.
2:52
Let's take a peek at how the HTML for
the search form on this page looks.
2:57
To do that, you can either right click
the form and choose inspect element or
3:01
you can use the element selector tool.
3:05
I'll use the element selector
tool just to demonstrate it.
3:07
You click this little icon right here
to select the element selector, and
3:10
as you hover over parts in
the page the HTML element
3:16
that was rendered on your
mouse cursor is highlighted.
3:19
When you get to the one you want,
click it and
3:23
you'll see where it appears in the HTML.
3:24
So I'll go to the search input.
3:27
Now this HTML input is of type text,
and it's worth noting here for
3:29
later use,
that its name attribute has the value q.
3:34
So the name attribute of the search field
itself has the value q, keep that in mind.
3:37
Now, if I scroll up a bit, I will
see the opening form tag right here.
3:44
You'll notice in this opening tag that
there is a method attribute that has
3:50
the value get and
an action attribute whose value
3:53
is serach.oracle.com/search/search.
3:57
This will tell the browser
that upon submitting the form
4:02
that data should be sent to
this URL as a get request.
4:06
Speaking of the data, that's going to
come from all these input elements
4:11
inside the form, most of which you
see have a type attribute of hidden.
4:14
These name attribute values
will be used in the resulting
4:20
query string upon form submission.
4:23
The parameter names that come
before the equal signs will be
4:27
these parameter names right here.
4:30
And the values will be whatever the value
attributes are in the case of a hidden
4:32
input, or in the case of our search field,
it's going to be whatever the user enters.
4:37
Let's fill out the search form and
hit enter to submit.
4:43
So I'm gonna click in here, and
I'll just type Java, then click enter.
4:46
When I perform the search,
4:51
in the browser viewport above I
see the actual search results.
4:52
I'm not so
much interested in those right now.
4:57
What I'm interested in here, though,
is what happened in terms of HTTP.
4:59
Let's click on the Network tab and
5:04
the search request to see
what exactly happened.
5:07
When I view the source
of the request headers,
5:11
I can see the URI requested right here,
as I have highlighted.
5:14
This includes a long query string that
starts with a question mark right here
5:19
that contains the names and values of
all those inputs that were originally
5:24
in that form element that we submitted.
5:28
Now, if you look closely,
5:30
you'll see the actual search term
I typed before pressing enter.
5:32
Do you see it?
5:36
Remember, that name attribute was q.
5:37
There it is, right there, q=java,
Java is the search term that I entered.
5:41
All other parts of the query string
came from those hidden input name and
5:47
value attributes.
5:50
And if you'd like to see
a version of the query string,
5:51
that's a little better formatted
then this long URI here.
5:54
You can collapse the request
header section and
5:58
there is a section in the Chrome developer
tools called the query string parameters.
6:01
Here you see a nicely
formatted version and
6:06
if still you are interested in the source
of that, you can click view source and
6:09
instead of seeing that within the context
of the HTTP request above, you can see
6:14
just the unformatted query string right
here and again the formatted version.
6:19
There you see an example of
your browser performing a get
6:26
request upon submitting a form,
in our case, a search form.
6:28
Let me give you an illustration of
what is happening in the browser.
6:33
[SOUND] First, the browser renders the
HTML for a form to present it to the user.
6:36
The form contains a method, an action
attribute and inside the form are various
6:42
named elements giving the user
a change to provide information.
6:46
After entering information
the user submits the form
6:50
either by clicking a submit button or
by pressing enter on their keyboard.
6:53
This sets the browser into action.
6:57
Using the URL and the action attribute the
browser establishes a network connection
6:59
to the host.
7:04
Then begins to construct an HTTP
get request since the form's method
7:05
attribute is listed as get.
7:10
The form's data is put together as
a query string using the name attributes
7:13
as parameter names and the user provided
values as the parameter values.
7:17
Since this is a get request, your browser
appends this query string to the URI,
7:22
being sure to start the query
string with the question mark.
7:27
Then the browser adds some
other headers to the requests,
7:30
including the host, user agent,
and referer, among others.
7:33
When it's done constructing the request
it's sent over the established
7:38
network connection.
7:41
And when the response arrives as HTML
the browser renders the results.
7:42
It's pretty cool that the browser
is able to do all of this.
7:48
Of course this comes at the price of
a web developer ensuring that they
7:50
use proper HTMLing creating their forms.
7:55
For example, a common mistake beginning
developers make is using the ID
7:58
attribute of input elements to name
them instead of the name attribute.
8:03
Omitting a name attribute on an input
element means that upon submission,
8:07
the data from that field will not
be included in the query string
8:12
of the resulting get request.
8:15
I'd encourage you to play with
search forms around the web
8:17
examining the resulting requests.
8:20
Check the teacher's notes for
tips about some things to watch out for
8:22
that can help you better understand
some unexpected behavior.
8:26
Next, we'll look at what the browser does
differently when a form's method attribute
8:30
is post instead of get.
8:34
Before you check that out why don't you
answer a quick review question about
8:36
HTTP request methods that will
lead us into our next video.
8:40
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