Как сделать поиск по сайту

Поиск на сайте своими руками

Наверное, многие когда-нибудь задумывались, как сделать поиск на сайте? Безусловно, для крупных сайтов с большим количеством контента поиск является просто незаменимой вещью. В большинстве случаев пользователь, впервые посетив Ваш сайт в поисках чего-либо важного, не станет разбираться в навигационных панелях, выпадающих меню и прочих элементах навигации, а в спешке попытается найти что-нибудь похожее на поисковую строку. И если такой роскоши на сайте не окажется, либо он не справится с поисковым запросом, то посетитель просто закроет вкладку. Но статья не о значении поиска для сайта и не о психологии посетителей. Я расскажу, как реализовать небольшой алгоритм полнотекстового поиска, который, надеюсь, избавит начинающих разработчиков от головной боли.

У читателя может возникнуть вопрос: зачем писать все с нуля, если все уже давно написано? Да, у крупных поисковиков есть API, есть такие клевые проекты, как Sphinx и Apache Solr. Но у каждого из этих решений есть свои преимущества и недостатки. Пользуясь услугами поисковиков, типа Google и Яндекс, Вы получите множество плюшек, таких как мощный морфологический анализ, исправление опечаток и ошибок в запросе, распознавание неверной раскладки клавиатуры, однако без ложки дегтя тут не обойдется. Во первых, такой поиск не интегрируется в структуру сайта — он внешний, и Вы не сможете указать ему, какие данные наиболее важны, а какие не очень. Во вторых, содержимое сайта индексируется только с определенным интервалом, который зависит от выбранного поисковика, так что если на сайте что-нибудь обновится, придется дожидаться момента, когда эти изменения попадут в индекс и станут доступными в поиске. У Sphinx и Apache Solr дела с интеграцией и индексированием гораздо лучше, но не каждый хостинг позволит из запустить.

Ничто не мешает написать поисковый механизм самостоятельно. Предполагается, что сайт работает на PHP в связке с каким-нибудь сервером баз данных, например MySQL. Давайте сначала определимся, что требуется от поиска на сайте?

• Поиск с учетом языковой морфологии. Независимо от падежа, окончания и
  других прелестей великого и могучего языка поиск должен находить то, что нужно
  пользователю. Другими словами, «яблок», «яблока», «яблоки» — это формы одного и того
  же слова «яблоко», что нужно учитывать в поисковом алгоритме. Одним из способов
  достижения данной цели является приведение каждого слова поискового запроса и слов
  содержимого сайта к базовой форме.
• Возможность указать контекст поиска. То есть, возможность самостоятельно выбрать
  контент сайта, в пределах которого будет работать поисковый алгоритм, а также определить
  значимость для каждого из пределов. Например, рассмотрим интернет-магазин. Предполагается,
  что поисковый запрос чаще всего будет содержать название искомой продукции, поэтому поиск по
  названиям товара будет иметь наивысший приоритет. В качестве следующего приоритета можно
  выбрать поиск по свойствам товаров, затем поиск по описанию.
• Индексирование содержимого сайта. Представьте ситуацию: одновременно около 30 человек
  выполняют поисковые запросы. Сервер принимает каждое соединение, управление потоком
  передается интерпретатору PHP. При каждом запросе заново инициализируется поисковый
  движок, заново перерывается содержимое сайта… Сложно сказать, сколько времени и
  ресурсов потребуется, чтобы обработать все эти запросы. Именно для того, чтобы не
  делать одну и ту же работу по сто раз, была придумана технология индексирования.
  Индексирование выполняется только при изменении или добавлении содержимого сайта,
  а поиск выполняется уже по индексу, а не по содержимому.
• Механизм ранжирования. Ранжирование результатов поиска — это сортировка результатов поиска, выполняемая на основе оценки значимости найденных данных. Например, в каком-нибудь блоге выполняется поисковый запрос «космос». Данное слово содержится в двух статьях: в первой 16 раз, во второй — 5 раз. Вероятнее всего, первая статья будет иметь большее значение для инициатора поиска. Также каждой разновидности содержимого сайта при индексировании задается определенный коэффициент, который будет влиять на его позиции в поисковой выдаче.

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

