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

Ранее были уже опубликованы ряд статей, касаемо организации поиска по сайту с помощью услуг, предоставляемых поисковыми системами: Google и Яндекса. Теперь же рассмотрим ещё один вариант, который позволяет сделать поиск без обращения к сторонним сервисам.

HTML-код поля для поиска выглядит как:
<input name="имя" value="значение" size="ширина" type="text">

Можно внести изменения в стиль:
<input name="nomer2" value="" size="20" type="text" style="
color: rgb(255, 255, 255); 
border: 2px solid rgb(100, 117, 134); 
padding: 5px 2px 5px 30px; 
background: url(&quot;http://1.bp.blogspot.com/_hljKDuw-cxQ/SDEJPIeJG2I/AAAAAAAAGaM/N_Lu4sxLH_4/s00/lpDemoBuscador.gif&quot;) no-repeat scroll 5% 50% rgb(68, 85, 102);
">

Скрипт, чтобы текст исчезал при щелчке мышки:
<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Search"
 title="Search"
 type="text"
/>

Динамично изменяющийся фон:
<input
 onblur="this.value=(this.value=='')?this.title:this.value;this.style.backgroundColor='#ccc';"
 onfocus="this.value=(this.value==this.title)?'':this.value;this.style.backgroundColor='#fff';"
 value="Search"
 title="Search"
 type="text"
style="text-align: center; background-color: #ccc;" />

Использование HTML5 предлагает тот же эффект, но без отображения в IE:
<input placeholder="поиск по сайту">

placeholder можно задать стили:
<style>
#form-query:-moz-placeholder { background: #DDD; color: Chocolate;}
#form-query::-webkit-input-placeholder { background: #DDD; color: Chocolate;}
#form-query:-ms-input-placeholder { background: #DDD; color: Chocolate;}
</style>

<input id="form-query" placeholder="поиск по сайту">

Далее заключаем тег input (возьму последний вариант) в тег form и можно уже искать по данному блогу. Вот только ранжирование статей будет осуществляться не по релевантности, а по дате.


<form method="get" action="/search" target="_blank"><input name="q" id="form-query" value="" placeholder="поиск по сайту"></form>

Можно добавить рядом кнопку "Искать"


<form method="get" action="/search" target="_blank">
<input name="q" id="form-query" value="" placeholder="поиск по сайту"> <input type=submit value="искать"></form>

Или изображение лупы


<form method="get" action="/search" target="_blank">
<input name="q" id="form-query" value="" placeholder="поиск по сайту"> <input src="http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png" type="image" style="vertical-align: bottom; padding: 0;"/></form>

Далее обращаемся к CSS и подбираем необходимое внешнее оформление.

Стильная форма поиска по сайту.

Интересное решение было предложено на boxtuffs.com. Код я несколько скорректировала, опираясь на новые тенденции. Функционирует в IE 10.
<style>
.form-search {
  display: inline-block;
  background: -moz-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
  background: -ms-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
  background: -o-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
  background: -webkit-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);
  border-radius: 5px;
  padding: 4px;
}

