Aby stworzyć wyszukiwarkę w HTML na własnej stronie internetowej, warto zrozumieć zarówno podstawy techniczne, jak i praktyczne zastosowania. Poniżej znajdziesz kompletny poradnik, który prowadzi krok po kroku przez różne warianty, pokazuje przykłady kodu oraz wyjaśnia, jak zwiększyć użyteczność wyszukiwarki.
Prosta wyszukiwarka HTML (frontend)
Najprostsza wyszukiwarka to odpowiedni formularz HTML z jednym polem tekstowym oraz przyciskiem do wysłania formularza:
<form action="wyniki.html" method="get">
<input type="text" name="query" placeholder="Wyszukaj artykuł..." />
<button type="submit">Szukaj</button>
</form>
Wyjaśnienie –
- action – adres, na który zostanie wysłane zapytanie (np. strona z wynikami wyszukiwania);
- method=”get” – polecenie przekazania danych przez adres URL;
- input type=”text” – pole do wpisania zapytania;
- placeholder – wyświetla podpowiedź wewnątrz okna (np. „Wyszukaj artykuł…”).
Zastosowania –
- Przeszukiwanie statycznych stron, blogów, dokumentacji,
- Pole do integracji z inną wyszukiwarką (np. Google).
Wyszukiwarka Google na własnej stronie
Możesz dodać pole wyszukiwania korzystające z wyszukiwarki Google. Dzięki temu użytkownik szuka wyników w obrębie Twojej domeny lub w całej sieci:
<form method="get" action="https://www.google.com/search">
<input type="text" name="q" placeholder="Szukaj w Google..." />
<input type="hidden" name="sitesearch" value="twojadomena.pl" />
<button type="submit">Szukaj</button>
</form>
Wyjaśnienie –
- action przekierowuje na Google;
- name=”q” to pole zapytania Google;
- input type=”hidden” name=”sitesearch” value=”…” ogranicza wyszukiwanie do wybranej domeny.
Wyszukiwarka w JavaScript – przeszukiwanie bez przeładowania strony
Aby wyszukiwać wśród elementów dostępnych na stronie (lub pobranych wcześniej przez JavaScript), można stworzyć prosty skrypt filtrujący listę elementów:
<input type="text" id="searchInput" placeholder="Szukaj w liście..." />
<ul id="dataList">
<li>Jabłko</li>
<li>Gruszka</li>
<li>Banana</li>
</ul>
<script>
const input = document.getElementById('searchInput');
const list = document.getElementById('dataList');
input.addEventListener('keyup', function() {
const filter = input.value.toLowerCase();
for (const el of list.getElementsByTagName('li')) {
el.style.display = el.textContent.toLowerCase().includes(filter) ? '' : 'none';
}
});
</script>
Zastosowania –
- Dynamiczne filtrowanie ofert, kategorii, produktów, list kontaktów na stronach typu SPA (Single Page Application).
Ulepszanie wyglądu wyszukiwarki (HTML + CSS)
Nadaj polu wyszukiwania estetyczny wygląd i animacje z wykorzystaniem CSS:
<input type="text" placeholder="Wyszukaj produkt..." class="searchbox" />
.searchbox {
padding: 8px 16px;
border: 1px solid #aaa;
border-radius: 16px;
transition: box-shadow 0.3s;
}
.searchbox:focus {
outline: none;
box-shadow: 0 0 8px #1e90ff;
}
Możesz wykorzystać pseudoklasy (np. :focus), które reagują na akcje użytkownika.
Przykłady zastosowań
Oto typowe przypadki użycia wyszukiwarki na stronie HTML:
- Blog – wyszukiwanie artykułów po tytułach lub treściach;
- Sklep internetowy – filtracja produktów według nazw, cech lub kategorii;
- Strona firmowa – szybkie odnajdywanie konkretnych usług, dokumentów lub informacji kontaktowych;
- Dokumentacje i bazy wiedzy – błyskawiczne przeszukiwanie rozbudowanych materiałów informacyjnych.
Najlepsze praktyki i dodatkowe wskazówki
- Placeholder jest pomocny dla użytkowników — sugeruje, co mogą wpisać;
- Unikaj domyślnej wartości w polu typu
value="..."— użytkownik musi ją ręcznie usuwać, co obniża komfort korzystania z wyszukiwarki; - Zadbaj o kontrast i czytelność pola wyszukiwania zgodnie z zasadami dostępności (WCAG);
- W przypadku dużych baz danych lub wielu stron warto zintegrować wyszukiwarkę z backendem (np. PHP, Python, Node.js) lub dedykowanym silnikiem, takim jak ElasticSearch czy Google Custom Search Engine;
- Dobre pozycjonowanie strony (SEO) sprawia, że użytkownicy mogą łatwiej znaleźć Twoją treść także w zewnętrznych wyszukiwarkach.
Dzięki powyższym przykładom łatwo dostosujesz wariant wyszukiwarki HTML do własnych potrzeb — zarówno dla małych stron, jak i zaawansowanych serwisów internetowych.
