Приветствую всех читателей и подписчиков сайт. Сегодня я расскажу о том, Как сверстать стильную HTML форму поиска для сайта.
На большинстве сайтов и блогов с большим количеством разнообразной информации используются такие формы. Они позволяют посетителям найти нужную статью по ключевым словам, думаю, все их видели.
С точки зрения браузера – это простые HTML формы, с двумя элементами: текстовое поле и кнопка, которая отправляет запрос. Иногда кнопки может и не быть, тогда форма отправляется нажатием клавиши enter.
В качестве примера я взял одну из работ с сайта premiumpixels.com. Вот ссылка на сам пост. Этот бесплатный psd файл с оформлением шести видов форм выглядит, как показано на картинке ниже. Вы можете скачать и сам PSD с того сайта, так как он распространяется бесплатно.
Мы ограничимся созданием светлой и тёмной версии, так как третья – синего цвета очень похожа на светлую.
Что у нас получится в итоге, смотрите ниже:
Итак, как я уже сказал, HTML код представляет собой форму с двумя элементами input. Для удобства оформления, каждый из них я обернул в блок div.
Для всех видов оформления, этот код будет один и тот же.
Кто работал с 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 код.
/* Скопируйте код ниже в ваш js файл. (JavaScript). */ $(document).ready(function(e) { $("input").placeholder(); $("#search-block-form .form-item input").focus(function(){ $("#search-block-form").addClass("focus-active"); }) .blur(function(){ $("#search-block-form").removeClass("focus-active"); }); }); /* Конец */
Казалось бы, зачем здесь нужен JavaScript? На самом деле он добавляет несколько полезных для юзабилити вещей.
Во-первых, свойство placeholder пришло вместе с HTML5, и его поддержка в старых браузерах оставляет желать лучшего. Но есть простое решение в виде jQuery плагина jQuery-Placeholder , который обеспечит поддержку этого свойства у всех браузеров (включая даже IE6!).
Для этого подключаем сам файл и включаем эту функцию:
$("input").placeholder();
Если уж мы подключили jQuery, то можно сделать ещё что-нибуть. Например, пусть при получении фокуса формой, она как-то изменяется.
Для этого мы создали специальный класс focus-active. При добавлении этого класса к форме она меняет цвет фона на белый, а цвет рамки становится немного темнее. Форма станет как бы реагировать на действия пользователя.
Focus-active{ border-color:#aaa !important; background:#fff !important; }
Класс.placeholder оформляет текст из атрибута placeholder в старых браузерах. Этот класс возможно использовать только если мы используем тот самый jQuery плагин.
Placeholder{color:#cbcbcb !important;}
Вот и всё. Мы создали форму поиска, которую несложно интегрировать в большинство сайтов.
Другие версии не сильно отличаются, смотрите исходный код демо-страниц, там есть необходимые комментарии.
На сегодня всё. Пишите в комментариях, о чём бы вы хотели прочесть в новых постах блога, а так же подписывайтесь на RSS и получайте информацию об обновлении сайт первыми!
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так:
Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста и нужно учесть, что его оформление будет меняться при получении фокуса, т.е. когда мы ставим курсор в это поле. Выглядеть это будет так:
А кнопка отправки формы накладывается поверх поля ввода.
Для бывалых верстальщиков эта информация вряд ли будет полезной, а вот начинающим может пригодиться.
Готовый сверстанный пример можно .
HTML-код формы поискаВыглядит он следующим образом:
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 ExplorerInternet Explorer как-то неожиданно для меня преподнес очередной сюрприз. Причем столкнулся я с ним совсем недавно. Суть в том, что, если у кнопки отправки убрать фон, то в IE она становится некликабельной, т.е. как будто прячется под поле ввода. И хоть добавляй к ней позиционирование (position), хоть повышай индекс слоя (z-index) — ни в какую не реагирует. Но стоит кнопке задать какую-нибудь фоновую картинку, даже несуществующую, проблема устраняется.
Данный баг наблюдается только в IE8 и IE9.
Каждый веб ресурс имеет свой поиск по блогу/caйту. Для чего нужно окно для поиска? Если на вашем блоге много контента, то стоит задуматься как посетители будут находить нужную информацию.
Для навигации по сайту существуют меню, карта сайта, рубрики, категории, но этого мало. Пришел допустим на блог посетитель и задержался у вас, не разобрался например в меню, в перелинковке, не нашел полностью ответ на свой запрос, тогда он смело может ввести в поиск слово или фразу, и откроются все статьи по заданному запросу.
Путать с общим поиском не нужно, поиск работает только с вашим веб ресурсом и помогает посетителям находить нужные материалы на ваших страницах и в ваших публикациях.
На платформе Blogger (Blogspot) по умолчанию встроен гаджет «Окно поиска» . Установка: Админ панель > Дизайн > Добавить гаджет. Из списка стандартных гаджетов выбираем «Окно поиска ». В настройке гаджета изменяем название Заголовка на свой текст.
Вставить поиск от поисковых систем . Поиск по сайту от поисковиков считается самым эффективным. Во-первых поисковики специализируются на поиске, во вторых: используют подсказки, учитывают морфологию языка, исправляют ошибки в запросе, учитывают статистику.
Пользовательский поиск от Google . Заходим на сайт http://www.google.ru/cse/ регистрируемся, получаем код, добавляем в блог как обычный гаджет.
Поиск по сайту через Яндекс устанавливается аналогично поиску от Google. Заходим на http://site.yandex.ru/ проходим регистрацию, получаем код. Бытует мнение, что при наличии поиска от Яндекса сайты индексируются быстрее.
Можно добавить свою форму поиска по блогу. Заходим в административную панель Blogger > Дизайн > Добавить гаджет > Html/Javascript. Добавляем в окно стиль СSS.
}
#searchbox {
width: 240px;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6A6F75;
width: 160px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#searchbox input:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
Поле поиска css
#searchbox { background: #d8d8d8; border: 4px solid #e8e8e8; padding: 20px 10px; width: 250px;}input:focus::-webkit-input-placeholder { color: transparent;}input:focus:-moz-placeholder { color: transparent;}input:focus::-moz-placeholder { color: transparent;}#searchbox input { outline: none;}#searchbox input { background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff; border-width: 1px; border-style: solid; border-color: #fff; font: bold 12px Arial,Helvetica,Sans-serif; color: #bebebe; width: 55%; padding: 8px 15px 8px 30px;}#button-submit { background: #6A6F75; border-width: 0px; padding: 9px 0px; width: 23%; cursor: pointer; font: bold 12px Arial, Helvetica; color: #fff; text-shadow: 0 1px 0 #555;}#button-submit:hover { background: #4f5356;}#button-submit:active { background: #5b5d60; outline: none;}#button-submit::-moz-focus-inner { border: 0;}
Меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.
Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал «по-старому».
В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.
Пример того, что получится в результате, можно .
Что мы теряем при верстке данной формы с помощью HTML5 и CSS3В остальных современных браузерах все замечательно. Я считаю, что вышеуказанные недостатки не критичны, поэтому для своего сайта я бы смело использовал форму, сверстанную по последним технологиям.
HTML-код формы поискаВыглядит он вот так:
По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией HTML5:
Вот все необходимые стили с комментариями:
Search { /* устанавливаем необходимую ширину формы в зависимости от дизайна ** форма без проблем растягивается */ width: 35%; /* кнопку отправки будем позиционировать абсолютно, ** поэтому необходимо это свойство */ position: relative; } .search input { /* отключаем бордюры у инпутов */ border: none; } /* стили для поля ввода */ .search .input { /* растягиваем поле ввода на всю ширину формы */ width: 100%; /* за счет верхнего (8px) и нижнего (9px) внутренних отступов ** регулируем высоту формы ** внутренний отступ справа (37px) делаем больше левого, ** т.к. там будет размещена кнопка отправки */ padding: 8px 37px 9px 15px; /* чтобы ширина поля ввода (100%) включала в себя внутренние отступы */ -moz-box-sizing: border-box; box-sizing: border-box; /* добавляем внутренние тени */ box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); /* закругляем углы */ border-radius: 20px; background: #EEE; font: 13px Tahoma, Arial, sans-serif; color: #555; outline: none; } /* меняем оформление поля ввода при фокусе */ .search .input:focus { box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4); background: #E8E8E8; color: #333; } /* оформляем кнопку отправки */ .search .submit { /* позиционируем кнопку абсолютно от правого края формы */ position: absolute; top: 0; right: 0; width: 37px; /* растягиваем кнопку на всю высоту формы */ height: 100%; cursor: pointer; background: url(https://lh4.googleusercontent.com/-b-5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go.png) 50% no-repeat; /* добавляем прозрачность кнопке отправки */ opacity: 0.5; } /* при наведении курсора меняем прозрачность кнопки отправки */ .search .submit:hover { opacity: 0.8; } /* данное свойство необходимо для того, чтобы в браузерах ** Chrome и Safari можно было стилизовать инпуты */ input { -webkit-appearance: none; }
И стили для IE ниже 9-й версии:
/* задаем отдельные стили для браузеров IE ниже 9-й версии */ *+html .search { /* для IE7 подгоняем ширину под другие браузеры и добавляем правый ** внутренний отступ, чтобы кнопка отправки встала на свое место */ width: 28%; padding: 0 52px 0 0; } .search .input { border: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; } .search .input:focus { border: 1px solid #CFCFCF; border-top: 1px solid #999; } .search .submit { filter: alpha(opacity=50); } .search .submit:hover { filter: alpha(opacity=80); }
P.S. Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.
Сегодня предлагаю вам сделать красивую форму поиска на CSS. Согласитесь, стандартное оформление форм в html не впечатляет, но сегодня мы сделаем форму-конфетку. Вот такую я нашел для этой статьи:
Покажу пошагово, от а до я, как создать такую форму. Скачать psd макеты этой и еще двух красивых форм можно здесь, чтобы вырезать потом нужные картинки.
https://ideasplayer.com/2011/12/free-custom-search-boxes-psd/
Для начала создадим саму форму. Она будет состоять из двух полей — обычное поле для ввода текста и кнопка-картинка, которую мы зададим позднее.
Пока все это выглядит очень печально:
Для создания формы я вырежу 2 картинки.
Первая это поле ввода и сама кнопка. Для этого отключите слои с текстом и иконкой поиска, остальное можно выделить и сохранить для web, только обязательно в формате png-24, чтобы сохранилась прозрачность.
Теперь я отключаю все, кроме иконки поиска, и сохраняю ее. Вот такая картинка у меня получилась. Я назвал картинки btn.png и icon.png и поместило их в папку с html и css файлами. Теперь можно работать дальше.
Самое время приступить к написанию css кода. Начнем с правил для самого списка полей:
Search{ background: url(btn.png) no-repeat left top; width: 268px; height: 57px; list-style: none; }
Пока выглядит ужасно, не так ли? Но ничего, сейчас мы сделаем нормально.
Шаг 4 — стилизуем поле для ввода текстаИ сразу же привожу код, который я написал для стилизации поля для ввода текста.
Search input{ border: none; background: transparent; margin: 15px -20px 3px -15px; width: 170px; padding: 5px; font-size: 14px; }
Заметьте, что для обращения к полю ввода я использовал селектор атрибута. Чтобы вы понимали, о чем речь, советую почитать .
Чем этот код помог? Он привел поле ввода в такой вид:
То есть вот, в нем прямо можно печатать, все отображается красиво:
А теперь поясняю этот код:
Также дополнительно чтобы при получении фокуса у поля не появлялась предательская синяя обводка, я добавил такие стили.
Search input:focus{ border: none; outline: none; box-shadow: none; }
Псевдокласс:focus как раз отвечает за стили для полей, когда они получают фокус.
Отлично, у нас ужасной осталась только кнопка поиска, на месте которой должна быть красивая иконка.
Шаг 5 — дорабатываем форму, добавляем иконку поискаЯ напомню вам, что кусок кода, отвечающий за вывод второй кнопки выглядит так:
Соответственно, у нас пустой атрибут src , куда нужно вписать путь к изображению, которое и должно стать кнопкой. Поскольку изображение я назвал icon.png и разместил в той же директории, что и html файл, то мой код будет таким:
И вот что вышло:
Значит, дело замалым — спозиционировать иконку в правильное место. Как это сделать? Да на самом деле есть разные варианты:
Я выбрал второй способ. Итак:
Селектором.search input я обращаюсь к кнопке-картинке. Собственно, в моем случае мне подошли именно такие margin-ы, ну а свойство float: right и делает блок плавающим, прижимая его к правому краю родительского блока.
Опять же, для подгонки кнопки в нужное место я использовал отладчик. Открыл его и в нем определил, какие именно margin -ы нужны, чтобы кнопка стала в нужное место. Чтобы посмотреть в отладчике стили элемента, щелкните по нему правой кнопкой и выберите Исследовать элемент.
