...
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.
| Code Block |
|---|
<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".
| Code Block |
|---|
<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>.
| Code Block |
|---|
<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