Пример верстки поисковой формы для сайта

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

Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста и нужно учесть, что его оформление будет меняться при получении фокуса, т.е. когда мы ставим курсор в это поле. Выглядеть это будет так:

А кнопка отправки формы накладывается поверх поля ввода.

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

Готовый сверстанный пример можно посмотреть здесь.

HTML-код формы поиска

Выглядит он следующим образом:

<form action="" method="post" id="search">
	<input type="text" name="" value="поиск" onblur="if(this.value=='') this.value='поиск';" onfocus="if(this.value=='поиск') this.value='';" class="input" />
	<input type="submit" name="" value="" class="submit" />
</form>

CSS-код

Я приготовил вот такой спрайт, который и будет использоваться при смене фокуса у поля ввода:

Спрайт поисковой формы

Привожу весь CSS-код с комментариями:

#search {
	/* устанавливаем ширину формы,
	** равную ширине поля ввода (183 + 37 + 15)	*/
	width: 235px;
	height: 29px;
}

/* делаем инпуты плавающими, чтобы убрать лишние отступы,
** и отключаем бордюры */
#search input {
	float: left;
	border: none;
}

/* стили для поля ввода */
#search .input {
	width: 183px;
	height: 28px;
	/* внутренний отступ справа (37px) делаем больше левого,
	** т.к. там будет размещена кнопка отправки	*/
	padding: 0 37px 1px 15px;
	background: #EEE url(https://lh4.googleusercontent.com/-EllJnywnmlY/UAaKJYSYYMI/AAAAAAAABUU/IaRo-yUcRmc/s235/search.png) no-repeat;
	color: #555;
	font: 13px/28px Tahoma, Arial, sans-serif;
	outline: none;
}

/* приходится использовать хак для FireFox
** для вертикального выравнивания текста,
** т.к. у него свои особые представления об этом */
@-moz-document url-prefix() {
	#search .input {
		height: 27px;
		padding-bottom: 2px;
	}
}

/* меняем оформление поля ввода при фокусе */
#search .input:focus {
	background-color: #E8E8E8;
	background-position: 0 -29px;
	color: #333;
}

/* оформляем кнопку отправки */
#search .submit {
	width: 37px;
	height: 29px;
	cursor: pointer;

	/* смещаем кнопку влево на собственную ширину,
	** чтобы она оказалась над полем ввода */
	margin-left: -37px;

	/* по-нормальному, здесь достаточно было бы указать background: none;
	** но приходится указывать фон из-за бага в IE */
	background: url(dontexist.png);
}

Про баг в Internet Explorer

Internet Explorer как-то неожиданно для меня преподнес очередной сюрприз. Причем столкнулся я с ним совсем недавно. Суть в том, что, если у кнопки отправки убрать фон, то в IE она становится некликабельной, т.е. как будто прячется под поле ввода. И хоть добавляй к ней позиционирование (position), хоть повышай индекс слоя (z-index) — ни в какую не реагирует. Но стоит кнопке задать какую-нибудь фоновую картинку, даже несуществующую, проблема устраняется.

Данный баг наблюдается только в IE8 и IE9.

Комментарии (55)
  1. 1

    Как-то не люблю я все эти картинки в бэкграундах. Лучше уж всё в CSS сделать, разве что иконку на кнопку поиска. Проблема тут и в фиксации размеров. Да таблицы CSS как-то глюкавят в разных браузерах и с резиновостью у меня лично ну никак, приходится всё ещё пользоваться таблицами.

  2. 2
    Александр

    Еще бы написать про алгоритм поиска для сайта с подсказками, а то до сих пор не могу найти нормального решения

  3. 4
    nicroforus

    А если задать

    input type="search"

    , ничего не изменится? (Сейчас проверять негде.) Я недавно столкнулся с тем, что Вебкит-браузеры по-разному отображают текстовые поля, если задан

    input type="search"

    , вместо

    input type="text"

    . При это у ФФ и Оперы такой проблемы нет.

  4. 6

    Детский сайт какой то, статья видимо запоздала на года 2-3:

    1. #search? А если 2 строки поиска на странице?

    2. input type=»search» — уже пора под это постраиваться, HTML5 как бы.

    3. Фиксированная ширина и высота? Очень не практично.

    4. Cтатичная картинка на фоне, причем в 2ух стейтах? а как же CSS3?

    5. Float? за что? :)

  5. 24

    вместо onblur и onfocus я сейчас всегда делаю так:

    (function($) {
     $(function() {
     $('input.textfield').each(function(){
     var text = $(this).val();
    				$(this)
    					.focusin(function(){
    						$(this).addClass('focus');
    						if ($(this).val() == text) $(this).val('');
    					})
    					.focusout(function(){
    						if ($(this).val() == '') $(this).val(text);
    						$(this).removeClass('focus');
    					});
     });
     })
    })(jQuery)
    
  6. 39

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

    И еще вопрос — а почему нельзя вообще отказаться от кнопки???

  7. 46

    Почерпнул для себя информацию, как сделать кнопку как бы внутри, над окошком поиска)

  8. 47

    А почему не использовать просто background:transparent; так не надо добавлять фон и работает нормально

  9. 53
    Александр

    Почему при сохранении подложки формы поиска к себе на пк и замене url
    c https://lh4.googleusercontent.com/-EllJnywnmlY/UAaKJYSYYMI/AAAAAAAABUU/IaRo-yUcRmc/s235/search.png
    на img/search.png

    перестает подгружаться подложка. В чем ошибка, добрые люди, подскажите?

  10. 55
    Чай-ник такой

    так че в «актион» писать? хренли не дописать статью полностью для чайников. с джиквери кодом и всей прочей — чтоб работало

Ваш комментарий