Web
Analytics
Skip to Main Content

ChatGPT Meets LibGuides

Working together to make our LibGuides smarter.
← Back to Interactive Elements

Search Box (Guide / Site / Ask AI)

Swap action for your endpoint; keep the accessible button.

Guide Search

Show Preview
Show Code
<form class="searchbox" action="/search" method="get" role="search" aria-label="Search this guide">...</form>

Site Search (example)

Show Code
<form class="searchbox" action="https://www.google.com/search" method="get" role="search" aria-label="Search site"> <input type="hidden" name="q" value="site:businesslibrary.uflib.ufl.edu "> <input type="text" name="q" placeholder="Search site…" aria-label="Search site"> <button type="submit">🔎 Search</button> </form>

Ask AI Proxy (placeholder)

Point action to your AI proxy endpoint that forwards the query and returns a result page.

Show Code
<form class="searchbox" action="https://your-ai-proxy.example/ask" method="get" role="search" aria-label="Ask AI"> <input id="qai" name="q" type="text" placeholder="Ask AI…" aria-label="Ask AI"> <button type="submit">🔎 Ask</button> </form>

A11y & Tips

  • Keep a visible label (we include an off-screen label + aria-label).
  • Use a real button (not an icon) for clearer affordance.