BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Формы поиска для сайтов

Формы поиска для сайтов

2012-11-09 / Вр:21:48 / просмотров: 54498

Здравствуйте дорогие читатели моего блога. Сегодня у меня было вдохновение написать хороший пост, но я не знал о чем именно писать. Хочется писать посты о том, что вас сильно бы интересовало. Отсылайте мне письма через форму обратной связи, предлагайте темы, которые вы хотели бы видеть на моем блоге. Буду рад с вами держать связь через e-mail. Спасибо.
Сегодня с вами хочу поделиться красивыми формами поиска для сайта или блога. Но знайте, это просто форма поиска, без обработчика. Вы должны понимать, что любая форма без обработчика работать не будет, другими словами сказать, не будет выдавать задаваемый результат. Наверное я вас запутал?! Я не специально, так просто получилось.

Простой поиск для сайта.

Это простая форма поиска, без всяческих наворотов. Само название "простой поиск для сайтов" говорит само за себя.

Простой поиск для сайта

Вставьте этот код на сайте между тег <body> форма поиска </body>

<form method="get" action="">
<input class="search-text" ENGINE="text" name="s" id="s" value="Поиск..." onfocus="if (value == 'Поиск...') {value = ''}" onblur="if (value == '') {value = 'Поиск...'}" />
<input class="search-btn" type="submit" value="ok" />
</form>

Скачать форму поискаПросмотреть пример.

Форма поиска с подсветкой.

Сама форма для ввода поиска имеет серый фон, но при нажатии для написания текста в поле поиска, серый фон исчезает.

Форма поиска с подсветкой

Скачать форму поискаПросмотреть пример. 

Вставьте этот код на сайте между тег <body> форма поиска </body>


<form method="get" action="">
<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="Поиск"
 title="Поиск"
 type="text"
style="text-align: center; background-color: #ccc;" />
<input class="search-btn" type="submit" value="ok" />
</form>

Простая, но красивая форма поиска.

В этой форме поиска используется картинка. Вы можете подставить свою любую картинку, которую захотите.

Простая, но красивая форма поиска.

Скачать форму поискаПросмотреть пример.

Вставьте этот код на сайте между тег <body> форма поиска </body>

