Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Building the Search Form5:35 with Randy Hoyt
Our search page needs a form where a site visitor can enter a search term. In this video, we'll create the form. We'll discuss the differences between the two different request methods available for forms,
We now have the structure in place for the new search page.
Next we will write the code for the contents of the page
including the search form where visitors to our site
can specify their search terms.
Open the search/index.php file in your text editor.
After we include the header we will add the HTML we need for the structure of the page.
Thishere will need a number of classes so that
it will be styled correctly.
Let us add a top level heading for the page with a title of search.
Next we will add a form tag.
We will want visitors to enter data into this page and submit it to the server.
Remember the form tag makes that possible.
Inside our form tag we will need 2 input tags.
The first will have a type of text.
This will be a single line text field where a user can enter a search term.
We need to give it a name attribute.
The server will reference it by name.
You will see in a minute that this name will be visible to our users.
So we will want to keep it short.
You will often see sites use a single letter name for a search field--
often S for search term or Q for search query.
The second input tag will have a type of submit.
This will be the button that a site visitor clicks to submit the form.
With a submit button you specify a label for the button in the value attribute.
Let us give this a short label like go.
Let us take a look at this page in the browser.
The CSS you downloaded at the beginning of the project
included styles to make the form fit with the overall design of the rest of the site.
Let us enter a search term and submit the form just to see what happens.
The browser loads the search page again,
but notice now that the web address includes a GET variable
with the name from our input field S and the value equal to what we entered.
When we working with the contact form you probably remember
that we discussed 2 attributes for form elements--action and method.
The action attribute defines the destination where the form data will be submitted.
We can specify a web address there, but if we leave it blank
the form will submit back to the current page.
The method attribute defines the request method used
on the next request that includes the submitted form data.
The 2 possible values are GET and POST.
The default value when no method is specified is Get.
In general, you should use post when the form submission
is creating records or taking some other action like sending an email.
We use POST for our contact form.
However--you should use GET when the form submission is
merely retrieving or getting data which is what our search form will do.
The nice thing about GET is that values become part of the web address.
You can bookmark this web address or share it in social media.
And other people will be able to follow the link and see the same search results.
You would never bookmark a contact form submission,
but it is perfect for form submissions that retrieve data.
Let us go back to search/index.php file.
Even though our form here works correctly by default
without a method or an action attribute I typically prefer to add them.
This will tell any developers working on this after I do
that I made intentional decisions about these attributes.
They won't wonder if I just forgot about them.
For the method I will specify GET.
For the action I will want to specify this search page.
We could use our base URL constant followed by a search and a slash
That would work, but it might not be the easiest to maintain.
Imagine in the future if we were to change the folder structure
for this search page--we could easily forget to come down here
and change the action on the form as well.
Because of that I would prefer instead to use a relative link.
Remember when we looked at using 2 dots and a slash earlier to specify the parent folder?
In a similar manner we can start a link with 1 dot and a slash
to indicate the current folder.
This code--a dot and a slash for the action attribute--tells the browser
to submit the form to the root of the current directory.
As long as we keep using clean URLs without files names or extensions
the root of the current directory will be the current page.
We now have our search page with a search form in place
so that a site visitor can submit a search term.
We are now ready to load that search term into a php variable and do something with it.
You need to sign up for Treehouse in order to download course files.Sign up