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://search.ebscohost.com" id="querybox>
    <label for="searcharg>Search the Library's Holdings:</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://gvsu.locate.ebsco.com/search" class="library-search" id="embedded_search" method="get" role="search">
<input name="option" type="hidden" value="keyword" /> 
<p><label class="sr-only" for="lg-search">Search the Library for Books and eBooks</label> 
<input id="lg-search" name="query" placeholder="Find books and eBooks" size="45" type="text" />
<button type="submit">Find It!</button></p>
</form>

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

EDS Search

This is for a general EDS (EBSCO Discovery Service) search (The Library Search or Find It! search).


<form action="https://research.ebsco.com/c/6l5vh5/search/results" method="get" target="_blank">
<label for="s.q">Search the Library for:</label><br />

<input name="schemaId" value="search" type="hidden" />
<input name="direct" type="hidden" value="true" /> 
<input name="custid" type="hidden" value="s8484662" /> 
<input name="scope" type="hidden" value="site" /> 
<input name="site" type="hidden" value="eds-live" /> 
<input name="profid" type="hidden" value="eds" /> 
<input name="groupid" type="hidden" value="main" /> 

<!-- Authentication type --> 
<input name="authtype" type="hidden" value="ip,guest" /> 
<!-- Search box and Submit button --> 
<input id="s.q" name="q" size="40" type="text" value="" /> 
<input class="btn btn-primary" type="submit" value="Search" />&nbsp;
</form>
<p><a href="https://gvsu.edu/library/advancedsearch">Advanced Search</a></p>

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


 

Advanced Search

EDS Search with Full Text & Scholarly Options

Here is a version of the EDS search that also gives the user the option to toggle Full Text or Scholarly/Peer Review on before completing the search. Unfortunately, I haven't been able to get a version to work that would allow users to turn off the "Available in Library Collection" option. Still working on that!


<form action="https://research.ebsco.com/c/6l5vh5/search/results" method="get" class="library-search" role="search" id="lib-search-articles">
                            <input name="direct" type="hidden" value="true">
                            <input type="hidden" name="custid" value="s8484662"> 
                            <input name="scope" type="hidden" value="site"> 
                            <input name="site" type="hidden" value="eds-live"> 
                            <input name="profid" type="hidden" value="eds">
                            <input name="groupid" type="hidden" value="main">
                            <input name="authtype" type="hidden" value="ip,guest">
                            <input name="schemaId" value="search" type="hidden">
                            <p>
                                <label for="article-search" class="sr-only">
                                    Search the Library for Articles, Books, and More
                                </label>
                                <input type="text" id="article-search" name="q" placeholder="Find articles, books, & more" size="45"><button type="submit">Find It!</button>
                            </p>
                      


    <fieldset>
    <legend>Search Facets</legend>

  <label for="fullText">
    <input id="fullText" name="limiter-ft" value="Y" type="checkbox" />
    <span>Full Text</span>
  </label>
  <label for="peerReviewed">
    <input id="peerReviewed" name="limiter-rv" value="Y" type="checkbox" />
    <span>Peer Reviewed (Scholarly) Only</span>
  </label>
    </fieldset>

</form>

The above HTML creates this box (you can also map the one from the Mappable Forms tab)

Advanced EDS Search

You can link to the Advanced Search screen in EDS by using the URL https://gvsu.edu/library/advancedsearch.

Scoped Searches for EDS

EBSCO has a custom Search Box builder that you can use to make a scoped search for your LibGuide. Unfortunately, it is not as robust as our former customized Summon scoped search tool.

You will need to have the following account information in order to use the tool:

  • Customer ID: s8484662
  • Group ID: main
  • Profile ID: eds
  • Do not add Proxy
  • Authentication: check IP Address and Guest

 

Journal Finder Search


<form action="https://publications.ebsco.com" method="get" target="_blank">
<label for="C">Search Journals for:</label><br />
<input name="custid" type="hidden" value="s8484662" /> 
<input name="profile" type="hidden" value="pfui" /> 
<input name="groupid" type="hidden" value="main" /> 
<!-- Authentication type --> 
<input name="authtype" type="hidden" value="ip, guest" /> 
<!-- Search box and Submit button --> 
<input name="search" id="C" size="40" type="text" value="" /> 
<input class="btn btn-primary" type="submit" value="Search" /> </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

Profile Photo
Matthew Reidsma
he, him
Contact:
116A DEV
(616) 331-3577
Website
  • Last Updated: Aug 20, 2024 11:55 AM
  • URL: https://libguides.gvsu.edu/searchforms