<form method="get" action="">
<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(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
">
</form>

background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
- я выделил красным картинку, которую вы можете смело поменять.

Резиновая форма поиска.

Почему именно резиновая форма? Да потому, что при нажатии на форму, поле ввода растягивается по ширине на столько, сколько вы прописали в коде.

.......до нажатия

Резиновая форма поиска
......и после нажатия формы поля

Резиновая форма поиска

Скачать форму поискаПросмотреть пример.


<html>
<head>
<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: 75px;
 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("search.png"), -moz-linear-gradient(#BCBCBC, #EBEBEB);
 background-image: url("search.png"), -ms-linear-gradient(#BCBCBC, #EBEBEB);
 background-image: url("search.png"), -o-linear-gradient(#BCBCBC, #EBEBEB);
 background-image: url("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("search.png"), -moz-linear-gradient(#9CC2CA, #DFECEF);
 background-image: url("search.png"), -ms-linear-gradient(#9CC2CA, #DFECEF);
 background-image: url("search.png"), -o-linear-gradient(#9CC2CA, #DFECEF);
 background-image: url("search.png"), -webkit-linear-gradient(#9CC2CA, #DFECEF);
}
</style>
</head>
<body>

<form class="form-search" method="get" action="/search" target="_blank">
<input type="text" name="q" placeholder="поиск" value=""/>
</form>

</body>
</html>

search.png - это картинка, вы можете поменять на свою.
.form-search input - параметры в CSS до нажатия,
width: 75px; - ширина поля,
height: 32px; - высота поля,
.form-search input:focus - параметры в CSS после нажатия,
width: 160px; - ширина поля после нажатия.

Красивая форма поиска.

В этой форме не используется картинка. Все сделано на чистейшем CSS.

Красивая форма поиска

Скачать форму поискаПросмотреть пример.


<html>
<head>

<style>
.searchform {
 display: inline-block;
 zoom: 1;
 *display: inline;
 border: solid 1px #d2d2d2;
 padding: 3px 5px;

 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
 background: -moz-linear-gradient(top, #fff, #ededed);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
 font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
 background: #fff;
 padding: 6px 6px 6px 8px;
 width: 202px;
 border: solid 1px #bcbbbb;
 outline: none;

-webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
 color: #fff;
 border: solid 1px #494949;
 font-size: 11px;
 height: 27px;
 width: 27px;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;

background: #5f5f5f;
 background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
 background: -moz-linear-gradient(top, #9e9e9e, #454545);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

</style>
</head>
<body>

<form class="searchform">
 <input class="searchfield" type="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
 <input class="searchbutton" type="button" value="Да" />
</form>

</body>
</html>

Вот и все формы поиска, что я хотел выложить на блоге. Если что-то будет интересное, я обязательно выложу... я не жлоб, хотя...... не, точно не жлоб. Удачи!!!
Есть вопросы, предложения, идеи?!! Пишите в комментариях.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

87 Ответов на комментарий - Формы поиска для сайтов

  1. Вера

    Здравствуйте, Степан! С удовольствие почитала статью и подписалась на ваш блог. Я как раз разбиралась с формами на html5 и тут так вовремя набрела на вашу статью. Спасибо Вам. У вас очень красивый дизайн. Успехов вам и благополучия, вам и вашей семье.

  2. Степан => автор блога ☼Степан ☼ автор блога

    Спасибо!!! Приятно. Рад, что моя статья вам пригодилась. :)

  3. Сашуля

    Красивые формы поиска, а как сделать обработчик формы для WordPress? :| Спасибо :smile:

  4. Сергей

    А откуда резиновая форма поиска берет картинку? Я имею ввиду, если не менять CSS свойства? На моем сайте такой картинки нет и на ваш вроде не ведет…

  5. Степан => автор блога ☼ Степан ☼ автор блога

    Если я вас правильно понял, вы не можете установить на сайт резиновую форму поиска?
    Вы можете скачать готовы исходный код с картинкой. Для этого нажмите скачать.
    Вот картинка с примера https://bloggood.ru/wp-content/lessons/serch/serch-demo/4/search.png
    В коде пункт 41-44.
    background-image: url(“search.png”), -moz-linear-gradient(#9CC2CA, #DFECEF);
    background-image: url(“search.png”), -ms-linear-gradient(#9CC2CA, #DFECEF);
    background-image: url(“search.png”), -o-linear-gradient(#9CC2CA, #DFECEF);
    background-image: url(“search.png”), -webkit-linear-gradient(#9CC2CA, #DFECEF);
    Картинка должна разместится в корне сайта. Если сделать вот так: images/search.png, тогда картинку нужно разместить в папку images.
    Если что-то не получается или я вас не так понял, пишите, помогу.

  6. Сергей

    Нет, в коде я разобрался и форму поставил, мне интересно, если взять код из статьи, тогда картинка подгружаться будет с вашего сайта?

  7. Сергей

    Не, это я туплю))))Все понял что надо картинку все таки закачать))))) Вчера ночью смотрел код, спать хотел и тупил)))))

  8. Степан => автор блога ☼ Степан ☼ автор блога

    Если использовать код так, как в примере в статье, картинка будет грузиться с вашего сайта. Картинку нужно загрузить в корень сайта. Если захотите картинку загрузить в любую папку сайта, тогда везде, где в CSS прописана картинка search.png укажите путь к папке. Вот так (название папки/search.png).

  9. Степан => автор блога ☼ Степан ☼ автор блога

    Правильно Сергей вы поняли. :arrow:

  10. ирина

    Добрый день,
    Я установила на сайт вашу форму поиска, но она не работает. Т.е. форма поиска видна на сайте, но найти что-либо через неё не возможно. Как это исправить?

  11. Степан => автор блога ☼ Степан ☼ автор блога

    Здравствуйте Ирина. Это всего лишь форма для поиска и не более. К этим формам поиска следует подключить скрипт который будет обрабатывать поиск. Если вы используете движок CMS, тогда с “поиском” проблем не должно быть. Какой движок используете вы? Если WordPress, тогда запросто расскажу, как подключить форму поиска.
    Пишите, хочу Вам помочь.

  12. ирина

    Степан, да я использую wordpress

  13. Степан => автор блога Степан => автор блога

    Ирина, посмотрите, есть ли на вашем шаблоне такие файлы:
    Результаты поиска (search.php), Форма поиска (searchform.php)?

  14. ирина

    Есть оба эти файла.

  15. Степан => автор блога Степан => автор блога

    Форму поиска скопируйте в файл (searchform.php). Скопируйте полностью этот код и вставьте его в файл searchform.php.

    <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input name="nomer2" value="" size="20" ENGINE="text" style="
    color: rgb(255, 255, 255);
    border: 2px solid rgb(100, 117, 134);
    padding: 5px 2px 5px 30px;
    background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
    ">
    </form>

    Все остальное в этом файле должно быть удаленно. Но советую сделать резервную копию в начале.
    Напишите результат.

  16. ирина

    Полностью заменила на код, котрый вы сказали, но что-то не работает

  17. Степан => автор блога Степан => автор блога

    Установите этот код в файле “header.php”.

    <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    Это код вывода формы поиска.

  18. ирина

    Поставила, но пока никаких изменений.

  19. Степан => автор блога Степан => автор блога

    Кстати, форму поиска вы можете поставить и через виджет “ПОИСК – Форма поиска для вашего сайта”.

  20. Степан => автор блога Степан => автор блога

    Давайте я с вами спешусь через почту? Постараюсь разобраться в чем проблема.

  21. ирина

    да, давайте спишемся в почте. Я буду вам очень признательна за помощь.

  22. Анастасия

    Здравствуйте. Подскажите, почему в варианте формы поиска с лупой, эта самая лупа не отображается? Как это можно исправить?
    А еще подскажите, можно ли у вас на блоге почитать, о том, как сделать форму комментирования записей со смайликами и добавить фон (в вашем случае линовка),

  23. Анастасия

    Здравствуйте еще раз. И еще возник вопрос. Все установилась, картинка, как мне нравится, но поиска по сайту не происходит. Что не так?

  24. Степан => автор блога Степан => автор блога

    Здравствуйте Анастасия. Спасибо вам за комментарии.
    Чтобы производился писк по сайту, нужен еще дополнительно скрипт. Вы используете движок WordPress или создаете сайты ручным способом (HTML)? Если вы используете WordPress, могу помочь.

  25. Анастасия

    Спасибо за быстрый ответ.
    Я использую WordPress.

  26. Степан => автор блога Степан => автор блога

    Здравствуйте. Чтобы отображалась лупа в поиске, нужно прописать правильно путь к картинке с лупой.
    Если я вас правильно понял,то по поводу комментариев со смайликами вы можете почитать тут

  27. Анастасия

    Да, именно это! Спасибо!

  28. Степан => автор блога Степан => автор блога

    в файле “searchform.php” найдите строку с <form> и замените на такой код

    <form class="search-mein" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">

    Если плохо объяснил, скажите, какой вы поиск выбрали из статьи.

  29. Анастасия

    Степан, дело в том, что у меня нет в теме этого файла вообще. И я не вижу никакого кода.

  30. Степан => автор блога Степан => автор блога

    В том файле в котором вы поставили код формы поиска нужно прописать “action”.
    Например, у меня в статье вы видите вот такой код:

    <form method="get" action="">
    ***********
    </form>

    ЗАМЕНИТЕ первую строку на вот такую:

    <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  31. Анастасия

    К сожалению, описанные вами ниже действия не помогли. :sad:

  32. Степан => автор блога Степан => автор блога

    Если вы мне доверяете, можете дать доступ в админ-панель. Я попробую исправить. Если согласны, тогда я вам отпишу на почту.

  33. Анастасия

    Боюсь, у меня нет выбора :roll:

  34. Степан => автор блога Степан => автор блога

    :smile:

  35. Ирина

    Гигантская проблема с поиском.. Установила на 404.php. Но поиск осуществляется конкретно на этой несуществующей странице с результатом: Нет результатов для поиска. Как мне быть? В хедэре уже есть форма, она работает и на 404, и на сайте, но в 404.php ваша форма не идет(

  36. Степан => автор блога Степан => автор блога

    Расскажите подробней, какую форму вы устанавливали? Ирина, если Вы просто скопировали и вставили готовый код формы поиска, то этого не достаточно. Она не будет работать без обработчика. Почитайте комментарии. Если далее не будет получаться, пишите, помогу.

  37. Ирина

    Использую простую, но красивую форму поиска. Вордпресс. Почитала все комменты к посту, все попробовала, но результаты поиска не обрабатываются. Меня редиректит на главную без результатов(

  38. Степан => автор блога Степан => автор блога

    Ира, меня интересовал более подробный ответ – Вы использовали форму из моего сайта? Если да, то какую по счету. А лучше скиньте в комментарий код формы поиска, так, как вы используете ее. Посмотрю, насколько правильно вы ее используете.

  39. Ирина

    Писала название, как у вас на сайте написано. Вот код. Пока вставила на страницу 404 ошибки, поскольку на главной не работающая форма не катит, а очень хочется такую, как у вас в коде

  40. Степан => автор блога Степан => автор блога

    где код?

  41. Степан => автор блога Степан => автор блога

    Попробуйте вот так. Вот код:

    <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input name="nomer2" value="" size="20" ENGINE="text" style="
    color: rgb(255, 255, 255);
    border: 2px solid rgb(100, 117, 134);
    padding: 5px 2px 5px 30px;
    background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
    ">
    </form>
    
  42. Ирина

    ДА, я использовала именно этот код, не знаю, почему он не вставился. Не работает.

  43. Степан => автор блога Степан => автор блога

    Ирина, откройте CSS файл вашей темы (Внешний вид -> Редактор -> style.css). Найдите в этом файле вот это:

    #searchform input
    {
    float: left;
    color: #000000;
    border: 1px solid #000000;
    }

    Замените его на этот:

    #searchform input
    {
    float: left;
    color: rgb(255, 255, 255);
    border: 2px solid rgb(100, 117, 134);
    padding: 5px 2px 5px 30px;
    background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);
    }

    Естественно картинку “1.png” залейте ко всем файлам вашей темы. Должно работать на все 100%. Я проверял на вашем сайте “Интернет-магазин женской одежды”. Если не получится, значит, вы что-то не так делаете.

  44. Алексей

    Не как то не очень

  45. Степан => автор блога Степан => автор блога

    нет так нет.

  46. Виктор

    Здравствуйте. Попробовал вашу форму поиска. Очень понравилась. (взял последний пример). Только возникли некоторые вопросы. Если можете ответьте пожалуйста.
    Добавил форму на статистическую страницу, которая отображается главной. Сам код добавлял не в визуальной закладке, а в закладке текст, т.е. там где виден исходный код. Все хорошо. При сохранении и обновлении страницы поиск отображается нормально, а при переходе на вкладку визуально и обратно форма сбивается и остается только несколько строчек ( 

    )
    Как убрать ошибку.
    И второй вопрос
    На кнопке “Да” изменил надпись “искать” и она переносится на строку ниже. Т.е. получается под поисковым полем. Как разместить ее справа от поискового поля.

  47. Степан => автор блога Степан => автор блога

    Здравствуйте, Виктор!
    Ответ на второй вопрос:

    <html>
    <head>
    <style>
    .searchform {
     display: inline-block;
     zoom: 1;
     *display: inline;
     border: solid 1px #d2d2d2;
     padding: 3px 5px;
     
     -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
     -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
     box-shadow: 0 1px 0px rgba(0,0,0,.1);
     
    background: #f1f1f1;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
     background: -moz-linear-gradient(top, #fff, #ededed);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
    }
    .searchform input {
     font: normal 12px/100% Arial, Helvetica, sans-serif;
    }
    .searchform .searchfield {
     background: #fff;
     padding: 6px 6px 6px 8px;
     width: 202px;
     border: solid 1px #bcbbbb;
     outline: none;
     
    -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
     box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }
    .searchform .searchbutton {
     color: #fff;
     border: solid 1px #494949;
     font-size: 11px;
     height: 27px;
     text-shadow: 0 1px 1px rgba(0,0,0,.6);
     
    -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    background: #5f5f5f;
     background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
     background: -moz-linear-gradient(top, #9e9e9e, #454545);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
    } 
    </style>
    </head>
    <body> 
    <form class="searchform">
     <input class="searchfield" ENGINE="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
     <input class="searchbutton" type="button" value="Искать" />
    </form>
    </body>
    </html>
    

    Результат:

    Насчет второго вопроса, я ничего не понял. :| Попробуйте еще раз мне объяснить проблему.

  48. Виктор

    Увеличиваю ширину поискового поля до 250px и она съезжает. Получается она просто не помещается, само поле ее вытесняет. Как увеличить блок всего поиска. и как подключить что бы поиск работал.
    Да я вставил код прямо на страницу, я правильно сделал? Или надо было в style прописывать.

  49. Степан => автор блога Степан => автор блога

    В “.searchform”, пропишите ширину блока “width: 330px;”. Я проверял на вашем сайте через исходный код, все должно получиться.
    Стиль CSS, нужно было прописать в файл style.css, так удобней.
    Чтобы работала форма поиска на WordPress, установите в файле “Форма поиска (searchform.php)”.

    <form class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input class="searchfield" ENGINE="text" name="s" id="s"  value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
    <input class="searchbutton" type="button" value="Искать" />
    </form>
    
  50. Виктор

    Что именно в style прописывать. и как тогда выводить на странице?

  51. Виктор

    Так кнопочка стала там где надо. Вставил код как вы сказали, а результаты не выдает. Да кстати у меня в редакторе пустой style, а на хостинге открываю нормально, все прописано.

  52. Степан => автор блога Степан => автор блога

    Виктор, почитайте об этом здесь

  53. Степан => автор блога Степан => автор блога

    Забыл написать. Чтобы отображался поиск, нужно было в файле “header.php” поставить вот такой код:

    <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    В файле “Форма поиска (searchform.php)” вот этот:

    <form class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input class="searchfield" ENGINE="text" name="s" id="s"  value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
    <input class="searchbutton" type="button" value="Искать" />
    </form>
    
  54. Егор

    Степан, Добрый день помогите пожалуйста с поиском, уже всю голову сломал.
    Проблема в следующем использую cms WP есть два файла
    1.Форма поиска (searchform.php)
    2.Результаты поиска (search.php)
    Я беру у вас на сайте форму поиска “Резиновая форма поиска” её html и вставляю допустим в файл Заголовок (header.php)все ок она отображается НО ПОИСК ПО САЙТУ НЕ ПРОИСХОДИТ???
    Что и КУДА нужно еще вставить??
    Нужно ли создавать страницу search ????
    Как это реализовать? Спасибо)! :o

  55. Степан => автор блога Степан => автор блога

    Здравствуйте, Егор! У Вас присутствует в шаблоне файл “Результаты поиска (search.php)”?

  56. Егор

    Да присутствует, вот писал
    2.Результаты поиска (search.php)
    Какой код куда вставлять ?)

  57. Егор

    В файле header.php
    присутствует строка

    проблема в том что не происходит поиск по сайту?
    Что не так делаю?

  58. Степан => автор блога Степан => автор блога

    Егор, если вы хотели прописать код в комментариях, это нужно было сделать так:
    [ code ] ваш код [ /code ]
    Попробуйте в header.php поставить этот код:

    <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    В форма поиска (searchform.php) установите этот код:

    <form class="form-search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input ENGINE="text" name="s" id="s" placeholder="поиск" value=""/>
    </form>
    

    Все должно работать. Может у вас проблема с файлом “Результаты поиска (search.php)”?
    Есть еще один способ как проверить форму поиска. Оставьте CSS стиль так как есть, а форму установите стандартную через виджет. Форма должна получиться резиновой. Жду результатов! Пишите!

  59. Егор

    Так что имеем, в header у меня стоит тот код который вы дали, в searchform у меня тоже стоит код поиска (поиск отображается), а вот в файле search он просто ПУСТОЙ, что там должно стоять ??? какой код?

  60. Степан => автор блога Степан => автор блога
    <?php get_header(); ?>				
    <?php if(have_posts()) : ?>
    <?php while(have_posts()) : the_post(); ?>
    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span>(<?php the_date_xml(); ?>)</span></h1>
    <?php the_post_thumbnail(); ?>  
    <?php the_excerpt(); ?>                    
    <?php endwhile; ?>				  
     <?php posts_nav_link(); ?>
    
    <?php else : ?>
    <h1>По вашему запросу ничео не найденно</h1>                     
    <img src="<?php bloginfo('template_url') ?>/imeges/404.jpg" alt="400" width="400" height="314" />		  
    <?php endif; ?>                                         				
    <?php get_sidebar(); ?>				                          					   
    <?php get_footer(); ?>	
    

    Может некорректно отображаться из-за неуказанных тегов

  61. Евгений

    Доброго времени суток. Очень понравилась твоя тема с формами поиска, я одну использовал. Скажи пожалуйста, что нужно сделать, чтобы она была привязана к сайту и выдавала информацию с него. Создаю сайты на платформе Parallels WPB.

  62. Степан => автор блога Степан => автор блога

    Здравствуйте, Евгений! Мне жаль, но помочь Вам не смогу, так как с платформой Parallels WPB я не знаком. Если бы на WordPress…

  63. Егор

    Добрый день Степан, я наверное уже достал вопросами но нечего не получается!?
    Делаю все как вы написали но поиск не происходит по сайту, я вам доверяю и могу дать доступ в WP, если вам не трудно посмотреть в чем же дело.
    Спасибо.

  64. Степан => автор блога Степан => автор блога

    Здравствуйте, Егор! Сбросьте данные через форму “Контакты”.

  65. Jones

    Здравствуйте, подскажите пожалуйста,как сделать так чтоб заходя на сайт пользователи видели только лупу, а при нажатии на нее выдвигалась строка поиска, то есть надо скрыть или что сделать со строкой поиска, чтоб ее не видно было пока не нажмешь на лупу и строка поиска не выдвинется??=)
    Как на сайте [ссылка удалена], только чтоб строка поиска выдвигалась слева от лупы.

  66. Степан => автор блога Степан => автор блога

    Здравствуйте! На том сайте, что вы дали в пример, используется jQuery. Я в jQuery еще пока что не силен!

  67. Иван

    Степан, огромное спасибо за труд! Очень понравилась “Красивая форма поиска”. Но при выполнении всех действий – кнопка не работает. То есть, просто не нажимается, хоть и выводится в шапке! В чем может быть дело?
    Вставляю в “searchform.php” этот код:

    <form class="searchform">
     <input class="searchfield" ENGINE="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
     <input class="searchbutton" type="button" value="Найти" />
    </form>
    

    в “Header” имеется:

    <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    файл “search.php” тоже есть, но я не знаю, что там нужно менять!
    В CSS вставлен:

    .searchform {
     display: inline-block;
     zoom: 1;
     *display: inline;
     border: solid 1px #d2d2d2;
     padding: 3px 5px;
     
     -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
     -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
     box-shadow: 0 1px 0px rgba(0,0,0,.1);
     
    background: #f1f1f1;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
     background: -moz-linear-gradient(top, #fff, #ededed);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
    }
    .searchform input {
     font: normal 12px/100% Arial, Helvetica, sans-serif;
    }
    .searchform .searchfield {
     background: #fff;
     padding: 6px 6px 6px 8px;
     width: 202px;
     border: solid 1px #bcbbbb;
     outline: none;
     
    -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
     box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }
    .searchform .searchbutton {
     color: #fff;
     border: solid 1px #494949;
     font-size: 11px;
     height: 27px;
     width: 27px;
     text-shadow: 0 1px 1px rgba(0,0,0,.6);
     
    -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    background: #5f5f5f;
     background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
     background: -moz-linear-gradient(top, #9e9e9e, #454545);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
    }
    "
    
  68. Степан => автор блога Степан => автор блога

    Нужно указать где находиться обработчик поиска:

    <form class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
     <input class="searchfield" ENGINE="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
     <input class="searchbutton" type="button" value="Найти" />
    </form>
    
  69. Владимир

    Скажите пожалуйста. а как вставить компактно Поиск в меню WordPress, подобно тому как это сделано в темах
    Avada
    Vantage
    Twenty Fourteen
    Или в плагине UberMenu.
    В теме Avada мне больше всего нравится.
    Понятно что там картинка при клике на которую ниже появляется форма поиска.
    У вас в теме выезжающая и следовательно она будет перекрывать пункты меню.

  70. Степан => автор блога Степан => автор блога

    Я не понял вопроса! У Вас тема “Avada” и Вы хотите вместо стандартного поиска сделать так, как у меня в примере?

  71. Владимир

    Нет у меня тема не Avada а Fruitful.
    _[адрес удален]
    Так как хочу сделать предельно простой в навигации блок, то решил отказаться от сайдбаров, а поиск установить правее меню. Но для обычной формы Поиска там места не хватает. Поэтому решил разместить правее корзины миниатюру лупы при клике на которую должна появляться форма Поиска.
    Сама корзина не в меню, а просто прижата флоатом.
    Рядом с ней также прижато флоатом меню.
    Я так понимаю что при клике на миниатюру Поиска через скрипт должен появляться или исчезать div c формой поиска.
    Саму форму загнать в Header легко, а вот найти подходящий скрипт не получается.
    Второй день роюсь в Интернете.
    Как пример рассматриваю сейчас
    вот такой метод
    _https://tradebenefit.ru/plavnoe-otkrytie-i-skrytie-bloka-div-sredstvami-jquery
    По замыслу вместо текстовой ссылки должна быть кликабельная картинка лупы, а во всплывающем диве форма поиска. Также как в теме Avada.
    Но что-то пока не получается. Ссылка появляется, но реакции на клик нет

  72. Степан => автор блога Степан => автор блога

    Владимир, попробуйте это сделать следующим образом:
    В Вашей теме откройте файл “header.php” и вставьте между этот код:

    <!-- Подключаем jQuery -->
      <script ENGINE="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    
      <!-- Скрипт плавного открытия и закрытия блока -->
      <script type='text/javascript'> 
        $(document).ready(function() { 
          $("A#trigger").toggle(function() { 
            // Отображаем скрытый блок 
            $("DIV#box").fadeIn(); // fadeIn - плавное появление
            return false; // не производить переход по ссылке
          },  
          function() { 
            // Скрываем блок 
            $("DIV#box").fadeOut(); // fadeOut - плавное исчезновение 
            return false; // не производить переход по ссылке
          }); // end of toggle() 
        }); // end of ready() 
      </script> 
    

    Теперь, откройте файл, где размещено меню (это может быть в файле header.php) и

    <a href='#' id='trigger'>Поиск</a> 
      <div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>
    <?php include(TEMPLATEPATH . '/searchform.php'); ?>
    </div>
    
  73. Владимир

    Большое спасибо за помощь. В общем то работает. Только Revolution Slider, который присутствует на моём сайте, убивает напрочь.

  74. Светлана

    Здравствуйте!У меня агенство по аренде домов.Очень нужен поисковик ,но не простой ,расширенный.Может подскажете как его сделать.Я мало что понимаю в программировании.

  75. Степан => автор блога Степан => автор блога

    Здравствуйте, Светлана! Я так понял, Вам нужен не поисковик а поиск для сайта? Если да, тогда есть отличное решение для организации поиска – “Яндекс.Поиск” .
    Ссылка на сайт: https://site.yandex.ru/

  76. Иван

    Здравствуйте! А есть код для поиска картинок по сайту?

  77. Степан => автор блога Степан => автор блога

    Здравствуйте! К сожалению нет!

  78. Станислав

    Здравствуйте, Степан!
    Что-то у меня никак не получается установить поиск на сайте. Можно как-то с вами связаться по скайпу?

  79. Степан => автор блога Степан => автор блога

    Здравствуйте, Станислав. Расскажите вначале, что не получается. Форма поиска отображается, просто ничего не ищет на сайт?

  80. Вячеслав

    Здравствуйте Степан!Форма поиска отображается, просто ничего не ищет на сайте.Подскажите лузеру что не так,что добавить.

    <html>
    <head>
     
    <style>
    .searchform {
     display: inline-block;
     zoom: 1;
     *display: inline;
     border: solid 1px #d2d2d2;
     padding: 3px 5px;
     
     -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
     -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
     box-shadow: 0 1px 0px rgba(0,0,0,.1);
     
    background: #f1f1f1;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
     background: -moz-linear-gradient(top, #fff, #ededed);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
    }
    .searchform input {
     font: normal 12px/100% Arial, Helvetica, sans-serif;
    }
    .searchform .searchfield {
     background: #fff;
     padding: 6px 6px 6px 8px;
     width: 202px;
     border: solid 1px #bcbbbb;
     outline: none;
     
    -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
     box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }
    .searchform .searchbutton {
     color: #fff;
     border: solid 1px #494949;
     font-size: 11px;
     height: 27px;
     width: 27px;
     text-shadow: 0 1px 1px rgba(0,0,0,.6);
     
    -webkit-border-radius: 2em;
     -moz-border-radius: 2em;
     border-radius: 2em;
     
    background: #5f5f5f;
     background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
     background: -moz-linear-gradient(top, #9e9e9e, #454545);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
    }
     
    </style>
    </head>
    <body>
     
    <form class="searchform">
     <input class="searchfield" ENGINE="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
     <input class="searchbutton" type="button" value="Да" />
    </form>
     
    </body>
    </html>
  81. Степан => автор блога Степан => автор блога

    Здравствуйте, Вячеслав!
    Это всего лишь каркас формы поиска. Нужен еще обработчик, который будет вытягивать из базы данных все статьи, где есть слово в забиваемом поиске.
    Если сайт не работает на БД, тогда есть готовое решение здесь.
    У Вас сайт написан на движке? Если да, то на каком?

  82. Марина

    Здравствуйте Степан помогите с проблемой кода,почему то не один код на моём сайте не работает, а если воспользоваться кодами гугла или яндекс то они производят поиск сначала по инету а потом по сайту, а мне нужно чтобы поиск работал только по сайту :???: уже сил нет

  83. Степан => автор блога Степан => автор блога

    Здравствуйте, Марина! Это всего лишь формы поиска, то есть каркас (оболочка). Теперь нужно создать обработчик (механизм), который будет искать статьи.
    Для этого понадобиться знания php.
    Насчет поиска от яндекс, почитайте тут.

  84. Александр

    Степан, здравствуйте!

    Подскажите, пожалуйста, как подключить обработчика, если нет никакого движка на сайте?

  85. Степан => автор блога Степан => автор блога

    Здравствуйте, Александр!

    <form method="get" action="здесь будет адрес обработчика">
    ...
    </form>
    
  86. Александр

    Степан, спасибо Вам за ответ.
    У меня это уже добавлено :)
    _________

    __________

    и сама строка отобразилась.
    Но Вы не могли бы, пожалуйста, подсказать, как сделать в html, чтобы поиск работал? Нужно что-то вписать в “action=”здесь будет адрес обработчика”, веб-сайт обработчика? Я просто совсем чайник в этом и не все понимаю)

    Если да, то не могли бы посоветовать обработчика?

    Очень благодарен за Вашу помощь.

  87. Степан => автор блога Степан => автор блога

    обработчик пишется на языке программирования и адрес на этот код вставляется здесь “action=”здесь будет адрес обработчика”.
    Вам бы я порекомендовал использовать вот это:
    Прочитайте

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573