The examples below illustrate how to code search forms that perform search queries against the Google Search Appliance and the campus directory.
To perform web searches only
Form actions should point to a centrally-hosted script (searchgate.php) that determines the type of search being performed and directs the query to the appropriate appliance.
<form action="//web.communications.uci.edu/php/searchgate.php" method="get"> <input name="collection" type="hidden" value="uci_full"/> <label for="search-text">Search</label> <input id="search-text" name="q" placeholder="Search..." type="text"/> <button name="type" type="submit" value="Web">Web</button> </form>
Adding an option to search the campus directory
Here we add a second button with a value of "People".
<form action="//web.communications.uci.edu/php/searchgate.php" method="get"> <input name="collection" type="hidden" value="uci_full"/> <label for="search-text">Search</label> <input id="search-text" name="q" placeholder="Search..." type="text"/> <button name="type" type="submit" value="Web">Web</button> <button name="type" type="submit" value="People">People</button> </form>
Styling the search form
Add class attributes to the form elements to tie them in to your site css. You're also welcome to nest form controls inside <div>s or whatever as needed. For example, sites that use Bootstrap 3 (such as those built with the 2015 Cascade templates) use available Bootstrap classes and also nest the form buttons inside a <div>.
<form action="//web.communications.uci.edu/php/searchgate.php" class="form-inline" method="get"> <input name="collection" type="hidden" value="uci_full"> <label class="sr-only" for="search-text">Search</label> <input class="form-control" id="search-text" name="q" placeholder="Search..." type="text"> <div class="btn-group"> <button class="btn btn-default" name="type" type="submit" value="Web">Web</button> <button class="btn btn-default" name="type" type="submit" value="People">People</button> </div> </form>
Accessibility considerations