КодSEOБлогИное

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

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.
имя ключа параметра. Для поля поиска чаще всего применяется «q» или «text».
значение ключа параметра. Чаще всего не задаётся. Пользователь может его изменить на свой текст, если не указаны атрибуты readonly и disabled.
заблокировано изменение пользователем
заблокированы доступ, изменение пользователем и передача данных текущего параметра
поле не может быть пустым
шаблон ввода как в регулярных выражениях JS, следование которому необходимо для отправки формы
минимальное количество символов, необходимое для отправки формы
максимальное количество символов, которое может набрать пользователь
длина поля в символах
подсказка-заглушка
всплывающая подсказка при наведении курсора мышки
автозаполнение. Современные браузеры показывают ранее введённые поисковые запросы на текущем домене. Можно его отключить или сделать более конкретизированным.
список рекомендованных запросов
проверяется орфография и грамматика
фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа
<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:

<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>
АнонимныйКак сделать чтобы при входе на сайт в форме поиска сразу же моргал курсор? NMitraАтрибут autofocus UnknownА где скрипт? Без скрипта форма не работает. NMitraЯ использую Яндекс.Поиск по сайту. На странице http://shpargalkablog.ru/search/ установлен его скрипт. А с остальных страниц на неё идёт перенаправление с формы поиска.
Все комментарии