Setting Up the Search Form5:35 with Alena Holligan
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.
<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>
[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 up