Using Forms for GET Requests8:44 with Chris Ramacciotti
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
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 response and makes GET request to "/search/http"
- Server receives 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).
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 up