Блог для начинающих веб разработчиков. HTML, СSS, Jquery, Drupal и другое.

→ HTML форма поиска для сайта. Создание и оформление.

Опубликовано: 11 мая 2012

Приветствую всех читателей и подписчиков heavenweb.ru. Сегодня я расскажу о том, Как сверстать стильную HTML форму поиска для сайта.

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

С точки зрения браузера – это простые HTML формы, с двумя элементами: текстовое поле и кнопка, которая отправляет запрос. Иногда кнопки может и не быть, тогда форма отправляется нажатием клавиши enter.

В качестве примера я взял одну из работ с сайта premiumpixels.com. Вот ссылка на сам пост. Этот бесплатный psd файл с оформлением шести видов форм выглядит, как показано на картинке ниже. Вы можете скачать и сам PSD с того сайта, так как он распространяется бесплатно.

ДемоСкачать

Мы ограничимся созданием светлой и тёмной версии, так как третья – синего цвета очень похожа на светлую.

Что у нас получится в итоге, смотрите ниже:

Итак, как я уже сказал, HTML код представляет собой форму с двумя элементами input. Для удобства оформления, каждый из них я обернул в блок div.

<form action="" method="post" id="search-block-form">
      <div class="form-item">
        <input type="text" name="" value="" maxlength="128" placeholder="Найти...">
      </div>
      <div class="form-actions">
        <input type="submit" name="op" value="Поиск" class="form-submit">
      </div>
</form>

Для всех видов оформления, этот код будет один и тот же.

Кто работал с Drupal 7, могут увидеть, что эта структура очень похожа на стандартную форму поиска в Drupal 7. Так и есть. Если вы будете встраивать это оформление в свой сайт на этой CMS, вам не понадобится что-то менять в выводе HTML (кроме placeholder, см.ниже).

Для поля ввода мы задаём атрибут placeholder. Значение этого атрибута показывается внутри поля ввода, и пропадает, когда поле получает фокус. Очень удобное свойство.

По умолчанию в разных браузерах вся эта форма поиска будет выглядеть по-разному, и везде не очень стильно. Например, её вид в Opera и Safari показан ниже:

Поэтому нам не обойтись без стилевой разметки. Рассмотрим стили для круглой светлой версии. В CSS файл нужно вставить следующий код:

#search-block-form{
	width:248px;
	height:28px;
	border-radius:15px;
	border:#c9c9c9 solid 1px;
	background:url(images/searchBg.png) left top repeat-x;
	}
.focus-active{
	border-color:#aaa !important;
	background:#fff !important;
	}
#search-block-form input{
	padding:0;
	margin:0;
	display:block;
	border:none;
	outline:none;
	background:none;
	width:100%;
	height:100%;
	}
#search-block-form .form-actions{
	width:28px;
	height:28px;
	float:left;
	background:url(images/searchIcon.png) 5px 2px no-repeat;
	}
#search-block-form .form-actions input:hover{
	cursor:pointer;
	}
#search-block-form .form-actions input{
	overflow:hidden;
	text-indent:-9999px;
	}
#search-block-form .form-item{
	width:210px;
	padding:0px 5px;
	float:right;
	height:28px;
	}
#search-block-form .form-item input{
	font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#222;
	height:auto !important;
	padding:6px 0;
	}
.placeholder{color:#cbcbcb !important;}

Разберём по порядку и подробнее. Сначала мы задаём самой форме c идентификатором #search-block-form размеры, цвет рамки и скругление углов.

#search-block-form{
	width:248px;
	height:28px;
	border-radius:15px;
	border:#c9c9c9 solid 1px;
	background:url(images/searchBg.png) left top repeat-x;
	}

Все внутренние элементы не будут иметь цвета фона или границ, поэтому отменяем все стандартные свойства у обоих тегов input.

#search-block-form input{
	padding:0;
	margin:0;
	display:block;
	border:none;
	outline:none;
	background:none;
	width:100%;
	height:100%;
	}

Задавать оформление мы будет по возможности, div-ам в которые обёрнуты элементы, а не им самим.

