Як зробити пошук на сайті HTML: покрокова інструкція

Власник сайту на чистому HTML зазвичай стикається з однією проблемою: потрібні функції, які асоціюються з “серйозними” сайтами — пошук, вхід для користувачів, красиві спливаючі вікна, — а бекенду немає, і наймати програміста на повний цикл дорого. У цій статті розберемо, як зробити пошук на сайті HTML, додати просту реєстрацію, анімацію та адаптивність без сервера — і де ці рішення упираються у стелю можливостей.

Що можна зробити на чистому HTML і CSS, а що ні

HTML і CSS — це розмітка та оформлення. Вони не зберігають дані і не перевіряють паролі. Все, що пов’язано з базою користувачів, реальною реєстрацією, збереженням історії пошуку, вимагає JavaScript і в більшості випадків сервер або готовий сервіс.

Але для сайту з 5–20 статичних сторінок (лендинг, каталог без бази, візитка компанії) багато чого можна закрити без бекенду:

пошук за вмістом поточної сторінки — через JavaScript;
пошук за кількома сторінками — через сторонній сервіс (Google Custom Search) або просту індексацію на JS;
форма реєстрації — візуально готова, але збереження даних вимагає стороннього сервісу або бекенду;
адаптивність — повністю вирішується на CSS;
анімація та спливаючі вікна — CSS і трохи JavaScript.

Якщо сайт зростає до інтернет-магазину з особистими кабінетами і реальною реєстрацією, то чистий HTML — не той інструмент. Тут розумніше одразу дивитися в бік розробки інтернет-магазину з нормальним бекендом.

Як зробити пошук по сторінці HTML

Найпростіший випадок — пошук по поточній сторінці, без бази даних і без сервера. Він працює через JavaScript, який проходить по тексту DOM-елементів і підсвічує збіги.

Базовий варіант на JavaScript

Логіка така: користувач вводить текст у поле, скрипт перебирає задані елементи (заголовки, параграфи, картки товарів) і порівнює текст з введеним запитом. Якщо збіг знайдено — елемент залишається видимим, якщо ні — приховується або блокується клас підсвітки.

<input type="text" id="searchInput" placeholder="Пошук по сторінці">
<div class="searchable">Перший блок тексту</div>
<div class="searchable">Другий блок тексту</div>

<script>
document.getElementById('searchInput').addEventListener('input', function(e) {
  const query = e.target.value.toLowerCase();
  document.querySelectorAll('.searchable').forEach(el => {
    el.style.display = el.textContent.toLowerCase().includes(query) ? 'block' : 'none';
  });
});
</script>

Цей підхід добре працює для сторінок з обмеженим набором карток — FAQ, каталог із 20–50 позицій, список послуг. Для сотень товарів браузер почне гальмувати, тому що перебір відбувається при кожному натисканні клавіші.

Пошук у HTML: варіанти за кількома сторінками

Якщо потрібен пошук по всьому сайту, а не по одній сторінці, варіантів три:

Google Custom Search Engine — безкоштовний віджет від Google, який індексує ваш сайт і вбудовується через iframe або JS-код. Швидко підключається, але з рекламою в безкоштовній версії та обмеженим контролем над оформленням.
Власний JSON-індекс — ви вручну або скриптом збираєте файл із заголовками та посиланнями всіх сторінок, а JavaScript шукає збіги в цьому файлі. Працює без сервера, але вимагає оновлення файлу при кожній новій сторінці.
Повноцінний пошук із бекендом — база даних, індексація контенту, ранжування результатів. Це вже не HTML-завдання, а частина розробки сайту із серверною логікою.

Для невеликого сайту на 10–30 сторінок другий варіант — розумний компроміс. Для каталогу на сотні товарів потрібен нормальний пошуковий двигун, і тут без бекенду не обійтися.

Приклад пошуку по сторінці на HTML з підсвіткою результатів — Пошук по сторінці підсвічує збіги без перезавантаження і без сервера

