26.10. Studio: HTTP and Forms

26.10.1. Introduction

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:

The search engine selector that we will build.

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, q.

Try It!

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 GET or 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.

Note

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 sites.

26.10.2. Getting Started

Fork and clone the starter code from this repo.

Warning!

Before you get started, let’s look at the starter code. There is a new HTML tag, <script> and </script>. The HTML between these tags is JavaScript, designed to respond once the form is completed. 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.

Search Engine Options

Label	Value	Search URL
Google	google	https://www.google.com/search
DuckDuckGo	duckDuckGo	https://duckduckgo.com/
Bing	bing	https://www.bing.com/search
Ask	ask	https://www.ask.com/web

1. Create a text input within the form and set its name attribute to the value "q".

2. Create a radio group with one radio button for each search engine. Recall that radio buttons with the same name are grouped, so use the same value for this attribute, "engine", on each radio button.

3. Create a label element for each radio button.

4. Finally, add a submit button to the form and set it’s value to "Go!".

Question

How is the value attribute of a submit button used?

Congrats! You have just created a dynamic website.

26.10.3.1. 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.