Как в html* передать значения из <input type="search"> на первой станице в <input type="search"> на второй станице?

Question

Как в html* передать значения из <input type="search"> на первой станице в <input type="search"> на второй станице?

Никита Трофимов Ученик (116), открыт 5 дней назад

* - В html и других языках веб-программирования (javascript, css, jquery, php и так далее)

Есть такой код:
Первая Страница (Дом.html):

<html>
<center><image src="Эмблема.gif" height="40" width="40">
<form>
<p><input type="search" name="Текст" placeholder="введите запрос" style="width: 300px; height: 25px;" /></p>
<p><input type="submit" formaction="Поиск.html" value="Поиск" ></p>
</form>
</center>
</html>

Вторая Страница (Поиск.html):

<html>
<left><image src="Эмблема.gif" height="40" width="40">

<form>
<p><input type="search" name="Текст" placeholder="введите запрос" style="width: 300px; height: 25px;" /></p>
<p><input type="submit" formaction="Поиск.html" value="Поиск" ></p>

</form>
</left>
</html>

Как сделать так, чтобы то, что я ввел в <input type="search"> на первой странице (Дом.html) передавалось в <input type="search"> на второй странице (Поиск.html)?

Answer 1

Вариант на PHP.

На странице home.html:

 <form method="get" action="search.php">
  <input type="text" name="s" placeholder="введите запрос" />
  <input type="submit" value="Поиск" />
</form>

На странице search.php:

 <form method="get" action="search.php"> 
  <input type="text" name="s" value="<?= $_GET['s'] ?? '' ?>" placeholder="введите запрос" /> 
  <input type="submit" value="Поиск" /> 
</form>

P.S. Тег <center> выброшен из HTML много лет назад и его использование - совершеннейший говнокод. А тега <left> в HTML никогда не существовало.

Answer 2

можно серверной логикой или быстрой клиентской

 <!DOCTYPE html> 
<html lang="ru"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Быстрый поиск</title> 
  <style> 
    body { font-family: sans-serif; padding: 20px; } 
    input { padding: 6px; width: 300px; } 
    ul { margin-top: 15px; } 
    li { margin: 4px 0; } 
 
  .highlight { 
    background-color: yellow; 
    font-weight: bold; 
  } 
 
 
  </style> 
</head> 
<body> 
 
<h2>Поиск по сайту</h2> 
<input type="search" id="search" placeholder="Поиск по сайту..." /> 
 
 
<ul id="results"> 
  <li><a href="ind.html">Главная</a></li> 
  <li><a href="ind-1.html">Поиск</a></li> 
  <li><a href="services.html">Услуги</a></li> 
  <li><a href="contact.html">Контакты</a></li> 
  <li><a href="blog.html">Блог</a></li> 
</ul> 
 
<script> 
  const searchInput = document.getElementById('search'); 
  const links = document.querySelectorAll('#results li a'); 
 
  window.addEventListener('DOMContentLoaded', () => { 
    searchInput.focus(); 
    const saved = localStorage.getItem('lastSearch'); 
    if (saved) { 
      searchInput.value = saved; 
      highlight(saved); 
    } 
  }); 
 
  searchInput.addEventListener('input', () => { 
    const query = searchInput.value.trim(); 
    localStorage.setItem('lastSearch', query); 
    highlight(query); 
  }); 
 
  function highlight(query) { 
    links.forEach(link => { 
      const text = link.textContent; 
      if (!query) { 
        link.innerHTML = text; 
        return; 
      } 
 
      const regex = new RegExp(`(${query})`, 'gi'); 
      const highlighted = text.replace(regex, '<span class="highlight">$1</span>'); 
      link.innerHTML = highlighted; 
    }); 
  } 
</script> 
 
 
 
 
</body> 
</html>

будет делать подсветку по всем страницам