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
This is such an important feature, I want to add a search box to every page. Thankfully that’s easy to do because we already have a header file that’s included on all the pages so we can add a search box right below our header bar. Then we’ll make some modification to our catalog page so we can use that same code to display results.
Search Form
<div class="search">
<form method="get" action="catalog.php">
<label for="s">Search:</label>
<input type="text" name="s" id="s" />
<input type="submit" value="go" />
</form>
</div>
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
[MUSIC]
0:00
Welcome back.
0:04
We've had some great opportunities
to work with the database and
0:05
re-factor our code to make
it even more extensible.
0:08
We're ready to add one of the most
important features of any collection,
0:12
search capabilities.
0:16
Searching allows users to get
right to the information they want
0:18
instead of wading through the entire
catalog or even a category.
0:21
Can you imagine an internet
without search?
0:26
This is such an important feature that I
want to add a search box to every page.
0:29
Thankfully, that's easy to do because
we've already included a header file
0:34
on every page.
0:38
We can add the search box right below
our header bar, then we'll make some
0:40
modifications to our catalog page so we
can use that same code to display results.
0:44
>> Launch the workspace
associated with this video and
0:50
open header.php from your includes folder.
0:53
Right before the final opening div for
our content,
0:56
we're going to add a new
div with a class of search.
0:59
Make sure you add this class so
the form gets styled correctly.
1:13
Next we'll add a form tag.
1:17
We want visitors to enter data into
this page and submit it to the server.
1:19
The form tag makes that possible.
1:23
Inside the form tag, we need two elements,
a text field to enter the search term and
1:25
a submit button to send
the search term to the server.
1:31
Let's start with the search term.
1:34
This will be a single line text field
where a user can enter the search term.
1:38
We need to give this a name attribute.
1:46
The server will reference it by name.
1:48
You'll see in a minute that this name
will also be visible to our users, so
1:50
we want to keep it short.
1:54
You will often see sites use
a single letter, such as s for
1:56
search or q for search query.
2:00
We'll use s.
2:03
The second input tag we have
will be a submit button.
2:06
This will be the button that
a visitor clicks to submit the form.
2:13
With the submit button,
you specify a label for
2:17
the button in the value attribute.
2:19
Let's give this a short label, like go.
2:24
Let's also add a label tag to our form.
2:28
We'll type search with a colon.
2:35
We also need to add an attribute
to our input field.
2:39
We need an id = s as well.
2:44
Our id from our input field and
our for from our label should match up.
2:48
Let's take a look at
this page in the browser.
2:56
The CSS included with this project styles
the form to fit with the overall design of
3:00
the rest of the site.
3:04
Let's enter a search term and
submit the form just to see what happens.
3:06
The browser loads the current page again,
but notice that the web address
3:13
now includes a get variable with
the name from our input field s and
3:18
the value equal to what we entered, alena.
3:23
When working with forms, remember
that we discussed two attributes for
3:27
form elements, action and method.
3:32
The action attribute
defines the destination
3:35
where the form data will be submitted.
3:38
We can specify a web address here.
3:41
But if we leave it blank, the form
will submit back to the current page.
3:43
The method attribute defines the request
method used on the next request
3:48
that includes the submitted form data.
3:53
The two possible values are get and post.
3:55
The default value,
when no method is specified, is get.
4:00
In general, you should use post when
the form submission is creating records or
4:04
taking some other action,
like sending an email.
4:09
We use post for our suggest form.
4:13
However, you should use get when the form
submission is merely retrieving or
4:16
getting data,
which is what our search form will do.
4:21
The nice thing about get is that
the values become part of the web address.
4:24
You can bookmark this web address,
or share it in social media and
4:29
other people will be able to follow
the link and see the same search results.
4:33
You would never bookmark a contact
form submission, but it is perfect for
4:38
a form submission that retrieves data.
4:42
Let's go back to header.php.
4:46
Even when the default values are what we
want to use, it's a good idea to add them.
4:49
This will tell any developers
working on this after we do
4:53
that we made intentional
decisions about these attributes.
4:57
They won't wonder if we
just forgot about them.
5:00
For the method, we'll specify get, and for
5:03
the action,
we'll specify our catalog.php page.
5:08
We now have our search form in place so
5:16
that a site visitor can
submit a search term.
5:19
We are ready to load that search term into
a php variable on our catalog page and
5:22
display those results.
5:27
This is similar to what we're doing for
our category pages.
5:29
But now we're going to give
the user more control.
5:32
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