.form-search input {
  width: 60px;
  height: 32px;
  line-height: 32px;
  font: 13px Helvetica, Arial, sans-serif; 
  color:#6E7074;
  text-shadow: 0 1px 0 #FFF;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;  
  padding: 0 30px 0 6px; 
  background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -moz-linear-gradient(#BCBCBC, #EBEBEB);
  background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -ms-linear-gradient(#BCBCBC, #EBEBEB);
  background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -o-linear-gradient(#BCBCBC, #EBEBEB);
  background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -webkit-linear-gradient(#BCBCBC, #EBEBEB); 
  background-repeat: no-repeat; 
  background-position: 100% 50%, 100% 100%;
  border: 1px solid #747474;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF; 
}

.form-search input:focus {
  width: 160px;
  box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
  color: #25464D;
  background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -moz-linear-gradient(#9CC2CA, #DFECEF);
  background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -ms-linear-gradient(#9CC2CA, #DFECEF);
  background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -o-linear-gradient(#9CC2CA, #DFECEF);
  background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -webkit-linear-gradient(#9CC2CA, #DFECEF);
}
</style>

<form class="form-search" method="get" action="/search" target="_blank">
<input type="text" name="q" placeholder="поиск" value=""/></form>
в f t
наверх ↑

103 комментария:

Анонимный
Сенк!!! Очень помогло!!!
XaSeR
Полезная статья. На основе ваших примеров, создал поиск под свой "цвет и вкус". Доволен :)
NMitra
Рада быть полезной!
Анонимный
а как сделать,чтобы результаты поиска появлялись?
NMitra
У вас платформа отличная от Blogger? Нужно смотреть конкретную cms.
Анонимный
+
Анонимный
Если у меня сайт, созданный в бесплатном html-конструкторе, то есть страницу я могу редактировать только в пределах тегов head,как написать содержимое для страницы поиска? Можете помочь?
NMitra
Нужен body. Вы же набираете где-то текст статьи, но формат HTML.
Анонимный
спасибо большое)
сайт
уменя не получается
NMitra
Что именно?
BogDIC
Что нужно сделать чтоб стандартное окно поиска раздвигалось, как в последнем примере? Хочу чтоб и IE нормально работал.
NMitra
Оно раздвигается, но не делает это плавно. В десятой версии будет поддерживаться свойство transition - http://shpargalkablog.ru/2011/07/transformaciya-css.html
Анонимный
А как сделать чтобы результат выдавало? Просто HTML файл.
NMitra
Не могу ответить, у меня движок сам формирует страницы вида "http://shpargalkablog.ru/search?q=запрос". Поищите в поисковиках "скрипт поиска по сайту php".
BogDIC
NMitra, спасибо. Немного изменил код из последнего примера, убрал градиенты и поменял иконку и степень прозрачности. На темном фоне блога смотрится красиво. Еще раз спасибо за хороший урок.
Анонимный
Как сделать анимированую кнопку для поиска, сама кнопка уже есть вот только не получается её туда прилепить, что бы она корректно работала?
Если можно на мыло ldu1991@mail.ru
KeySi
Классные формы - мне больше всего css и предпоследний вариант понравился - ну а остальное для новеньких =)
_________________________________________________________________________

Кстати люди всем заходить сюда - там классно - http://monster-school.tk/
Анонимный
как сделать чтобы при входе на сайт в форме поиска сразу же моргал курсор? Админ я жду ответа!!!
NMitra
Атрибут autofocus
Анонимный
Блин как все просто ёмаё! Спасибо NMitra!
Анонимный
А есть ли скрипт не для PHP, а для HTML???
NMitra
Здесь нет PHP. В некоторых примерах немного JavaScript, в последнем только CSS и HTML.
Анонимный
А есть расширенный поиск?
NMitra
Не совсем поняла, что вы имеете ввиду. Это только форма поиска, которая не будет функционировать без соответствующего скрипта.
Анонимный
Здравствуйте! Понравилась очень последняя форма поиска. Но... Вопрос: Как сделать, чтобы на лупу можно было бы нажимать и происходил поиск по сайту.
NMitra
Нужно кнопку выводить за
input type="text"
в
input type="image"
Сейчас она как фоновая картинка.
Анонимный
А вы могли бы сделать, а то у меня не получается, вывожу кнопку после input type="text" в input type="image" и она дублируется растягивается.
NMitra
Сделаю, но не обещаю, что на этой недели.
Анонимный
Спасибо Большое, буду ждать с нетерпением...
NMitra
Что нужно исправить:

<style>
.form-search {
  position: relative;
}

.form-search input[type="text"]:focus, .form-search:hover input[type="text"] {}

.form-search input[type="image"] {position: absolute; right: 5px; top: 5px; padding: 0;}

</style>

<form class="form-search" method="get" action="/search" target="_blank">
<input type="text" name="q" placeholder="поиск" value=""/><input src="http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png" type="image"/></form>

А также

background-image: url("http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"), -moz-linear-gradient(#9CC2CA, #DFECEF);

заменить на

background-image: -moz-linear-gradient(#9CC2CA, #DFECEF);
NMitra
.form-search input

заменить на

.form-search input[type="text"]
Анонимный
Не равномерно располагается Текст в форме по отношению к картинке. Вместо 31 поста и 32 не могли бы Вы полностью написать весь код. Ссори за надоедливость. Уж никак не выходит (.
NMitra
Ваш email, посмотрю после праздников
Анонимный
zdronx86@mail.ru - моя почта...

Взгляните пожалуйста на данный "ПОИСК" :



Хотел бы его переделать под ваш Последний.

Буду ждать от Вас новостей.
Анонимный
Упс. Я его закомментировал...
Анонимный
#search {
border-radius: 5px;
width: 270px;
vertical-align: top;
border: 2px solid #ACC57C;
height: 30px;
padding: 2px;
background: #F6F6F3;
text-align: right;
}

#search input {
vertical-align: top;
border: 0;
background: none;
color: #242E35;
}



#s {
text-align: left;
vertical-align: top;
width: 220px;
padding: 8px 3px 3px 3px ;
margin: 0;
background: none;
}

#topsearch {
margin-top: 15px;
}
NMitra
Отправила.
Анонимный
К сожалению на почту ничего не пришло, попробуйте пожалуйста на другую:
kimiddr@gmail.com
NMitra
Готово.
Анонимный
Спасибо Большое! Всё работает. Здорово! Правда ещё под себя переделывал, но это мелочи, по сравнению с Вашим трудом.
Анонимный
я новичок
я вставил форму на сайт но когда нажимаешь интер она открувает пистую страницу
Анонимный
подскажите как это исправить
Анонимный
оооо
NMitra
Посмотрите, пожалуйста, комментарий 15. У вас CMS может формировать страницы другого вида.
Анонимный
помогите мне с формой поиска на сайте....кто сможет напишите - http://vk.com/pro_100_shalun
NMitra
Боюсь, что я отвечаю на конкретные вопросы.
Анонимный
Помогите, я хочу точно такую же строку поиска, как последнюю "Стильная форма поиска по сайту", копирую весь текст под строкой поиска, вставляю у себя на сайт (в HTML), а появляется простая, самая верхняя. Что не так делаю?

(Если что, сайт на "Яндекс.Народ")
NMitra
Я толком не знаю этой платформы, она позволяет задействовать свои стили? Я бы просто воспользовалась Поиском от Яндекса, всё равно там только стандартный вариант.
Анонимный
NMitra, спасибо за ответ.
Анонимный
СПС
Анонимный
Как сделать, чтобы в последнем примере при двойном нажатии не высвечивалось слово снег? Буду очень благодарна за ответ)
NMitra
Это всего лишь вид формы, а варианты ответа и подсказки определяются php скриптом. У меня, например, первым идёт слово "каталог".
Den Kartas
Актуально ли будет задать еще вопрос?
Den Kartas
Жду ответа
Den Kartas
Скажите, как сделать чтобы поиск работа лп омоему сайту которого нету в интернете?
NMitra
Нужен php скрипт. Я, к сожалению, не имею практических навыков работы с этим языком программирования.
Den Kartas
Если не сложно объясните как сделать навигацию по сайту в html, возможно ли это вообще?
NMitra
Мне сложно понять что именно вы имеете ввиду, начните с кода ссылки http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html
Den Kartas
Мне нужен сайт на Html, в универ сдать. А я в этом вообще не разберусь... Времени до завтра а сделал процентов 10 по видео урокам с ютуба. Вот я и пытаюсь из последних сил что то выдумать... Могли бы вы мне чемто помоч? МОжет ест ькакойто шаблон у Вас? В интернете немогу ничего найти
Den Kartas
С надеждой жду любого ответа
Den Kartas
Вы могли бы дать свою почту? я бы выслал вам то что я сделал уже, если у Вас есть время, хотел бы услышать ваше мнение
NMitra
http://shpargalkablog.ru/2012/09/rezinovyi-sajt.html#maket - потому что вариантов тьма. Это мой макет.

Посмотрите ещё здесь http://seodon.ru/primery/html-css/makety-sajtov/

Den Kartas
Я Вам на почту уже выслал свое корявое творение
Den Kartas
Скопировал некоторые шаблоны в блокнот, открыл в браузере, не пойму что это такое... Ваш шаблон просто пишет текст шаблона и все. А по второй ссылке получается чтото несуразное на весь экран, как я могу это использовать?
Den Kartas
Спасибо
Павел
"Стильная форма" интересная
NMitra
Раньше там другие интересные вещи были, но автор не стал поддерживать проект. Очень жаль(((
Анонимный
пожалуйста подскажите как поиск из левой стороны переместить в правую?буду очень благодарна)
NMitra
Подробнее, пожалуйста. Саму форму перенести вправо?
Анонимный
да да да!саму форму!а то она в левой стороне находится,мне так не надо
NMitra
Адрес страницы вашей, посмотрю.
Анонимный
а как я скину?нам задали делать по практике,у меня просто документы,я не покупала доменые имена!
NMitra
Выбирайте что вам больше подходит:

float http://shpargalkablog.ru/2011/05/float-left-div-css.html

text-align http://shpargalkablog.ru/2012/03/div-po-centru-html.html , http://shpargalkablog.ru/2012/04/display-block-inline-css.html

transform: translate http://shpargalkablog.ru/2011/09/transform-css.html

position http://shpargalkablog.ru/2012/04/pozitsionirovaniye-css.html
Анонимный
Как и куда именно вставлять строку поиска? И еще как сделать так чтобы поиск происходил в HTML?
NMitra
Мне не понятен ваш вопрос. Зависит от платформы, которую вы используете.
NMitra
Подписка на блог http://feeds.feedburner.com/shpargalkablog

Предыдущие комментарии удалены, используйте, пожалуйста, пункт "Имя/URL"
Анонимный
Вижу повторяется вопрос про сайт на html, но ответа так и нет. У меня не используется никакая cms, простенький сайт состоит из файлов на html, со страницами, содержащими обычные таблицы с описанием товаров. Возможно ли организовать поиск товаров аналогичный встроенному Ctrl+F или др. (названия товаров могут повторяться)?
NMitra
Я в php не практиковалась

http://yandex.ru/yandsearch?text=%D1%81%D0%B0%D0%B9%D1%82%20%D0%BD%D0%B0%20%D1%84%D0%B0%D0%B9%D0%BB%D0%B0%D1%85%20%D0%BF%D0%BE%D0%B8%D1%81%D0%BA%20%D0%B7%D1%80%D0%B7&lr=51

Посмотрите http://htmlweb.ru и http://webphp.ru/ , но возможно уже есть другие более подходящие функции.
Alena
А как сделать, чтобы ето поле ИСКАЛО по сайту?
Alena
А как сделать, чтобы ето поле ИСКАЛО по сайту?
NMitra
Алёна, см. комментарий 15
Анонимный
А как сделать чтобы поле искали по сайту?????? Ведь это проста форма. Что надо сделать чтоб она заработала???????? Заранее спасибо!!!
NMitra
См. комментарии выше. Что ж никто не читает их?
bspfares
у меня сайт на nethouse.ru но тут нет предусмотренного этим сервисом поиска по сайту. Возможно ли такой поиск как Вы предлагаете сделать на моем сайте ?
MIR MRAMORA
а как удлинить форму поисковика
MIR MRAMORA
Вопрос потерпел неудачу и угодил в пропасть))
NMitra
Свойство width
Анонимный
а как последний поисковик сделать не по сайту а в яндекс, гугл и т.п.
NMitra
У Яндекса есть Яндекс.XML - http://api.yandex.ru/xml/

Есть http://shpargalkablog.ru/2011/01/poisk-ot-yandeksa-dlya-saita.html и http://shpargalkablog.ru/2011/01/ustanovit-poisk-google-na-sait.html

Но в условиях пользования сервисами указано, что код нельзя менять. Вернее: менять можно при дополнительной оплате. Это делается для того, чтобы распространять свой бренд.
Володя
Спасибо!
Artem Lukanin
А не подскажите как сделать так чтоб поисковик искал ключевые слова именно на моём сайте? Он выдаёт мне ошибку!
NMitra
Артём, могу подсказать по внешнему виду формы, php не владею.
LitNewSky
NMitra, подскажите, пожалуйста: у меня сайт на конструкторе wix и там есть только возможность вставлять готовые html коды.
Как правильно вставить скрипт поиска в эту форму? Просто добавить с низу, или нужно отделять какими-то командными словами? Может знаете какой простенький скрипт для моего случая?
LitNewSky
Сайт на html5
NMitra
LitNewSky, без php эта форма бессмысленна.
LitNewSky
Спасибо!
Может знаете какие-то решения для html5?
NMitra
Только в рамках одной страницы
Анонимный
У меня банальный вопрос...последняя форма по дизайну хорошая, но вот я не могу понять что нужно сделать что бы результаты поиска отображались на моем сайте...то есть на главную страницу страницу я вставил форму поиска но она не открывает сам поиск когда задаешь какой то запрос.
NMitra
Это просто оболочка, которая не работает без php скрипта
Анонимный
А можно позаимствовать Ваш скрипт хотя бы для анализа ?
Если не сложно то на почту... mediaupdator@gmail.com
NMitra
У меня нет php скрипта. Это стандартный от движка. Вам нужно что-то подобное http://redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html только на php, чтобы тот искал по всей бд

Анонимный
Спасибо за ответ и за ссылку, сейчас буду крутить :)