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

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

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

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

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

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

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.

Комментарии (56)

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

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

  3. А если задать

    input type="search"

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

    input type="search"

    , вместо

    input type="text"

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

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

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

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

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

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

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

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

      Кто мешает поменять?

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

      Комментом выше написано про это.

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

      Слишком редко мне встречается необходимость растягивать форму. Все зависит от конкретного случая.

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

      Для простоты и кроссбраузерности. На CSS3 что, свет клином сошелся?

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

      А в чем проблема?

      • 1. А зачем заведомо не правильны пример показывать людям? Имей ответственность, если учишь людей.

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

        4. На css3 проще, чем с картинкой, border-radius да box-shadow. Gracefull degradation никто не отменял.

        5. Флоты не для таких задачь были придумыны — они отрисовываются сложней, требуют клирфиксов и оверфловов…

        • 1. А зачем заведомо не правильны пример показывать людям? Имей ответственность, если учишь людей.

          Я его не считаю неправильным, иначе бы не стал писать такой код.

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

          Не претендую на лучший вариант. И резиновый не лучше.

          5. Флоты не для таких задачь были придумыны — они отрисовываются сложней, требуют клирфиксов и оверфловов…

          Ширина и высота у формы служат клирфиксом, так что ничего тут не требуется, и не надо придираться.

    • Согласен, не использовать input type=”search”, потому что в хроме и сафари появляется крестик глупо, ведь уже давно написано

      input[type=»search»] {
      -webkit-appearance: textfield;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      }
      input[type=»search»]::-webkit-search-decoration {
      -webkit-appearance: none;
      }

      используйте более современный сброс стилей

    • Рановато еще совать в сайты CSS3 и HTML5.
      На отдельных элементах в качестве оформления можно использовать.
      Но панацею из этого делать еще рано.

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

      Это не поймет половина браузеров ;-)

  5. вместо 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. Да, кстати, можно вполне обойтись и без хака под лисицу, правда кода будет больше :)

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

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

      Можно пример?

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

      Кнопку я по привычке использую. Иконка лупы ассоциируется с кнопкой.

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

        Код завтра выложу, сегодня бежать надо.

      • Тут пример инпутов (логин, парот), с ровным выравниванием текста, без хака под фф.

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

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

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

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

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

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

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

  10. Чай-ник такой
    3 года 1 месяц назад

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

  11. А нету ли инструкция для вордпресс чтоб установить этот код?

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