Блок form-actions будет держаться левой стороны, а form-item – правой. У кнопки отправления формы есть текст, а нам он не нужен, поэтому убираем его следующим известным методом.

#search-block-form .form-actions input{
	overflow:hidden;
	text-indent:-9999px;
	}

Далее всё понятно, мы указываем цвета, отступы и шрифты для текста.

#search-block-form .form-item input{
	font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#222;
	height:auto !important;
	padding:6px 0;
	}

Теперь рассмотрим JavaScript код.

<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.placeholder.min.js"></script>
<script>
/*  Скопируйте код ниже в ваш js файл. (JavaScript). */

$(document).ready(function(e) {
	$("input[placeholder]").placeholder();
	$("#search-block-form .form-item input").focus(function(){
		$("#search-block-form").addClass("focus-active");
			})
	.blur(function(){
		$("#search-block-form").removeClass("focus-active");
	});
});

/* Конец */
</script>

Казалось бы, зачем здесь нужен JavaScript? На самом деле он добавляет несколько полезных для юзабилити вещей.

Во-первых, свойство placeholder пришло вместе с HTML5, и его поддержка в старых браузерах оставляет желать лучшего. Но есть простое решение в виде jQuery плагина jQuery-Placeholder, который обеспечит поддержку этого свойства у всех браузеров (включая даже IE6!).

Для этого подключаем сам файл и включаем эту функцию:

$("input[placeholder]").placeholder();

Если уж мы подключили jQuery, то можно сделать ещё что-нибуть. Например, пусть при получении фокуса формой, она как-то изменяется.

Для этого мы создали специальный класс focus-active. При добавлении этого класса к форме она меняет цвет фона на белый, а цвет рамки становится немного темнее. Форма станет как бы  реагировать на действия пользователя.

.focus-active{
	border-color:#aaa !important;
	background:#fff !important;
	}

Класс .placeholder оформляет текст из атрибута placeholder в старых браузерах. Этот класс возможно использовать только если мы используем тот самый jQuery плагин.

.placeholder{color:#cbcbcb !important;}

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

Другие версии не сильно отличаются, смотрите исходный код демо-страниц, там есть необходимые комментарии.

ДемоСкачать

На сегодня всё. Пишите в комментариях, о чём бы вы хотели прочесть в новых постах блога, а так же подписывайтесь на RSS и получайте информацию об обновлении heavenweb.ru первыми!

Поделиться:
Комментарии

"Светленькая" - по-моему универсальный вариант.
Скоро придётся задуматься о добавлении формы поиска на свой блог, как статьями разживусь, так и придётся :D

сб, 2012-05-12 19:32

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

Faraday
сб, 2012-05-12 20:39

Хм. Квадратная тоже отлично смотрится, мне она даже больше круглой нравится, но тут, как говорится, на вкус и цвет..

вс, 2012-05-13 11:06

Therefore, people need more time online.

Here is my web page ... erozon max composicion

вс, 2019-07-14 13:18

Есть маленький нюанс... В IE круглые формы становятся квадратными, т.к. более ранние версии не поддерживают border-radius. думаю еще что нить найдется. Если делаете на "выкладку", то делайте максимально качественно.
С уважением, YeahGore

YeahGore
пн, 2012-11-12 23:20

Thank you for any other excellent article. Where

else may anybody get that type of info in such an ideal manner of writing?

I've a presentation subsequent week, and I am at the search for

such information.

Here is my webpage - pastillas para agrandar el pené en mexico

сб, 2019-07-13 08:15

Очень полезно и просто! спасибо за информацию! \(*о*)/

Misa
сб, 2013-01-05 18:12

Побольше бы информации по данной темке, интересно ж однако ознакомиться

kaiholscopyr1983
сб, 2013-02-23 20:22

Так и не разобрался где выводятся результаты поиска, как они должны сортироваться по дате или ещё как? вообще ни слова

Александр
ср, 2013-03-06 20:13

Здесь нет вывода результатов, в статье описывается только оформление самого поля ввода. Вы уже сами можете прицепить его к нужной вам CMS или самописным скриптам.

Faraday
пн, 2013-04-29 12:26

Ребят я ничего не понимаю!!!Когда я копирую код элемента в Google Chrome и вставляю его на сайт в html коробку, получается поиск не красивый, то есть обычное прямоугольное поле и квадратная кнопка.Кто знает плиз подскажите мой скайп temka48.ru.Оставьте если что свой скайп, кто что то понимает!

Артём
сб, 2013-03-09 17:24

Мдаа..Сколько же возни с формой поиска..

вс, 2013-09-01 19:26

IE вообще не браузер!

сб, 2013-12-28 16:40

Спасибо! помогло!

чт, 2014-02-06 16:51

Всем Hi....! у меня лишь один вопрос, почему интегрированный /*.focus-active{
border-color:#aaa !important;
background:#fff !important;*/ не работает как надо, а именно, поисковик при первой загрузке наследует цвет фона блока в котором он находится, и только при наведении стрелки на поисковик меняет его на белый!!!

Please help me!!!

Serj
вс, 2014-07-06 19:10

Можете показать пример, где не работает?. (если в моём примере, то в каком браузере?). Просто не совсем понял вопрос. .focus-active же применяется как раз когда по строке поиска кликают, т.е. она принимает фокус. А просто при загрузке страницы бордеры и бекграунд задаются в #search-block-form

Faraday
пн, 2014-07-07 07:35

))я уже разобрался...теперь хочу разобраться как подключить его к сайту,чтобы он искал ....