Як зробити авторизацію на сайті HTML

Форму входу зверстати легко: поля для email і пароля, кнопка відправки. Але тут важливо розділити два різних питання — як це виглядає і як це працює.

Візуальна форма без збереження даних

Можна зробити форму, яка красиво оформлена, перевіряє заповнення полів на JavaScript (наприклад, вимагає мінімум 6 символів у паролі) і показує повідомлення про успіх. Але паролі та email нікуди не зберігаються — це імітація, придатна для демонстрації дизайну або прототипу.

Реальна реєстрація на сайті HTML

Щоб дані користувачів справді зберігалися, потрібен один із варіантів:

сторонній сервіс автентифікації (Firebase Authentication, Auth0) — дані зберігаються у провайдера, ви підключаєте готовий JS SDK;
простий бекенд на PHP або Node.js із базою даних — класичний підхід для сайтів середнього розміру;
готова CMS із модулем користувачів — наприклад, WordPress із плагіном реєстрації, якщо сайт спочатку не планувався як чистий HTML.

Firebase — найшвидший спосіб отримати робочу реєстрацію без написання серверного коду: JS SDK бере на себе перевірку email, зберігання паролів і сесії. Обмеження — ви прив’язані до інфраструктури Google, і при зростанні проєкту миграція може вимагати перезбирання логіки.

Якщо реєстрація — не декоративний елемент, а реальна функція для клієнтів (особистий кабінет, історія замовлень), простіше замовити розробку з нормальним бекендом, ніж намагатися “дотягнути” статичний сайт костилями.

Як зробити адаптивний сайт HTML і мобільну версію

Адаптивність — це не окрема “мобільна версія” сайту, а один код, який перебудовується під розмір екрана. Роздільні версії для десктопа і мобільних давно не в пріоритеті — Google використовує mobile-first індексацію, тобто оцінює сайт за мобільною версією.

Три кроки до робочої адаптивності

Додати мета-тег вьюпорта: <meta name="viewport" content="width=device-width, initial-scale=1.0"> — без нього мобільні браузери масштабують сторінку як десктопну.
Використовувати відносні одиниці — %, rem, vw — замість фіксованих пікселів для ширини блоків.
Прописати медіа-запити для точок перелому: зазвичай 480px (телефони), 768px (планшети), 1024px (невеликі ноутбуки).

@media (max-width: 768px) {
  .container { flex-direction: column; }
  .menu { display: none; }
}

Flexbox і Grid закривають 90% завдань адаптивної вёрстки без складних обчислень. Проблеми зазвичай виникають не з блоками, а з таблицями і великими зображеннями — їх потрібно обгортати в контейнери з горизонтальним скролом або змінювати розкладку на мобільних.

Якщо сайт робився давно і без адаптивності, часто дешевше перезібрати вёрстку з нуля, ніж латати старий код медіа-запитами. Це саме той випадок, де варто порівняти вартість правок і замовлення нового сайту — розцінки на різних типах сайтів можна подивитися в розділі ціни.

Як зробити спливаюче вікно в HTML

Спливаюче вікно (модальне вікно) — це блок, який з’являється над контентом і блокує взаємодію з іншою сторінкою, поки користувач не закриє його.

Базова структура

<div id="modal" style="display:none;">
  <div class="modal-content">
    <span id="closeModal">×</span>
    <p>Текст вікна</p>
  </div>
</div>

<script>
document.getElementById('closeModal').onclick = function() {
  document.getElementById('modal').style.display = 'none';
};
</script>

CSS відповідає за затемнення фону (напівпрозорий шар на всю сторінку) і центрування вікна. JavaScript — за показ/приховування по кліку на кнопку або посилання.

Часті сценарії використання

форма підписки на новини, яка спливає через 10–15 секунд на сторінці;
підтвердження перед закриттям сторінки (наприклад, покинутий кошик);
показ збільшеного зображення товару при кліку на мініатюру.