В конце статьи будет показан пример реализации поиска на примере простого интернет-магазина. Тем, кому лень все это изучать и просто нужен готовый поисковик, можно смело забирать движок из репозитория GitHub FireWind.

Принцип работы

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

Подготовка

Задача поставлена, теперь можно перейти к делу. Я использую Linux в качестве рабочей ОС, однако постараюсь не использовать ее экзотических возможностей, чтобы любители Windows смогли «собрать» поисковый движок по аналогии. Все, что Вам нужно — это знание основ PHP и умение обращаться с MySQL. Поехали!

Наш проект будет состоять из ядра, где будут собраны все жизненно необходимые функции, а также модуля морфологического анализа и обработки текста. Для начала создадим корневую папку проекта firewind, а в ней создадим файл core.php — он и будет ядром.

Теперь вооружаемся своим любимым текстовым редактором и подготавливаем каркас:

Тут мы создали основной класс, который можно будет использовать на Ваших сайтах. На этом подготовительная часть заканчивается, пора двигаться дальше.

Морфологический анализатор

Русский язык — довольно сложная штука, которая радует своим разнообразием и шокирует иностранцев конструкциями, типа «да нет, наверное». Научить машину понимать его, да и любой другой язык, — довольно непростая задача. Наиболее успешны в этом плане поисковые компании, типа Google и Яндекс, которые постоянно улучшают свои алгоритмы и держат их в секрете. Придется нам сделать что-то свое, попроще. К счастью, колесо изобретать не придется — все уже сделано за нас. Встречайте, phpMorphy — морфологический анализатор, поддерживающий русский, английский и немецкий языки. Более подробную информацию можно получить тут, однако нас интересуют только две его возможности: лемматизация, то есть получение базовой формы слова, и получение грамматической информации о слове (род, число, падеж, часть речи и т.д.).

Нужна библиотека и словарь для нее. Все это добро можно найти тут. Библиотека находится в одноименной папке «phpmorphy», словари расположены в «phpmorphy-dictionaries». Скачиваем последние версии в корневую папку проекта и распаковываем:

Отлично! Библиотека готова к использованию. Пришло время написать «оболочку», которая абстрагирует работу с phpMorphy. Для этого создадим еще один файл morphyus.php в корневой директории:

Пока реализовано только два метода. get_words разбивает текст на массив слов, фильтруя при этом HTML-теги и сущности типа « ». Метод lemmatize возвращает массив лемм слова, либо false, если таковых не нашлось.

Механизм ранжирования на уровне морфологии

Давайте остановимся на такой единице языка, как предложение. Наиболее важной частью предложения является основа в виде подлежащего и/или сказуемого. Чаще всего подлежащее выражается существительным, а сказуемое глаголом. Второстепенные члены в основном употребляются для уточнения смысла основы. В разных предложениях одни и те же части речи порой имеют совершенно разное значение, и наиболее точно оценить это значение в контексте текста сегодня может только человек. Однако программно оценить значение какого-либо слова все-таки можно, хоть и не так точно. При этом алгоритм ранжирования должен опираться на так называемый профиль текста, который определяется его автором. Профиль представляет из себя ассоциативный массив, ключами которого являются части речи, а значениями соответственно ранг (или вес) каждой из них. Пример профиля я покажу в заключении, а пока попробуем перевести эти размышления на язык PHP, добавив еще один метод к классу morphyus:

Индексирование содержимого сайта

Как уже говорилось выше, индексирование заметно ускоряет выполнение поискового запроса, так как поисковому движку не нужно обрабатывать контент каждый раз заново — поиск выполняется по индексу. Но что же все-таки происходит при индексировании? Если по порядку, то:

• Сначала из текста формируется массив слов, и делается это с помощью метода get_words.
• Согласно профилю, из текста отбрасываются незначимые части речи.
• Значимые оцениваются по пятибальной шкале, с помощью метода weigh.
• Для каждого сова выполняется поиск лемм, иначе говоря базовых форм.
• Рассчитывается количество повторений каждого слова и суммарный ранг.
• Все данные записываются в объект и в виде JSON записываются в базу данных.

В результате получается объект следующего формата:

Пишем инициализатор и первый метод ядра поискового движка:

