Coding search forms for your website

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". That's all... searchgate figures out the rest.

<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

All non-hidden form inputs must be labeled. In the above examples, this is accomplished by including a <label> element and associating it with the <input> by using the <input>'s id attribute value as the <label>'s for attribute value. However, this isn't the only way to label a form control; alternate methods are described on the W3C website: Labeling Controls.

Setting search scope

In the above examples, <input name="collection" type="hidden" value="uci_full"/> instructs the GSA to search against all UCI sites via value="uci_full". If you want to restrict the search results returned by the GSA (e.g., search only your site), change the value of this attribute to your desired GSA collection. If you don't know what a GSA collection is or which one to use, then you likely don't have one configured. Contact Todd or Jim to get one set up.