Головна помилка — агресивні вікна, які з’являються миттєво при заході на сайт. Це збільшує показник відмов і дратує відвідувачів. Розумний компроміс — затримка на кілька секунд або поява при спробі піти зі сторінки (exit-intent).

Як зробити анімацію на сайті HTML

Просту анімацію можна зробити без жодного рядка JavaScript — тільки через CSS-переходи і трансформації.

CSS-анімація без JS

.button {
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.button:hover {
  transform: scale(1.05);
  background-color: #2b6cb0;
}

Властивість transition плавно змінює параметри при наведенні, фокусі або зміні класу. Для складніших сценаріїв — циклічна анімація, безліч кадрів — використовується @keyframes.

Коли потрібен JavaScript

JS підключається, коли анімація залежить від дії користувача, яку CSS не відстежує безпосередньо: скрол сторінки, клік по довільному елементу, поява блоку при потраплянні в область видимості. Для цього зазвичай використовують Intersection Observer API — він перевіряє, коли елемент з’явився на екрані, і додає клас з анімацією.

Важливо не переусердствувати: анімація, яка триває більше 0,5 секунди або блокує взаємодію з елементом, скоріше дратує, ніж прикрашає. Особливо на мобільних, де продуктивність нижча.

Адаптивний сайт HTML зі спливаючим вікном на мобільному екрані — Один код, який перебудовується під три розміри екрана

Порівняння підходів: що вибрати для вашого завдання

Завдання	Рішення без бекенду	Коли потрібен бекенд
Пошук по одній сторінці	JavaScript, перебір DOM	Не потрібен
Пошук по сайту (10–30 сторінок)	JSON-індекс або Google Custom Search	При зростанні контенту до сотень сторінок
Форма реєстрації	Візуальна форма без збереження	Реальне зберігання даних користувачів
Адаптивність	CSS Flexbox/Grid, медіа-запити	Не потрібен
Спливаючі вікна	CSS + JavaScript	Не потрібен
Анімація	CSS transitions/keyframes	Не потрібен

Коли чистого HTML вже недостатньо

Статичний сайт — хороший старт для візитки, лендингу під рекламу або портфоліо. Але якщо бізнес зростає, зазвичай упирається в одне з трьох:

потрібен особистий кабінет із реальними даними — замовленнями, історією, налаштуваннями;
каталог товарів стає занадто великим для ручного пошуку на JS;
потрібна адмін-панель, щоб менеджер сам додавав товари та статті без правки коду.

У цих випадках правильніше одразу проєктувати сайт із CMS або власним бекендом, ніж наростити костилі на HTML. Вартість такої розробки в Україні зазвичай починається від 15 000–25 000 грн за простий корпоративний сайт з адмінкою і може досягати 60 000–150 000 грн і вище для інтернет-магазину з каталогом, фільтрами та особистим кабінетом .

Якщо сайт створюється з нуля і потрібно вирішити, яким він буде — лендинг, каталог чи повноцінний магазин з реєстрацією та пошуком — є сенс одразу обговорити це з підрядником на етапі технічного завдання, а не намагатися доопрацювати статичний HTML пізніше. Подивитися варіанти можна в розділі створення лендингу або корпоративних сайтів, якщо завдання ширше, ніж одна сторінка.

Висновок

Пошук по сторінці, прості спливаючі вікна, CSS-анімація та адаптивна вёрстка — завдання, які чистий HTML з JavaScript вирішує без проблем і без сервера. А от реальна реєстрація, пошук по великому каталогу та особисті кабінети вимагають бекенду — і тут розумніше не економити на архітектурі, а одразу проєктувати сайт під завдання.

Якщо потрібен сайт, де ці функції працюють з коробки — без самостійного збирання скриптів і підбору сторонніх сервісів, — подивіться, як влаштована розробка сайтів у Storm Media, і обговоріть завдання з менеджером до старту проєкту.

Як зробити пошук на сайті HTML: покрокова інструкція без бекенду