Теперь при добавлении или изменении данных в таблицах достаточно просто вызвать данную функцию, чтобы проиндексировать их, но это не обязательно: индексирование может быть и отложенным. Первым аргументом метода make_index является исходный текст, вторым — коэффициент значимости индексируемых данных. Ранг каждого слова, кстати, расчитывается по формуле:

Хранение индексированных данных

Очевидно, что индекс нужно где-нибудь хранить, да еще и привязать к исходным данным. Наиболее подходящим местом для них будет база данных. Если индексируется содержимое файлов, то можно создать отдельную таблицу в базе данных, которая будет содержать индекс название каждого файла, а для содержимого, которое уже хранится в базе, можно добавить еще одно поле типа в структуру таблиц. Такой подход позволит разделять типы содержимого при поиске, например, названия и описание статей в случае блога.

Нерешенным остался лишь вопрос формата индексированного содержимого, ведь make_index возвращает объект, и так просто в базу данных или файл его не запишешь. Можно использовать JSON и хранить его в полях типа LONGTEXT, можно BSON или CBOR, используя тип данных LONGBLOB. Два последних формата позволяют представлять данные в более компактном виде, чем первый.

Как говорится, «хозяин — барин», так-что решать, где и как все будет храниться, Вам.

Benchmark

Давайте проверим, что у нас получилось. Я взял текст своей любимой статьи «Темная материя интернета», а именно содержимое узла #content html_format и сохранил его в отдельный файл.

На моей машине с конфигурацией:
CPU: Intel Core i7-4510U @ 2.00GHz, 4M Cache
RAM: 2×4096 Mb
OS: Ubuntu 14.04.1 LTS, x64
PHP: 5.5.9-1ubuntu4.5

Индексирование заняло около секунды:

Думаю, вполне неплохой результат.

Реализация поиска

Остался последний и самый главный метод, метод поиска. В качестве первого аргумента метод принимает индекс поискового запроса, в качестве второго — индекс содержимого, в котором выполняется поиск. В результате выполнения возвращается суммарный ранг, рассчитанный на основе ранга найденных слов, либо 0, если ничего не нашлось. Это позволит сортировать поисковую выдачу.

Все! Поисковый движок готов к использованию. Но есть одно но… На самом деле это не джин-волшебник, и просто закинув его на свой сайт Вы не получите ничего. Его нужно интегрировать, причем этот процесс во многом зависит от архитектуры Вашего сайта. Рассмотрим этот процесс на примере небольшого интернет магазина.

Реализация поиска на примере интернет-магазина

Допустим, информация о продаваемой продукции хранится в таблице production:

А описание в таблице description:

Поле production.keywords будет содержать индекс ключевых слов продукта, description.index будет содержать индексированное описание. И все это будут храниться в формате JSON.

Вот пример функции добавления нового продукта:

Здесь поисковый механизм был интегрирован в функцию добавления нового продукта магазина. А теперь обработчик поисковых запросов:

Данный сценарий принимает поисковый запрос в виде GET-параметра query и выполняет поиск. В результате выводятся найденные продукты магазина.

Как использовать поиск Google на любом сайте

Если вы зашли на какой-либо сайт и хотите найти определенный материал, то вы неминуемо вынуждены будете обратиться к встроенной в страницу поисковой форме. Однако, хоть и достаточно редко, но все же существуют еще сайты не обладающие собственной системой поиска или она настолько ужасна, что пользоваться ей совершенно невозможно.

В таком случае самым лучшим решением будет обратиться к услугам поискового движка Google. Из этой статьи вы узнаете, как сделать это легко и быстро.

Быстрый поиск

Вы, разумеется, знаете про расширенные настройки поиска на странице Google, которые позволяют искать по любому указанному домену. Однако для быстрого поиска по конкретному сайту нам вовсе не обязательно каждый раз переходить на страницу Google и ковыряться в расширенных настройках.

Необходимо просто в адресной строке адреса добавить перед именем сайта слово site:, затем пробел и ваш поисковый запрос. Таким образом, например для нашего сайта было lifehacker.ru, а станет site: lifehacker.ru запрос .

Поиск по сайту в Google Chrome

Создание постоянного поиска для сайта

