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

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

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

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

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

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

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

While governments were obliged as a way to redeem notes by a

degree of gold, their ability to print money was checked.

China, Russia and Argentina, as an illustration, have been buying a great deal

of gold price over the past few months.

One can also purchase silver bullion coins in order to invest inside precious metal.

вт, 2018-06-12 13:39

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

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

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

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

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

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

And to check those out, the tech giant has launched Inbox — an e-mail app

that work well with existing Gmail accounts to revamp how we view, organize and cope with e-mail.

Gmail sign in for email gmail login page gmail email login When you might have a contact open, click the More menu (usually represented

by three dots) and choose the Delete option. Google already has been giving its users

the option to switch to a whole new version of Gmail which allows

for larger files to become sent in a very single e-mail.

Google gmail sign in https://loginaid.org/ gmail sign in to another account

The YMCA is really a great option for families who want to workout

together inside same environment and spend less.

чт, 2018-08-09 01:51

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

вс, 2013-09-01 19:26

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

сб, 2013-12-28 16:40

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

чт, 2014-02-06 16:51

In recent years, designer aviator sunglasses have grown to be immensely popular and it's not

difficult to view why. Today, stars continue

to be hiding underneath their outsized designer sunglasses, making fashion statements and protecting their eyes in the

damaging outcomes of the Ultra Violet (UV) rays in the

sun. Jannard believed that he'd be able to make a company that could "work better and appear superior to everything else out there".

Feel free to visit my web-site: sunglasses.guru

вт, 2018-06-12 16:32

Всем 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

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

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

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

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

Всем привет.

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

Привет всем участникам!
Нашел прикольные фотки на этом сайте: http://agentorange.ru :
http://agentorange.ru/art-foto-interesnoe/893-kartiny-sozdannye-pri-pomoschi-solnechnogo-sveta.html Картины, созданные при помощи солнечного света
http://agentorange.ru/art-foto-interesnoe/2063-video-youtube-teper-mozhno-budet-smotret-s-raznyh-rakursov.html Видео YouTube теперь можно будет смотреть с разных ракурсов
http://agentorange.ru/art-foto-interesnoe/5221-poklonnica-komiksov-prevratilas-v-devushku-pauka.html

сб, 2018-06-30 11:54

free roulette spin - play roulette for free
slot roulette american roulette
https://roulettecas.com/

чт, 2018-07-12 19:18

Tarif Cialis France 3000 Mg Amoxicillin A Day Sisw Effects Cephalexin Dogs generic cialis from india Amoxicillin Improvement Noticed In Bowel Bacteria

пт, 2018-08-10 00:33
Комментировать