Блог для начинающих веб разработчиков. 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

My programmer is trying to convince me to move to .net from PHP.

I have always disliked the idea because of the costs.

But he's tryiong none the less. I've been using Movable-type

on a variety of websites for about a year and am anxious

about switching to another platform. I have heard great things about blogengine.net.

Is there a way I can transfer all my wordpress content into

it? Any kind of help would be really appreciated!

My web site: hosting

пт, 2018-01-12 13:29

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

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

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

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

I truly love your website.. Very nice colors & theme.

Did you build this web site yourself? Please reply back as I'm planning

to create my own personal site and would like to know where you got this from or exactly

what the theme is called. Appreciate it!

Here is my webpage; vuelos baratos quito buenos aires

пт, 2018-01-12 20:52

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

Екатерина
чт, 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

Greetings from Florida! I'm bored at work so I decided to

check out your website on my iphone during lunch break.

I enjoy the information you provide here and can't wait to

take a look when I get home. I'm amazed at how fast your blog loaded on my mobile ..

I'm not even using WIFI, just 3G .. Anyhow, superb blog!

Also visit my web blog :: hosting

пн, 2018-01-22 08:16

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

пн, 2016-10-03 22:25

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

вт, 2016-11-08 01:23

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

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

Всем привет.

SvetaLek
сб, 2017-06-10 07:38

Во чувак гонит. Маладца!!!!!!

---
Извините за то, что вмешиваюсь… У меня похожая ситуация. Можно обсудить. Пишите здесь или в PM. скачать fifa 15 pc repack через торрент, fifa 15 upl скачать торрент и fifa 17 ultimate team скачать на пк без торрента fifa 15 скачать торрент pc полная версия

чт, 2018-01-25 15:54
Комментировать