26.10. Studio: HTTP and Forms¶
This chapter taught you that forms submit data in HTTP requests. This studio uses form and HTTP concepts to build a search engine selector, that is, a search form that allows a user to choose which search engine they would like to use. It will look like this:
Most search engines work the same way. They have a single text input, and they
submit data using a
GET request. Additionally, many of the most popular
search engines also use the same name for the search parameter,
Use 2-3 different search engines to search for the same term. On the results page, look at the URL. Did the search happen via
POST? If a
GET request was made, what is the name of the parameter containing your search term?
Note: You may have to copy/paste the URL into a text editor to find the search parameter. Some engines add other parameters to the URL, causing it to extend past the end of the browser’s address bar.
We remarked previously that most forms use
POST because they cause data to be changed on the server. A web search only retrieves data. It does not change data. Therefore it’s safe to use a
GET request for searches.
The fact that most search engines use the name
q for their search boxes
will allow us to easily create a form that is capable of sending a search
request to several search engines.
The form will send a request with query parameter
q to the selected engine.
Since this request looks essentially the same as requests coming from the
search engine’s own form (for example, at google.com)
it will give us back the results the same as if we had searched via those
26.10.2. Getting Started¶
Fork and clone the starter code from this repo.
Before you get started, let’s look at the starter code. There is a new HTML tag,
You will not be working with this code. However, please make sure that you are using the naming options provided for you in the exercise instructions.
26.10.3. Create Form Inputs¶
Let’s build out the form in
index.html. We will need some data for the
search engines we want to work with.
Create a text input within the form and set its
nameattribute to the value
Create a radio group with one radio button for each search engine. Recall that radio buttons with the same
nameare grouped, so use the same value for this attribute,
"engine", on each radio button.
labelelement for each radio button.
Finally, add a submit button to the form and set it’s
How is the
value attribute of a submit button used?
Congrats! You have just created a dynamic website.
188.8.131.52. Bonus Mission¶
Add some CSS rules to your page to make it look nice.
26.10.4. Uploading Your Work¶
Push up your work to save your solution in your remote repository.