Coding search forms for your website

Search queries are sent to https://search.uci.edu/

The following inputs are accepted:

Name	Accepted values	Description
q	Any string.	(required) The search query
type	"Web" or "People"	(optional) Indicated the type of search to perform. Searches with type "Web" are routed to the campus search appliance. Searches with type "People" are routed to the campus directory. If no type or a type other than "Web" or "People" is indicated, the search is treated as type "Web".
collection	Comma-delimited numeric list	(optional) Restricts search results to a defined subset of UCI web properties. Search appliance admins must be notified before this option is used to advise on appropriate value(s). Defaults to all UCI web properties if no value is supplied.

Code Examples

To perform web searches only

This example uses minimal markup for a web-only search form.

<form action="https://search.uci.edu/" method="get">
	<label for="search-text">Search</label>
	<input id="search-text" name="q" placeholder="Search..." type="text"/>
	<button name="type" type="submit" value="Web">Go</button>
</form>

Adding an option to search the campus directory

Here we add a second button with a value of "People".

<form action="https://search.uci.edu/" method="get">
	<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>

Specifying a collection

The following example restricts search results to the Official University Policies & Procedures website by adding a hidden input that supples the numeric value for that collection.

<form action="https://search.uci.edu/" method="get">
	<input type="hidden" value="17"/>
	<label for="search-text">Search</label>
	<input id="search-text" name="q" placeholder="Search..." type="text"/>
	<button name="type" type="submit" value="Web">Go</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="https://search.uci.edu/" 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.