Search Forms: Home

HTML chunks for common search tools to add to your guides

Notes

The HTML for the search boxes below will by default search all resources. It has also been written to meet WCAG 2.0 AA Accessibility guidelines, so please don't change the HTML without talking to the Web Services Librarian!

Customizing Forms

If you need to customize a search form, make sure you use appropriate <label> elements for each <input>, <select>, or <textarea> element. If you're not sure how to do this, drop a line to the Web Services Librarian for help!

Each <input> element should have a unique id attribute. If the vendor doesn't provide one, you can assign one. (Don't use something like "input", since that might be used elsewhere on the page Pick something unique, like "libguidessearch-cap301". Your id can't have spaces or punctuation, but you can use dashes to separate words.

Each <input> element must have a <label> that refers to its unique ID in a for attribute. This is how screen readers know that text is associated with a particular input.

Example:


<form action="https://library.catalog.gvsu.edu/search/" id="querybox>
    <label for="searcharg>Search the Library Catalog:</label>
    <input type="text" name="searcharg" id="searcharg" />
</form>

See how the id of the input is the same as the value of the for attribute of the label?

More Resources:

Catalog Search


<form action="https://library.catalog.gvsu.edu/search/" class="lib-form" id="querybox" method="get" name="querybox">
<label for="searcharg">Search the Catalog for:</label><br />
	<label style="text-indent: -999px;" for="searchtype">Search by:</label>
	<select name="searchtype" id="searchtype">
		<option value="X">Keyword</option>
		<option value="t">Title</option>
		<option value="a">Author</option>
		<option value="d">Subject</option>
		<option value="s">Journal Title</option> 
	</select> 

	<input name="searcharg" id="searcharg" size="35" /> 
	<input class="btn btn-primary" name="Submit" type="submit" value="Search" /> 

	<input name="SORT" type="hidden" value="D" />
</form>

<p style="text-align: left;"><a href="https://library.catalog.gvsu.edu/search/X">Advanced Search</a></p>

The HTML above will give you a search box that looks like this:


Advanced Search

Summon Search

This is for a general Summon search (The Library Search or Find It! search). If you'd prefer a scoped search, you can use my Summon Scoped Search Generator to make the HTML.


<form method="GET" action="https://gvsu.summon.serialssolutions.com/search">
<label for="s.q">Search the Library for:</label><br />
<input type="text" name="s.q" id="s.q" />
<input type="hidden" name="spellcheck" value="true" />
<input type="hidden" name="keep_r" value="true"/>
<input type="submit" class="btn btn-primary" value="Find it!" />
</form>
<p><a href="https://gvsu.summon.serialssolutions.com/advanced">Advanced Search</a></p>

The HTML above will give you a search box like this:


Advanced Search

Journal Finder Search


<form action="https://vq9xh3gm7u.search.serialssolutions.com/" method="get" name="SS_EJPSearchForm">

<input name="V" type="hidden" value="1.0" /> 
<input name="N" type="hidden" value="100" /> 
<input name="L" type="hidden" value="VQ9XH3GM7U" /> 

<label for="C">Search Journals for:</label><br />
<label for="S" style="text-indent:-999px">Search by:</label>
<select name="S" id="S">
	<option selected="selected" value="AC_T_B">Title begins with</option>
	<option value="AC_T_M">Title equals</option>
	<option value="T_W_A">Title contains all words</option>
	<option value="I_M">ISSN equals</option> 
</select> 
<input type="text" id="C" name="C" /> 
<input type="Submit" value="Search" class="btn btn-primary" />
</form>

The search form above looks like this:


MeLCat Form



<form action="https://elibrary.mel.org/search/a?a" method="get" name="search" id="search">

	<label for="searcharg">Search MeLCat for books at other Michigan Libraries!</label>
	<fieldset>
	<legend style="display:none;">Search Type</legend>
	<input type="radio" value="X" name="searchtype" id="key" checked="checked" /> <label for="key">Keyword</label>
	<input type="radio" value="a" name="searchtype" id="author" /> <label for="author">Author</label>
	<input type="radio" value="t" name="searchtype" id="title" /> <label for="title">Title</label><br />
	</fieldset>
	
	<input type="text" id="searcharg" name="searcharg" />
	<input type="submit" name="submit" value="Search MeLCat" />

	<input type="hidden" name="SORT" value="D" /> 
</form>
	<script>
	$('#search').find('input[type="radio"]').change(function() {
		$('form#search').find('input#searcharg').focus();
	});
	</script>

This code gives you a search form that looks like:

Your friendly Web Services Librarian

Matthew Reidsma's picture
Matthew Reidsma
Contact:
340C LIB
(616) 331-3577
Website
  • Last Updated: Nov 6, 2017 12:10 PM
  • URL: https://libguides.gvsu.edu/searchforms