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

Автор Damir-Tote. Опубликовано в HTML, Блог

Вашему сайту или блогу нужна форма поиска по сайту в виде HTML? То тогда читайте статью дальше, вы узнаете, как добавить себе на сайт формы поиска от Яндекс и Google. А самое главное, вы узнаете, как создать форму HTML поиска по сайту. Примеры всех этих видов даны ниже, копируйте и вставляйте его себе на сайт. Если Вам нужно создание интернет магазина в москве, то сроки изготовления очень быстры и качественны.

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

Форма поиска от Яндекс

Форма поиска от Яндекс особо полезна тем, кто страдает медленным индексированием поисковой системы Яндекс. В общем и целом данный инструмент будет Вам полезен.
 
Установка поиска по сайту
 
1. Открываем страницу site.yandex.ru;
2. Жмем «Установить поиск»;
3. Прописываем «Название поиска» и выбираем адрес электронной почты;
4. В область поиска жмем + «Добавить сайты и исключения», прописываем свой сайт;
5. Подбираем под свой сайт «Форму поиска»;
6. Настраиваем «Результаты поиска»;
7. Проверяем полученный поиск;
8. Размещаем HTML код поисковой формы себе на сайт.

Форма поиска от Google

Поисковая система Google благодаря своей скорости индексирования новых страниц является наиболее удобной в плане реализации формы поиска. Ведь в поиске окажутся абсолютно все страницы в отличие от Яндекс, который опаздывает с индексацией. Установив поиск от Googleвы получите наиболее качественный релевантный поиск.
 
Установка поиска по сайту
 
1. Открываем страницу google.ru/csel;
2. Регистрируемся в Google, если нет аккаунта;
3. В странице шага 1, указываем сайт и язык;
4. Далее выбираем свой стиль оформления;
5. Указываем «Show domain name only»;
6. Получаем HTML код счетчика.

Примеры HTML форм поиска по сайту

Теперь рассмотрим примеры форм поиска по сайту без обращения к сторонним сервисам. Примеры сооружены с помощью HTMLи легко внедряются в код сайта.
 
HTML код для поиска выглядит следующим образом:
 

<inputname=»название» value=»значение» size=»ширина» typetext«>

 

 
Теперь тоже самое, но изменим оформление.
 

<input name=»poisk» 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» />

 
Добавляем рядом кнопку искать, к форме поиска.
 

<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>

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

Трекбэк с Вашего сайта.

  • Валентин

    А как задать полю поиска высоту?

    • size=»ширина»

      • Валентин

        ширину я вижу, а высоту как? Или она зависит от шрифта?

        • Попробуй value менять

          • Валентин

            но как этот атрибут может на высоту повлиять? не понимаю

          • Валентин

            в общем, получилось изменить размеры и закруглить края в css для input

.