Если вы планируете искать по определенному сайту не один раз, то вышеописанный процесс можно еще более облегчить и ускорить. Для этого воспользуйтесь следующим алгоритмом.

1. Откройте главную страницу сайта, который вас интересует.
2. Введите перед его адресом site:, как описано выше, и любой поисковый запрос на английском языке, например слово test. Получится site:lifehacker.ru test
3. На открывшейся странице с результатами поиска скопируйте адрес из адресной строки браузера. Он будет длинный и иметь вид что-то вроде: https://www.google.com/search?q=site%3Alifehacker.ru+ test &client=ubuntu&channel=cs&oq=site%3Alifehacker.ru+test
4. Идем с этим уловом в настройки Google Chrome и в разделе Поиск нажимаем кнопку Управление поисковыми системами.
5. Открывается окно, содержащие все поисковые механизмы, которыми вы когда-либо пользовались.
6. Проматываем в самый низ до появления поля Добавить систему. Здесь в поле Ссылка вставляем этот длинный адрес из буфера обмена. Сразу же находим в нем слово test (наш тестовый поисковый запрос, в третьем пункте он выделен красным) и меняем его на выражение %s. В соседних полях задаем Имя и ключевое слово, которое будет вызывать данный поиск.
7. Сохраняем результат, закрываем настройки.

Теперь мы можем в любое время, на любом сайте при необходимости легко использовать эту поисковую систему для поиска по любимому ресурсу. Для этого вводим в адресной строке заданное сочетание букв, нажимаем Tab и тут же появляется плашка с названием созданного вами поиска. Остается только ввести свой запрос и нажать Enter.

Таким же образом можно добавить столько поисков по сайтам, сколько вам может понадобиться.

Как использовать Google для поиска на определённом веб-сайте

Andrew Childress Last updated Nov 2, 2018

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

Но иногда вы хотите сфокусироваться на результатах с одного сайта. Вместо прочёсывания всего интернета, для поисков соответствующего запроса, вы захотите просканировать лишь один URL. Если вы уже знаете, что ищете, использование Google для поиска по сайту, может обеспечить самые быстрые и точные результаты.

В то время как Google, конечно же, блистает своей простотой использования и непритязательностью, «под капотом» у этой поисковой системы есть более продвинутые опции. В этом уроке я расскажу вам, как искать на сайте с помощью Google. Ещё мы рассмотрим передовые методы, чтобы вы тратили меньше времени на поиск и больше времени на контент, который найдёте. Поехали!

Смотри и учись

Ниже приведён короткий видеоурок, показывающий, как выполнить поиск по сайту с помощью Google. Изучение способов поиска в Google на определённом сайте гарантирует, что вы можете потратить меньше времени на то, что ищете, и вернуться к задаче. В видео ниже, я покажу вам как это сделать и сфокусироваться на одном-единственном домене.

Хотите узнать больше? Тогда продолжайте читать этот урок, и вы увидите иллюстрированное руководство по продвинутому поиску на сайтах с помощью Google.

Почему вы должны искать на сайтах через Google

Как упоминалось в начале этого урока, есть и другие способы поиска в Google, нежели сканирование всей сети. Вы можете направить поиск на один домен, например, tutsplus.com, и получать результаты только из соответствующего домена.

Несмотря на то, что Google, как правило, помогает мне сразу найти правильный контент, он не всегда может определить что-то конкретное, что я мог видеть раньше во время просмотра веб-страниц. На мой взгляд, есть две отличные причины для поиска на сайтах с помощью Google:

• Вы помните веб-сайт, на котором вы видели контент, но не помните конкретную страницу. В этом случае поиск содержимого, сфокусированного на одном домене, поможет вам гораздо быстрее найти то, что вы ищете.
• Сайт, на котором вы ищете, имеет плохой функционал поиска или вообще не имеет его, поэтому, проще передать работу по копанию в иерархии этого сайта Гуглу. Посмотрим правде в глаза: функция поиска на большинстве веб-сайтов работает не так хорошо, как у Google, поэтому используйте поиск по сайту через Google.

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

Как выполнить поиск по сайту через Google

Если вы используете Google, то обычно вы вводите условие для поиска на сайте Google.com или, возможно, прямо в адресную строку вашего веб-браузера. Вы нажимаете «Enter», и вуаля! Результаты со всего Интернета у вас под рукой.

