Как сделать поиск по сайту html css

Чтобы добавить поиск по сайту на ваш сайт, вы можете использовать HTML, CSS и JavaScript.

Шаги по созданию поиска по сайту:

1. Вставьте следующий код HTML на страницу вашего сайта:

<form action="/search" method="get">
  <input type="text" name="q" id="search" placeholder="Search...">
  <button type="submit">Search</button>
</form>

2. Создайте стили CSS для формы поиска:

form {
  display: flex;
  align-items: center;
}
input[type="text"] {
  padding: 8px;
  border-radius: 8px 0 0 8px;
  border: 1px solid #ccc;
  width: 70%;
}
button[type="submit"] {
  padding: 8px 12px;
  border: none;
  background-color: #0077cc;
  border-radius: 0 8px 8px 0;
  color: #fff;
  cursor: pointer;
}

3. Добавьте следующий скрипт в файл JavaScript вашего сайта:

// Получение значения поиска при отправке формы
const form = document.querySelector("form");
form.addEventListener("submit", event => {
  const searchInput = document.querySelector("#search");
  if (!searchInput.value) {
    event.preventDefault();
  }
});

Этот скрипт проверит, введено ли значение поискового запроса. Если значение не введено, форма не будет отправлена.

После создания и добавления поиска на свой сайт вам необходимо настроить файл, который будет обрабатывать запросы для поиска и выводить результаты. Это зависит от используемой вами платформы или CMS.