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

hello there and thank you for your info – I've definitely picked

up something new from right here. I did however expertise a few technical points using this

website, since I experienced to reload the web site a lot

of times previous to I could get it to load properly. I had been wondering if your

web host is OK? Not that I am complaining, but sluggish

loading instances times will very frequently affect your placement in google and could damage your quality score if advertising

and marketing with Adwords. Anyway I am adding this RSS to

my e-mail and could look out for a lot more of your respective exciting content.

Ensure that you update this again soon.

Review my page ... sex vids

вс, 2018-09-02 10:49

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

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

Fantastic website you have here but I was wanting to know if

you knew of any forums that cover the same topics discussed in this article?

I'd really love to be a part of online community where

I can get feed-back from other knowledgeable people that share the same interest.

If you have any recommendations, please let me know.

Cheers!

Review my website; porn

чт, 2018-08-30 11:33

Thank you a bunch for sharing this with all of us you really recognise what you are talking approximately!

Bookmarked. Kindly additionally consult with my web site =).

We will have a hyperlink trade agreement among us

my web-site - hot vids

вс, 2018-09-02 01:29

Great article! That is the kind of information that should be shared across the web.

Disgrace on Google for not positioning this post upper!

Come on over and visit my web site . Thank you =)

Also visit my web blog :: streaming clips

вс, 2018-09-02 10:34

excellent points altogether, you just received a

new reader. What could you suggest about your post that you simply made a few days in the past?

Any positive?

Feel free to visit my blog ... quality movies

пн, 2018-09-03 22:10

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

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

Hey there! I'm at work browsing your blog from my new apple iphone!

Just wanted to say I love reading through your blog and look forward to

all your posts! Carry on the excellent work!

Look at my page; http://www.levitrafreetrial.com/

вс, 2018-11-11 08:45

I have read so many articles or reviews concerning the blogger lovers except

this piece of writing is actually a good article, keep it up.

Stop by my website; adult films

вт, 2018-09-04 03:52

Sweet blog! I found it while browsing on Yahoo News.

Do you have any tips on how to get listed in Yahoo News?

I've been trying for a while but I never seem to get there!

Cheers

My weblog: adult movies

вт, 2018-09-04 04:33

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

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

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

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

I used to be recommended this web site through my cousin. I am now not positive whether

this submit is written by him as nobody else recognise such detailed approximately my problem.

You're wonderful! Thanks!

Have a look at my web-site - xxx vids

пн, 2018-09-03 23:55

You really make it appear so easy along with your presentation however

I in finding this matter to be actually one thing that I

think I would by no means understand. It seems too complicated and extremely vast for me.

I am taking a look ahead to your subsequent submit, I'll try to get the cling of it!

My blog :: streaming films

вт, 2018-09-04 04:54

Ребят я ничего не понимаю!!!Когда я копирую код элемента в 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

Terrific post but I was wondering if you could write a litte more

on this topic? I'd be very grateful if you could elaborate a little bit

further. Appreciate it!

Also visit my website :: sex clips

вс, 2018-09-02 05:00

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

чт, 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

My brother recommended I would possibly like this blog. He used to be totally right.

This put up truly made my day. You can not believe just how a lot time I had spent for this info!

Thanks!

my web-site; adult vids

сб, 2018-09-01 19:22

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

This post is really a pleasant one it assists new net viewers, who are

wishing in favor of blogging.

my website adult movies

вс, 2018-09-02 01:10

Click the Ad - Block Plus button on the browser and select Enabled with this site.

Outlook email login icloud email login

twc email login At least one outside researcher has said the influence

of Russian disinformation on Facebook is significantly greater than the company has so far acknowledged and which it encompasses paid ads in addition to posts published on Facebook

pages controlled by Russian agents. But micro-bloggers in China tweeted Wednesday that the process has not been secure because text messages were widely believed being monitored from the Chinese authorities.

Windstream.net email login https://emaillogin.us.com/ aol email login Below,

check out five screenshots of Gmail's upcoming

change, and let us know very well what you think

in our poll below:.

пт, 2018-08-31 08:31

I don't even know how I ended up here, but I

thought this post was good. I don't know who you are but definitely you're

going to a famous blogger if you are not already ;)

Cheers!

Look at my site ... streaming tubes

сб, 2018-09-01 18:49

It's nearly impossible to find knowledgeable people about this subject,

but you sound like you know what you're talking about!

Thanks

Here is my site sex movies

вс, 2018-09-02 09:49

It's genuinely very complex in this busy life to listen news on Television, therefore I

just use the web for that reason, and obtain the newest news.

Feel free to visit my weblog ... hot movies

вс, 2018-09-02 10:51

Peculiar article, totally what I was looking for.

Also visit my blog ... porn films

пн, 2018-09-03 23:49

I think this is one of the most vital info for me.

And i'm happy reading your article. But wanna observation on some common things, The web site style is ideal, the articles is in reality great :

D. Good process, cheers

My web-site streaming tubes

вс, 2018-09-02 09:56

whoah this weblog is magnificent i like reading your posts.

Stay up the good work! You understand, many individuals are searching around for this information, you can aid them greatly.

My site: quality films

вс, 2018-09-02 17:51

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

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

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

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

Today, I went to the beachfront with my children. I found a sea shell and gave it to my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She placed

the shell to her ear and screamed. There was

a hermit crab inside and it pinched her ear. She never wants

to go back! LoL I know this is entirely off topic but I had to tell

someone!

Also visit my site; sex films

вс, 2018-09-02 11:16

Excellent post. I was checking constantly this

blog and I am impressed! Extremely useful info specially the last part

:) I care for such information a lot. I was seeking this certain info for a long

time. Thank you and best of luck.

My blog :: sex tubes

вт, 2018-09-04 02:58

bookmarked!!, I like your site!

My weblog hot tube

вт, 2018-09-04 03:58

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

сб, 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

Keep on writing, great job!

Here is my web blog :: xxx films

пн, 2018-09-03 22:32

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

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

Страницы

Комментировать