Но иногда и эти результаты настолько обширны, что вам нужен способ их улучшить. Выдалось так много данных, что теперь вам придётся тратить время и просматривать длинный список результатов. Наоборот, поиск на определённом сайте может значительно уменьшить количество результатов, а, следовательно, количество времени, которое требуется, для поиска того, что вы ищете.

Поиск на определённых сайтах сводится к ограничению URL-адресов, включенных в поиск. Давайте рассмотрим пример.

Если бы я хотел найти результаты по PowerPoint, которые публикуются только в сети Tuts+, вот что я бы набрал:

PowerPoint tutorials site:tutsplus.com

Как видите, в этих результатах поиска, страницы получены только с tutsplus.com из-за «site:tutsplus.com», который я добавил в поисковый запрос.

«site:tutsplus.com» в конце этого поискового запроса — вот, где происходит волшебство. Вместо поиска по всей сети, Google будет искать только в домене, указанном вами с помощью оператора «site:».

В случае таких сайтов, как Tuts+, есть много поддоменов, на которых мы публикуем, например, Business (на business.tutsplus.com) или Computer Skills (на computer.tutsplus.com.). В поисковом запросе, который я показал в приведённом выше примере, поиск выполнен по всем поддоменам.

Если вы хотите уточнить поиск ещё больше и сосредоточиться только на одном из этих поддоменов, вот пример поискового запросах, который вы можете использовать:

PowerPoint tutorials site:business.tutsplus.com

Такой поиск вернёт материалы только из раздела сайта Business, а не из всей сети Tuts+. Большие сайты с множеством, поддоменов действительно выигрывают от этого более конкретного подхода к поиску.

Расширенные функции поиска Google

Все ещё не нашли, что ищете? Не беспокойтесь, у Google есть ещё более расширенные функции, которые помогут вам в работе с задуманным содержимым.

Поиск конкретных фраз

Иногда я вспоминаю конкретные фразы из прочитанных статей. Автор сказал что-то очень осмысленно, а я это запоминаю.

Такой метод поиска является одним из самых важных, при поиске чего-то с помощью фразы. Чтобы найти конкретную фразу, просто вставьте её в кавычки, например:

«add animations in Keynote»

Для уточнения результатов, вы также можете объединить это с поиском по определённому URL:

«add animations in Keynote» site:tutsplus.com

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

Когда вы используете этот оператор поиска, в результатах поиска будут только страницы, содержащие именно эту фразу. Если на сайте есть фраза «add animations in Apple Keynote,», страница не будет включена в результаты поиска из-за разницы в поисковых запросах.

Исключение результатов

Иногда я точно знаю, чего я не ищу. В таких случаях, можно искать на сайте через Google и исключить определённые фразы или результаты. Используя знак «-» (минус) перед URL или фразой, вы можете исключить эти данные из списка результатов Google.

Есть несколько способов применения этой техники. Во-первых, вы можете исключить все сайты из поиска, если знаете сайт, который не подходит вам для поиска. Например, я часто пропускаю учебники на YouTube, потому что предпочитаю текстовые версии уроков. Чтобы исключить весь домен, введите поисковый запрос, который бы использовал я:

PowerPoint tutorials -site:youtube.com

Заметьте разницу в поисковых результатах, при исключении всего домена YouTube.

Вы можете добавить несколько операторов в это исключение, если захотите исключить другие домены:

PowerPoint tutorials -site:youtube.com -site:tutsplus.com

Можно исключить определённые фразы из результатов поиска таким же способом. Следующее полностью исключает любые страницы, которые содержат фразу «PowerPoint for Mac».

PowerPoint tutorials -«PowerPoint for Mac» -site:youtube.com

Обычно я не рекомендую использовать исключение, но эти операторы помогут вам исключить нежеланные условия из поиска.

Поиск в заголовках, тексте и URL

Давайте будем более конкретными в том, хотим ли мы найти заголовки, текст или URL. Объясню разницу в этих понятиях:

• Заголовок. Заголовок страницы показывается на странице результатов, а также и во вкладке вашего браузера. Он не обязательно будет на самой странице.
• Текст. В этом случае, текст — это любой текст на странице или в материале.
• URL. В URL между словами есть дефисы, но тем не менее, вы можете запросить поиск по определённым словам в URL сайта.

