>> SPEAKER 1: Let's implement a search engine or, at least, the frontend user
interface for a search engine that allows the user to type in some terms
and then search the worldwide web for those terms.
To achieve this, we'll use HTML's "form" tag, as well as a few others.
Here in Search.html, I've already gotten us started by opening and
closing a few tags.
So now here, inside of this body, let's first define a heading of CS50
Search to serve as a title of sorts in the body of the page.
>> Let's then open up a "form" tag and, preemptively, let's close it, so don't
forget to later.
Let's then define an input tag, whose name shall be "q" for query, and whose
type shall be "text," so that the browser renders this as a text field
on the page.
Let's then close this tag.
Let's then insert a line break below.
And let's now define one more input this time, whose type will be submit,
so that's a Submit button, and whose value or label is CS50 Search.
>> Now we've defined this form, but we haven't specified to where the form
should be submitted.
Let's add two more attributes to be more precise here.
First, let's specify in the "form" tag itself that the method by which this
form should be submitted is HTTP get.
And let's specify that the action or destination of this form shall be
https://www.google.com/search.
>> Now, I know that URL exists because I've seen it for some time in my
browser's address bar.
So I'm simply going to refer the user to that URL for their search results.
Let's now save, change the permissions on, and open this stage.
"Chmod a plus r search.html." Let's now open up Chrome.
http://localhost/search.html.
Not the sexiest of search engines, but let's see if it works.
And there are some cats.
>> Notice though, than in the address bar is exactly the URL that I expected,
but with a little something more at the end.
If I zoom in here, notice that the URL is exactly as we expected, but with a
question mark q equals cats at the top.
Where did that come from?
>> Well, because I submitted a form that had an input whose name was q, our
browser took it upon itself to add that question mark and then put that
parameter's name-- q--
followed by an equal sign, followed by cats, which is the value that I
myself typed in.
If there were more such parameters inside of the URL, the browser would
have simply separated them by ampersand.
But in this case, we have just one such pair.
And that is provided as input to Google much like a parameter is
provided to a function is input.
And Google then uses that input to search its database somehow and
display a page of results.