Serj
ср, 2014-07-09 15:18

WordStat и Планировщику ключевых слов Google.

Here is my web site :: ďđîäâčćĺíčĺ ŕíăëî˙çű÷íűő ńŕéňîâ îńîáĺííîńňč

пн, 2019-07-15 15:27

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

Екатерина
чт, 2014-08-07 13:43

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

1. Делают блок (часто <label>) с подсказкой, размером с поле ввода и позиционируют его над полем ввода.

2. По клику на него, сам блок скрывают, а в поле вставляется фокус.

3. Когда поле теряет фокус, проверяют, если оно пустое, то показывают блок, а если нет, то оставляют значение.

Как-то так.

Faraday
сб, 2014-08-09 18:06

Добрый день, подскажите как можно настроить фильтры по поиску, например, как на сайтах агентств недвижимости. Фильтры по цене, по площади и т.д.
Заранее спасибо

Антон
вт, 2015-07-21 18:52

Смотрите в сторону модуля views, добавьте там фильтры в представлении по нужным полям и поставьте галочку "Раскрыть этот фильтр для посетителей и позволить его изменять.". И получится как вы хотите, останется только оформить.

Faraday
ср, 2015-07-22 23:26

Спасибо за совет)

сб, 2015-08-22 19:09

Всем привет!
Ребят, помогите пожалуйста настроить стили для этой формы:

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

Роман
ср, 2015-09-09 12:00

Вот форма (<div id="search">
<form action="index.htm" method="get">
<input type="text" name="find_str" id="search-text" value="">
<input type="submit" id="search-submit" value="Поиск">
</form>)

Роман
ср, 2015-09-09 12:01

адаптивная форма поиска http://siteacademy.ru/index.php/css/80-expandable-mobile-search-form

Михаил
чт, 2015-12-10 11:32

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

Григорий
пт, 2016-04-15 14:46

Шикарная статья. То что искал. Как всегда нахожу нужную информацию после долгих исканий. Очень хорошо что работает без пхп. У меня есть несколько сайтов на хтмл.

пн, 2016-10-03 22:25

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

вт, 2016-11-08 01:23

Therefore, people set aside more day time online.

My weblog; eturauhastulehdus kahvi

вт, 2019-07-09 23:02

А как он будет искать то, что введено? Нужно как-то добавлять самостоятельно?

Salto
пт, 2016-12-23 12:40

Всем привет.

SvetaLek
сб, 2017-06-10 07:38
Комментировать