Форма поиска по сайту

<form>
  <input type="search">
  <input type="submit" value="Найти">
</form>

Убрать в поле поиска крестик «Очистить», удаляющий ранее набранный текст

<style>
input[type="search"]::-ms-clear { /* нестандартный псевдоэлемент IE */ 
  display: none;
}
input[type="search"]::-webkit-search-cancel-button { /* нестандартный псевдоэлемент WebKit/Blink, но Esc по-прежнему будет удалять раннее введённый текст */ 
  display: none;
}
</style>

<input type="search">

Как работает форма поиска на сайте

Самый простой HTML-код

Если набрать в поле «вопрос» и щелкнуть по кнопке «Найти», то адрес страницы изменится с «http://shpargalkablog.ru/2011/06/forma-poiska-po-saitu.html» на «http://shpargalkablog.ru/2011/06/forma-poiska-po-saitu.html?text=вопрос», как это происходит при нажатии на ссылку. При загрузке страницы, скрипт проверяет наличие заданных параметров в URL и при их обнаружении формирует и отображает результаты поиска по сайту.

<form>
  <input type="search" name="text">
  <input type="submit" value="Найти">
</form>

Но в целях увеличения скорости загрузки документа, скрипт, обрабатывающий запрос, как правило, помещают только на одну страницу сайта, на которую будет сделан переход, если её адрес прописать в атрибуте action: «http://shpargalkablog.ru/search/?text=вопрос».

<form action="http://shpargalkablog.ru/search/">
  <input type="search" name="text">
  <input type="submit" value="Найти">
</form>

Для работы скрипта могут понадобиться дополнительные параметры, которые указываются в <input type="hidden">. Это поле не отображается. Теперь форма будет вызывать «http://shpargalkablog.ru/search/?searchid=808327&text=вопрос».

<form action="http://shpargalkablog.ru/search/">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text">
  <input type="submit" value="Найти">
</form>

Результат работы формы открыть в новой вкладке с помощью атрибута target

<form action="http://shpargalkablog.ru/search/" target="_blank">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text">
  <input type="submit" value="Найти">
</form>

Где взять скрипт поиска по сайту

Можно воспользоваться

• предложенным специальными сервисами Яндекса и Google,
• встроенным в используемую CMS (при наличии), например, на Blogger на «https://site.ru/search?q=вопрос», где «site.ru» заменить на свой адрес блога,
• разработанным самостоятельно, например, на PHP.

Самый простой вариант — перенаправить запрос Google:

<form action="http://google.com/search" target="_blank">
  <input type="search" name="q">
  <input type="hidden" name="as_sitesearch" value="shpargalkablog.ru">  <!-- «shpargalkablog.ru» заменить на свой адрес сайта -->
  <input type="submit" value="Найти">
</form>

Текст на кнопке: «Поиск», «Искать», «Найти»

Из слов-побудителей «Найти» имеет совершённый вид и подразумевает, что результат поиска будет обязательно положительным.

Значок лупы

Неактивная фоновая картинка CSS

<form action="/search/" target="_blank">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text" required placeholder="Поиск по сайту" style="
padding: 5px 2px 5px 25px;
background: url('http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s25/search.png') no-repeat scroll 0 50%;
">
</form>

Кликабельная кнопка-иконка

<style>
.form-search {
  display: inline-block;
  border-bottom: 1px solid;
}
.form-search input {
  all: unset;
}
</style>

<form action="/search/" target="_blank" class="form-search">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text" required placeholder="Поиск по сайту">
  <input type="submit" value="&#128269;">
</form>

Кликабельная картинка

<style>
.form-search {  /* форма с boxtuffs.com */
  position: relative;
  display: inline-block;
  border: 1px solid #747474;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
  background-image: linear-gradient(#BCBCBC, #EBEBEB);
}
.form-search:before {  /* рамка вокруг формы */
  position: absolute;
  content: "";
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: -1;
  border-radius: 5px;
  background: linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
}
.form-search:focus-within {  /* изменение формы при фокусе */
  box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
  background: linear-gradient(#9CC2CA, #DFECEF);
}
.form-search input[type="search"] {  /* поле поиска */
  width: 60px;
  height: 32px;
  line-height: 32px;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0 0 0 6px;
  background: transparent;
  font: 13px Helvetica, Arial, sans-serif;
  color: #6E7074;
  text-shadow: 0 1px 0 #FFF;
  transition: all .2s ease-out;
}
.form-search:focus-within input[type="search"],  /* изменение поля поиска при фокусе */
.form-search input[type="search"]:focus {
  width: 160px;
  color: #25464D;
}
.form-search input[type="image"] {  /* картинка лупы */
  padding: 0;
  vertical-align: bottom;
}
</style>

<form class="form-search" action="/search/" target="_blank">
  <input type="hidden" name="searchid" value="808327">
  <input type="search" name="text" required placeholder="поиск">
  <input type="image" src="http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"/>  <!-- вместо кнопки submit -->
</form>