Хорошо, что Google достаточно умён, чтобы работать с этим по отдельности, а значит, вы можете более конкретизировать результаты поиска.

Для поиска по заголовкам материалов, попробуйте параметр title. Если в заголовке будет содержаться искомая фраза, то Google включит эти страницы в результаты поиска.

Для поиска в тексте материала, вы можете использовать параметр «intext», в начале поискового запроса. Это удобно, когда искомое находится в тексте, а не заголовке или URL.

И наконец, попробуйте искать слова в URL сайта, используя следующую структуру.

Опять же, вы можете комбинировать эти с другими приёмами из этого урока. Попробуйте поиск по тексту или заголовку, а также с указанием определённого домена, на котором вам нужно выполнить поиск, для улучшения, выданных Гуглом, результатов.

Обязательно проверьте урок от Боба Флиссера (ниже по ссылке), по этим продвинутым техникам поиска и другому. Освоение нескольких дополнительных трюков Google, поможет вам проводить меньше времени за поиском.

Продолжайте учиться

Поиск иногда похож на магию. Как страницы попадают в начало результатов? Стоит ли смотреть на другие поисковые машины? Ответы на эти вопросы ищите в этих других материалах на Tuts+:

Как найти что-то конкретное или уникальное при поиске в Интернете? Сообщите мне в комментариях ниже, есть ли у вас есть любимый приём, чтобы поделиться с другими читателями Tuts+.

Как сделать поиск по сайту на HTML

На этом уроке мы научимся встраивать строку поиска в адаптивное меню навигации, используя при этом только HTML/CSS код.

Демонстрация примера.

HTML разметка

Внутри меню навигации <nav> у нас будет три пункта меню в виде ссылок и встроен блок с классом search-box, внутри которого форма для поиска с полем поиска и кнопкой.

Вся эта конструкция до стилизации выглядит таким вот образом.

CSS код

Зададим светло-зелёный цвет фона для панели навигации.

nav <
background-color: #dcedc8;
>

Поместим все ссылки в строку с помощью обтекания слева, представим ссылки, как изначально строчные элементы – блочными.

nav a <
float: left;
display: block;
>

Меняем цвет фона под ссылками при наведении.

nav a:hover <
background-color: #8bc34a;
>

Стилизуем активный элемент для выделения пункта меню текущей страницы.

nav a.active <
background-color: #8bc34a;
color: #fff;
>

Располагаем контейнер для поиска на правой части панели навигации.

nav .search-box <
float: right;
>

Стилизуем поле для поиска внутри панели навигации.

nav input[type=text] <
padding: 5px;
margin-top: 7px;
border: none;
>

Стилизуем кнопку Отправить внутри контейнера с поиском, располагая её правее по отношению к строке поиска (float:right).

nav .search-box button <
float: right;
padding: 5px;
margin-top: 7px;
margin-right: 15px;
background: #8bc34a;
border: none;
cursor: pointer;
>

Меняем цвет кнопки при наведении.

nav .search-box button:hover <
background: #bdbdbd;
>

До ширины экрана 625 пикселей панель навигации выглядит хорошо.

После 625 пикселей конструкция ломается, необходимо делать медиа-запрос для маленьких устройств.

Медиа-запросы

Первым делом отменим обтекание везде, где оно было (float:none), это позволит всем элементам занять вертикальное положение, на ширине экрана меньше, чем 625 пикселей.

@media screen and (max-width: 625px) <
nav .search-box <
float: none;
>
nav a, nav input[type=text], nav .search-box button <
float: none;
display: block;
text-align: left; /* ссылки слева */
width: 100%; /* на всю ширину экрана */
>
nav input[type=text] <
border: 1px solid #689f38; /* рамка для строки поиска */
>
>

Добавить иконку на кнопку Отправить

1) Добавить ссылку между тегами head:

<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»>

2) Вставить иконку между тегами button:

Мы сделали лишь внешнюю сторону формы поиска по сайту, поиск пока не рабочий, то есть без программной части.

Посмотреть код целиком можно на Codepen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 2 ):

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

++++ очень качественно, спасибо.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.