Степан, огромное спасибо за труд! Очень понравилась “Красивая форма поиска”. Но при выполнении всех действий – кнопка не работает. То есть, просто не нажимается, хоть и выводится в шапке! В чем может быть дело?
Вставляю в “searchform.php” этот код:
<form class="searchform"> <input class="searchfield" type="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> <input class="searchbutton" type="button" value="Найти" /> </form>
в “Header” имеется:
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
файл “search.php” тоже есть, но я не знаю, что там нужно менять!
В CSS вставлен:
.searchform { display: inline-block; zoom: 1; *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ } "
bloggood.ru
Два варианта поисковых форм, которые позволяют сэкономить пространство на вашем сайте. При клике форма расширяется для ввода текста. Используется только CSS3.
HTML
Простая форма с html5 тегом:
<form> <input placeholder="Поиск" type="search"> </form>CSS
Сначала сделаем перезапуск стилей для webkit браузеров, которым свойственно добавлять к поисковым input тегам рамочку, иконку закрытия. Поэтому уберем все это лишнее:
input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; /* remove the search and cancel icon */ }Оформим форму поиска:
На всех свойствах останавливаться не будем, просто отметим, что ширина поискового input вначале имеет значение 55px, и будет расширться до 130px в момент фокуса :focus. Свойство transition позволяет анимировать это изменение ширины. Для свечения используется box-shadow:
input[type=search] { background: #ededed url(search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 130px; background-color: #fff; border-color: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); }
В демо 2 input поле поиска еще компактнее — отображаться будет только иконка. При клике по ней будет также происходить изменение ширины поля ввода.
#demo-b input[type=search] { width: 18px; padding-left: 10px; color: transparent; cursor: pointer; } #demo-b input[type=search]:hover { background-color: #fff; } #demo-b input[type=search]:focus { width: 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; }А текст сделали прозрачным:
#demo-b input:-moz-placeholder { color: transparent; } #demo-b input::-webkit-input-placeholder { color: transparent; }
Форма работает во всех современных браузерах Chrome, Firefox, Safari, и IE8+.
pcvector.net
Как работает форма поиска на сайте
Самый простой HTML-код
Если набрать в поле «вопрос» и щелкнуть по кнопке «Найти», то адрес страницы изменится с «http://shpargalkablog.ru/2011/06/forma-poiska-po-saitu.html» на «http://shpargalkablog.ru/2011/06/forma-poiska-po-saitu.html?text=вопрос», как это происходит при нажатии на ссылку. При загрузке страницы, скрипт проверяет наличие заданных параметров в URL и при их обнаружении формирует и отображает результаты поиска по сайту.
<form> <input type="search" name="text"> <input type="submit" value="Найти"> </form>
Но в целях увеличения скорости загрузки документа, скрипт, обрабатывающий запрос, как правило, помещают только на одну страницу сайта, на которую будет сделан переход, если её адрес прописать в атрибуте action: «http://shpargalkablog.ru/search/?text=вопрос
».
<form action="http://shpargalkablog.ru/search/"> <input type="search" name="text"> <input type="submit" value="Найти"> </form>
Для работы скрипта могут понадобиться дополнительные параметры, которые указываются в <input type="hidden">. Это поле не отображается. Теперь форма будет вызывать «http://shpargalkablog.ru/search/?searchid=808327&text=вопрос».
<form action="http://shpargalkablog.ru/search/"> <input type="hidden" name="searchid" value="808327"> <input type="search" name="text"> <input type="submit" value="Найти"> </form>
Результат работы формы открыть в новой вкладке с помощью атрибута target
<form action="http://shpargalkablog.ru/search/" target="_blank"> <input type="hidden" name="searchid" value="808327"> <input type="search" name="text"> <input type="submit" value="Найти"> </form>
Где взять скрипт поиска по сайту
Можно воспользоваться
- предложенным специальными сервисами Яндекса и Google,
- встроенным в используемую CMS (при наличии), например, на Blogger на «
https://site.ru/search?q=вопрос», где «site.ru» заменить на свой адрес блога, - разработанным самостоятельно, например, на PHP.
Самый простой вариант — перенаправить запрос Google:
<form action="http://google.com/search" target="_blank"> <input type="search" name="q"> <input type="hidden" name="as_sitesearch" value="shpargalkablog.ru"> <!-- «shpargalkablog.ru» заменить на свой адрес сайта --> <input type="submit" value="Найти"> </form>
Текст на кнопке: «Поиск», «Искать», «Найти»
Из слов-побудителей «Найти» имеет совершённый вид и подразумевает, что результат поиска будет обязательно положительным.
Значок лупы
Неактивная фоновая картинка CSS
<form action="/search/" target="_blank"> <input type="hidden" name="searchid" value="808327"> <input type="search" name="text" required placeholder="Поиск по сайту" style=" padding: 5px 2px 5px 25px; background: url('http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s25/search.png') no-repeat scroll 0 50%; "> </form>
Кликабельная кнопка-иконка
<style> .form-search { display: inline-block; border-bottom: 1px solid; } .form-search input { all: unset; } </style> <form action="/search/" target="_blank" class="form-search"> <input type="hidden" name="searchid" value="808327"> <input type="search" name="text" required placeholder="Поиск по сайту"> <input type="submit" value="🔍"> </form>
Кликабельная картинка
<style>.
d: linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B); } .form-search:focus-within { /* изменение формы при фокусе */ box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF; background: linear-gradient(#9CC2CA, #DFECEF); } .form-search input[type="search"] { /* поле поиска */ width: 60px; height: 32px; line-height: 32px; border: none; outline: none; box-shadow: none; padding: 0 0 0 6px; background: transparent; font: 13px Helvetica, Arial, sans-serif; color: #6E7074; text-shadow: 0 1px 0 #FFF; transition: all .2s ease-out; } .form-search:focus-within input[type="search"], /* изменение поля поиска при фокусе */ .form-search input[type="search"]:focus { width: 160px; color: #25464D; } .form-search input[type="image"] { /* картинка лупы */ padding: 0; vertical-align: bottom; } </style> <form class="form-search" action="/search/" target="_blank"> <input type="hidden" name="searchid" value="808327"> <input type="search" name="text" required placeholder="поиск"> <input type="image" src="http://3.bp.blogspot.com/-4w14hQHr5yQ/Tgm6u7KwUkI/AAAAAAAACAI/Hu2poBOPx3g/s1600/search.png"/> <!-- вместо кнопки submit --> </form>
shpargalkablog.ru
Приветствую всех читателей и подписчиков heavenweb.ru. Сегодня я расскажу о том, Как сверстать стильную HTML форму поиска для сайта.
На большинстве сайтов и блогов с большим количеством разнообразной информации используются такие формы. Они позволяют посетителям найти нужную статью по ключевым словам, думаю, все их видели.
С точки зрения браузера – это простые HTML формы, с двумя элементами: текстовое поле и кнопка, которая отправляет запрос. Иногда кнопки может и не быть, тогда форма отправляется нажатием клавиши enter.
В качестве примера я взял одну из работ с сайта premiumpixels.com. Вот ссылка на сам пост. Этот бесплатный psd файл с оформлением шести видов форм выглядит, как показано на картинке ниже. Вы можете скачать и сам PSD с того сайта, так как он распространяется бесплатно.
ДемоСкачать
Мы ограничимся созданием светлой и тёмной версии, так как третья – синего цвета очень похожа на светлую.
Что у нас получится в итоге, смотрите ниже:
Все внутренние элементы не будут иметь цвета фона или границ, поэтому отменяем все стандартные свойства у обоих тегов 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 первыми!
heavenweb.ru
1. Разметка HTML
<form action="" method="get"> <input name="s" placeholder="Искать здесь..." type="search"> <button type="submit">Поиск</button> </form>
Элемент <form> является контейнером для формы поиска, поле поиска создается при помощи элемента <input type="search"> или <input type="text">, а кнопка отправки данных на сервер может создаваться с помощью элемента <input type="submit"> или <button type="submit">.
Чем отличается <input type="search"> от <input type="text">? Оба этих поля создают однострочное текстовое поле для ввода текста, но type="search" добавлено в стандарт HTML5 и является семантической подсказкой для браузеров. Все браузеры, кроме Mozilla Firefox, добавляют крестик очистки в поле. Чтобы его убрать, можно поменять тип поля на type="text".
Чем отличается <input type="submit"> от <button type="submit">? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент <button> является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.
Текст в поля формы можно добавлять двумя способами:
1) <input type="text" placeholder="текст">
Цвет отображаемого текста будет серого цвета. С помощью следующих правил можно задать тексту-подсказке любой цвет, поменять начертание и фон поля. Эти селекторы нельзя совмещать в одно правило, иначе они не будут работать.
input::-webkit-input-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; } input:-moz-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; } input:-ms-input-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA; }
2) <input type="text" value="текст">
Цвет отображаемого текста будет черного цвета. Задать свой цвет можно при помощи свойства color, например:
input { color: white; }
Для отображения иконок не забудьте подключить FontAwesome.
2. Поле поиска с кнопкой-иконкой
<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button> </form>
* {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; } input { width: 100%; height: 42px; padding-left: 10px; border: 2px solid #7BA7AB; border-radius: 5px; outline: none; background: #F9F0DA; color: #9E9C9C; } button { position: absolute; top: 0; right: 0px; width: 42px; height: 42px; border: none; background: #7BA7AB; border-radius: 0 5px 5px 0; cursor: pointer; } button:before { content: "f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }
3. Поле поиска с кнопкой внутри
<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button> </form>
* {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; } input, button { border: none; outline: none; border-radius: 3px; } input { width: 100%; height: 42px; background: #F9F0DA; padding-left: 15px; } button { height: 26px; width: 26px; position: absolute; top: 8px; right: 8px; background: #F15B42; cursor: pointer; } button:before { content: "f105"; font-family: FontAwesome; color: #F9F0DA; font-size: 20px; font-weight: bold; }
4. Поле поиска в стиле «flat»
<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button> </form>
* {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; background: #A3D0C3; } input, button { border: none; outline: none; background: transparent; } input { width: 100%; height: 42px; padding-left: 15px; } button { height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: "f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }
5. Поле поиска с толстой нижней границей
<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button> </form>
* {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; background: #F9F0DA; border-bottom: 4px solid #be290e; } input, button { border: none; outline: none; background: transparent; } input { width: 100%; height: 42px; padding-left: 15px; } button { height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: "f178"; font-family: FontAwesome; font-size: 20px; color: #be290e; }
6. Поле поиска с меняющимся цветом границы
<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button> </form>
* {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; } input, button { outline: none; background: transparent; } input { width: 100%; height: 42px; padding-left: 15px; border: 3px solid #F9F0DA; } button { border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: "f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; } input:focus { border-color: #311c24 }
7. Выезжающее поле поиска
Поле поиска появляется при нажатии на кнопку с иконкой.
<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button> </form>
* {box-sizing: border-box;} form { position: relative; width: 300px; margin: 0 auto; height: 42px; } input { height: 42px; width: 0; padding: 0 42px 0 15px; border: none; border-bottom: 2px solid transparent; outline: none; background: transparent; transition: .4s cubic-bezier(0, 0.8, 0, 1); position: absolute; top: 0; right: 0; z-index: 2; } input:focus { width: 300px; z-index: 1; border-bottom: 2px solid #F9F0DA; } button { background: #683B4D; border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; } button:before { content: "f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }
8. Увеличивающееся в ширину поле поиска
<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button> </form>
* {box-sizing: border-box;} form { width: auto; float: right; margin-right: 30px; } input { width: 250px; height: 42px; padding-left: 15px; border-radius: 42px; border: 2px solid #324b4e; background: #F9F0DA; outline: none; position: relative; transition: .3s linear; } input:focus { width: 300px; } button { width: 42px; height: 42px; background: none; border: none; position: absolute; top: -2px; right: 0; } button:before{ content: "f002"; font-family: FontAwesome; color: #324b4e; }
html5book.ru
От автора: В этой обучающей статье я хотела бы рассказать о том, как можно украсить обычную форму поиска. Мы не будем делать чего-то необычного. Наоборот, мы рассмотрим четыре различных подхода к тому, как можно улучшить поле поиска с помощью CSS переходов.
У вас уже есть стандартный блок с поиском
Для начала в вашем HTML-документе вам необходимо создать тег input с типом search. Если вы посмотрите на нижеприведенный код, то заметите четыре разных элемента: блок div с классом .box, блок div с классом .container-1, элемент span с классом .icon и сам элемент input с типом search.
Все четыре варианта будут иметь поле поиска и иконку в виде лупы. Каждый из четырех примеров будет помещен в контейнер, чтобы мы могли независимо управлять полем поиска. И наконец, блок div будет отвечать за центрирование контейнера.
Добавление шрифтов Font Awesome
Шрифты Font Awesome являются библиотекой иконок. Узнать подробнее об этом проекте вы можете на собственном сайте проекта Font Awesome.
Пример кода сверху – это один из примеров того, как вы можете вставить иконку внутрь разметки. Однако, для того чтобы иконка отображалась, вам необходимо прописать ссылку на библиотеку Font Awesome, как это показано в следующем примере. Вставьте данную ссылку внутрь элемента head.
Базовое оформление
Мы собираемся добавить некоторые стили в отдельной таблице стилей (которую вам также необходимо подключить внутри элемента head).
В примере кода сверху мы добавляем немного базовых стилей для страницы. Блоки с поиском будут темно-синего цвета, поэтому фон элемента body не должен быть абсолютно белым. В рамках данной обучающей статьи мы также задали центрирование элементу с классом .box.
Украшение блока с поиском
Эта обучающая статья полностью посвящена тому, как научиться украшать блоки с поиском. В первом примере я буду объяснять все очень подробно; я хочу быть уверена в том, что вы точно понимаете, что и как происходит. В последующих трех примерах я просто покажу, как добиться различных переходов.
#1. Исчезновение фона
В первом примере мы приступим к изменению фона у тега input при наведении. Мы также добавим переход, чтобы изменение не было резким.
HTML
Вы уже видели вариант HTML-разметки. Во всех примерах она будет похожей.
CSS
Для того чтобы начать процесс оформления нам необходимо назначить CSS стили для самого блока с поиском. Давайте будем последовательно, правило за правилом, прописывать различные стили, чтобы вам точно было все понятно.
Сначала мы оформим элемент с классом .container. Вероятно самое важное свойство – это position: relative. Оно задано специально для того, чтобы иконку можно было поместить поверх элемента input, что вы и увидите далее.
Input
Теперь нам нужно назначить стили для самого элемента input. Вышеприведенные стили носят чисто эстетический характер, т.к. свойство border-radius или background-color не влияют на функционирование самого элемента input. Обязательно обратите внимание на левый отступ. Он необходим для того, чтобы обеспечить свободное пространство для иконки, т.е. иконка не будет находиться буквально поверх элемента input.
Ниже приведены четыре разных правила для указания цвета текста атрибута placeholder (в нашем случае это Поиск). К сожалению, все правила должны прописываться отдельно с указанием вендорных префиксов и не могут быть прописаны в сокращенном виде. Это немного раздражает, и вы увидите этот повторяющийся код в каждом примере!
Иконка
Наконец, мы назначаем оформление для иконки. Наиболее важный момент – это позиционирование иконки поверх элемента input благодаря свойству position: absolute. Поля (margins) помогают спозиционировать иконку в дополнение к указанному верхнему значению свойства position равному 50%.
Добавление эффектов при наведении
Следующий набор правил, который нам необходимо создать, будет определять, что будет происходить с блоком с поиском при наведении. В этом примере мы только изменим цвет фона. Для того чтобы избавиться от желтого или голубого свечения вокруг элемента input (которое иногда добавляется браузерами), назначим свойство outline: none.
Из вышеприведенного отрывка кода видно, что мы добавили два дополнительных состояния – focus и active. Таким образом, эффект не будет исчезать, когда курсор мыши будет уводиться с элемента. Что еще важнее – эффект будет сохранен при взаимодействии с элементом.
Создание перехода
Для реализации перехода нам нужно добавить несколько строк кода. Вернемся обратно к правилу, в котором мы назначили стили для элемента input – .container-1 input#search. Перед закрывающей скобкой добавьте следующий код:
Мы задаем свойство transition в сокращенном виде, но мы можем также и прописать все три параметра по отдельности. Сначала мы говорим, что переход будет влиять только на свойство background. Затем мы говорим, что переход должен длиться чуть больше полсекунды. Наконец, мы определяем функцию смягчения для перехода. Функция ease не является единственно возможной для данного примера. Мы также можем использовать, например, функции linear или ease-in. Тогда просто сам переход будет смотреться немного по-другому. Попробуйте сами поменять значения и выбрать тот эффект, который вам больше понравится.
Стили для элемента input теперь выглядят следующим образом:
Как работают CSS переходы?
Если вы ничего не знаете о CSS переходах, давайте я сделаю для вас небольшой обзор. Сначала, чтобы переход был реализован, нужно определить свойство в его исходном состоянии (по умолчанию), но не в состояниях hover, active или focus.
CSS переходы позволяют постепенно изменять эффект. И вы можете задать определенные параметры для управления эффектом (например, к какому свойству переход будет применен, какова будет длительность перехода и какого он будет типа). Вы можете назначить несколько переходов для одного элемента. Но, что еще важнее, вам следует всегда добавлять вендорные префиксы, чтобы подстроиться под различные браузеры, поскольку поддержка данного свойства еще не является повсеместной.
Для получения дополнительной информации посмотрите статью CSS3 переходы и трансформации с нуля.
#2. Растягивание элемента input при наведении
В данном примере блок с поиском будет изначально представлен только иконкой в виде лупы. Когда вы наводите курсор мыши на иконку, блок с поиском будет растягиваться, чтобы вы могли ввести ваш запрос. Большая часть кода будет похожа на код из предыдущего примера.
HTML
CSS
Оформление элемента input для данного перехода будет другим. Элемент input будет значительно меньше, чтобы иконка могла появиться сзади квадрата. Все остальные свойства, такие как цвет фона или шрифта, будут такими же, т.к. мы не хотим полностью изменять оформление блока с поиском.
Как вы могли заметить, я переопределила свойство transition, чтобы оно касалось только ширины элемента. Продолжительность я оставила прежней, т.к. она достаточно небольшая, чтобы не раздражать пользователей, но ее хватит на то, чтобы создать красивый эффект.
Ниже приведен код для изменения цвета текста атрибута placeholder.
И снова мы назначаем оформление для иконки. Оно должно быть таким же, как и в предыдущем примере.
Добавление эффектов при наведении
Последнее, что нам осталось сделать, – это определить, как будет выглядеть блок с поиском при наведении. Первое правило в нижеприведенном отрывке кода гарантирует нам отсутствие навязанного браузером свечения и сохранение размеров поля поиска в момент ввода запроса. Второе правило просто растягивает элемент input при наведении на всю ширину.
Последний момент, который происходит с блоком поиска, – это изменение цвета иконки. Это просто небольшой штрих, чтобы показать пользователю, что блок с поиском является активным и готов к взаимодействию, в отличие от неактивного состояния. Данное изменение не связано с переходом.
#3. Увеличение размера иконки при наведении
Из всех четырех примеров данный вариант является наиболее изысканным, как в плане кода, так и визуального эффекта. В данном случае иконка в виде лупы должна чуть-чуть подпрыгнуть и увеличиться в размере.
HTML
И снова HTML-разметка для иконки и блока с поиском будет такой же, как и в предыдущих двух примерах. Исключением, конечно же, является элемент с классом .container-3.
CSS
CSS стили для данного примера не представляют собой ничего особенного. По большей части начало очень похоже на первые примеры, в которых состояние по умолчанию оформляется точно так же. Ниже приведен код для контейнера и элемента input. Обратите внимание, что на этот раз для элемента input не применяется переход.
И опять следом идут правила для атрибута placeholder:
Сейчас, если мы посмотрим на результат, то иконка в данном примере будет выглядеть точно так же, как и раньше. Она такого же цвета, в такой же позиции и т.д. Однако я добавила к ней переход. Этот переход затрагивает все свойства, позволяя сократить запись, не перечисляя каждое свойство по отдельности.
Добавление эффектов при наведении
В вышеприведенном коде происходит несколько вещей. Во-первых, мы изменяем цвет иконки при наведении и передвигаем ее немного выше, чтобы сохранить вертикальное центрирование при увеличении размера. Во-вторых, мы добавляем трансформацию для иконки при наведении. Таким образом, она фактически будет в 1.5 раза больше исходного размера. Поскольку до этого мы определили переход для всех свойств, иконка будет увеличиваться в размере при наведении.
И снова, для получения более подробной информации о трансформациях посмотрите статью CSS3 переходы и трансформации с нуля.
#4. Кнопка при наведении
В отличие от предыдущих трех примеров, этот пример будет более сложным. При наведении, сверху будет появляться кнопка, позволяющая продолжить поиск – что-то наподобие кнопок Отправить или Продолжить. Внутри кнопки будет расположена иконка в виде лупы.
HTML
В этом примере HTML-разметка немного отличается. Элемент input, конечно, также находится здесь, но иконка теперь находится внутри кнопки, которая расположена после элемента input. Важно, чтобы кнопка располагалась после элемента input, т.к. от этого зависит реализация эффекта при наведении.
CSS
CSS в этом примере другой, поэтому будьте внимательны! Ниже приводится код для оформления контейнера. Для начала, у нас отсутствует свойство position: relative; оно уже не играет важной роли, поскольку иконка не опирается на данное свойство, чтобы оказаться поверх элемента input. Однако у нас появилось свойство overflow:hidden. Это свойство препятствует появлению кнопки, когда курсор мыши не наведен на блок с поиском. Формально, появляющаяся кнопка уже находится справа от элемента input, но благодаря свойству overflow:hidden, ее не видно, т.к. она выходит за границы контейнера (контейнер и элемент input имеют одинаковую ширину).
В следующем отрывке кода к элементу input не применяется переход, т.к. на этот раз он является элементом, для которого создается эффект.
Далее идет код, изменяющий цвет текста атрибута placeholder.
Далее приводится код, применяющий стили для кнопки, появляющейся при наведении. Для того чтобы заставить кнопку появляться со стороны, нужно расположить ее сразу после элемента input и сделать ее невидимой до момента наведения. Кнопка и является элементом, который изменяется (она перемещается), т.е. именно к ней и применяется переход. Чтобы сделать проще, я использовала для перехода все свойства.
Добавление эффектов при наведении
Для того чтобы кнопка появилась, нужно поместить ее поверх элемента input. Это достигается за счет отрицательного значения у свойства margin. До этого мы установили значение 0 для свойства opacity, а теперь нужно вернуть его на 1, чтобы кнопка была тоже видимой.
Последнее правило только меняет фоновый цвет кнопки при наведении. Хорошо будет показать пользователю, что кнопка является активной, и он может нажать на нее, чтобы осуществить поиск; нет никакой пользы от кнопки, которая остается неактивной.
Заключение
Итак, вот и подошли к концу наши CSS эксперименты! Мы взяли стандартную форму поиска и применили небольшой набор эффектов, чтобы изменить ее поведение. Как еще, по вашему мнению, можно изменить поле поиска? Для каких еще параметров вы бы хотели применить переходы и трансформации? Расскажите нам об этом в комментариях!
Автор: Paula Borowska
Источник: http://webdesign.tutsplus.com/
Редакция: Команда webformyself.
webformyself.com
оптимизируем форму поиска WordPress
Для начала посмотрите как работает форма поиска у меня на сайте. Иногда в своём блоге я использую этот плагин (о нём я расскажу в финале статьи) и лишь незначительные правки в скриптах.
Меня этот вариант, с выпадающем меню устраивает. Но – продолжим тему…
…может что-то отыщите себе по вкусу.
Меняем файл search php и форму поиска WordPress
Первое: если у вас есть форма поиска, но она по каким-то причинам не устраивает, то приступим к модернизации. Но, прежде всего, этот раздел статьи для тех, которые не хотят загружать свой сайт плагинами, а предпочитают способ правки скриптов.
Итак, заходим в «Консоль», открываем документ search.php и …
…увидите ваш код поисковика. Теперь, скопируйте его и куда-то сохраните, на всякий мухоморный случай. А заместо него, для начала, можете прописать вот эту форму: (картинки, /images/search.gif естественно, нужно загонять в папку images шаблона свои)
<?php $search_text = empty($_GET['s']) ? "Поиск" : get_search_query(); ?> <div id="search"> <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <input type="text" value="<?php echo $search_text; ?>" name="s" id="s" onblur="if (this.value == '') {this.value = '<?php echo $search_text; ?>';}" onfocus="if (this.value == '<?php echo $search_text; ?>') {this.value = '';}" /> <input type="image" src="<?php bloginfo('template_url'); ?>/images/search.gif" style="border:0; vertical-align: top;" /> </form> </div>
Или вот эту:
<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>"> <input type="text" name="s" id="s" value="Что будем искать" onfocus="if(this.value=='Что будем искать')this.value='';" onblur="if(this.value=='')this.value='Что будем искать';" /> <input type="image" src="<?php bloginfo('template_url'); ?>/images/search.gif" style="border:0; vertical-align: top;" /> </form>
Само собой, текст в форме поиска вы можете изменить на более вам симпатичный. А также выбранную форму (скрипт-код), при желании можете добавить в виджет.
И, если вы что-то выбрали, продолжим:
Добавим в скрипт «результаты поиска», например, такое предложение:
Найдено: «столько-то…»
Для этого открываем документ searchform.php и ищем в нём ПОХОЖИЙ на эту строчку пример.
<h2 class="pagetitle">Результаты поиска </h2>
…и просто удаляем его. А прописываем на его место этот:
<h3>Найдено: <?php /** Search Count **/ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); _e('<span class="search-terms">'); echo $key; _e('</span>'); _e('...» — '); echo $count . ' '; _e('совпадений'); wp_reset_query(); ?></h3>
…и здесь, в логике скрипта, можете русский текст «совпадений» и т.п. заменить на СВОЙ.
Теперь дам варианты стилей CSS, в которых будете менять саму картинку кнопки и формы ввода искомого.
Заходим в файл: style.css и ищем в каскадной таблице раздел строк #search.
Здесь смею доложить: картинка «поиска» эстетически должна соответствовать стилистике темы вашего сайта. И коли придёт нужда всё подправить, то – это просто.
Так же как и делали выше, скопируйте ваш код, если он у вас был, и куда-то сохраните. А вместо него пропишите этот, например, пример))
#search { border: 1px solid #ACB0B0; height: 28px; padding: 0; background: #E4E4E4; text-align: right; margin-top: 15px; } #search input { border: 0; background: none; color: #787D7D; } #s { width: 240px; padding: 4px; margin:2px 0 0 0; background: none; } #topsearch #search { margin: 15px 0 0 0; padding-right: 4px; } #topsearch #s { width: 246px; }
Теперь останется только подогнать, если не подходит стилистика формы поиска к вашему сайту. Работайте с CSS.
…форма поиска внутри блога адаптивная
Вот ещё один пример, который возможно прописать в файл search.php (работу этого адаптивного чуда)))) сейчас можно посмотреть у меня на сайте…
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> <label> <span class="screen-reader-text"></span> <input type="search" class="search-field" placeholder="Искать…" value="" name="s" title="Искать:" /> </label> <input type="submit" class="search-submit" value="Поиск" /> </form>
…не знаю… минусом, пожалуй тольче можно назвать одно, что поясняющая надпись «Искать…» не пропадает после наведения курсора, а исчезает сразу же после ввода первого символа искомой фразы… (хотя это я рассматриваю как плюс))
А вот и стили CSS:
.search-form{ margin:3px 0 0 8px; } .search-submit { max-width:180px; padding:1px; margin:2px 0 0 0; display:table-cell; } .search-field{ max-width:100%; background-color:transparent; }
mihalica.ru
Как должна выглядеть форма поиска
Сразу ответим на популярный вопрос: разместить одну кнопку или показать форму полностью? Лучше отразить поле ввода и кнопку запуска, чтобы не заставлять пользователя совершать лишние действия. Порой такие кнопки не всегда заметны.
Вроде бы всем известно, какой должна быть форма поиска, но на практике получаются не всегда удобные варианты. Подробнее остановимся на основных элементах:
-
Поле ввода. Сделайте его удобным по длине и высоте, чтобы можно было ввести поисковый запрос в 2-3 слова. Используйте крупный шрифт запроса, чтобы пользователи могли разглядеть и при необходимости поправить свой запрос.
-
Кнопка запуска. Многие владельцы сайтов про нее забывают, и пользователи не могут понять, как запустить поиск. Кнопка должна быть заметной и удобной для клика, поэтому лучше написать на ней текст «Найти» или «Искать», а не использовать мелкую и незаметную иконку лупы. В «лупу» сложно попасть курсором мышки.
- Выбор раздела поиска. Если у вас много разделов, то лучше добавить возможность выбора, например, отделить поиск по каталогу и блогу.
Пример удобной кнопки выбора категории товаров с сайта детских товаров:
Где лучше разместить форму поиска
Важно, чтобы форма была доступна со всех страниц сайта. И, как вы уже поняли из примеров выше, наиболее распространенный вариант – в шапке сайта. Пользователи привыкли искать форму именно там.
Но также обсудим другие варианты:
Главное меню. Подходит, если в меню немного ссылок и есть достаточно места для формы.
Над боковым меню. Вариант неудобен тем, что боковое меню есть не на всех страницах сайта и здесь недостаточно места для ввода запроса.
На примере сайта по продаже бытовой химии видно, что поле ввода слишком короткое:
Подвал сайта. Чаще всего пользователи не докручивают страницу до подвала, поэтому и не находят форму поиска. Можно размещать только как дополнение к форме в шапке сайта.
Пример размещения формы в подвале сайта:
Другие варианты. Здесь пользователи не ожидают увидеть форму поиска и могут ее пропустить. Также будет сложно расположить форму в одном и том же месте на всех страницах сайта.
Пример размещения формы поиска в основной части страницы на сайте по продаже электронных компонентов:
Еще раз повторимся, что лучше всего разместить форму поиска в шапке сайта, так как именно туда пользователь смотрит в первую очередь. Теперь, когда мы определились с расположением, обсудим страницу результатов поиска.
Как правильно выводить результаты поиска
Лучше всего показать результаты на отдельной странице, при этом:
-
Сохраните введенный запрос. Пользователь должен видеть, что он ввел ранее.
-
Продублируйте форму поиска на странице с результатами для повторных запросов. Возможно, пользователь передумал, а ему придется снова искать форму на сайте.
-
Указывайте количество найденных результатов. Пользователь должен сразу видеть, сколько вариантов у него есть.
-
Визуально отделяйте результаты друг от друга. Информация не должна быть в куче, поэтому добавляйте разделительные линии, отступы, выделяйте заголовки и т.д.
-
Не оставляйте страницу результатов пустой. Предложите популярные товары или список статей, возможно, они заинтересуют пользователя.
-
Используйте подсказки. Помогите потенциальному клиенту быстрее ввести запрос.
Удобно, когда пользователю подсказывают категорию и выводят подходящий товар.
Пример от интернет-магазина товаров для дома и отдыха:
-
На странице результатов сохраняйте основные элементы навигации. Не должно происходить смены адреса или внешнего вида страницы.
Такие страницы результатов только дезориентируют пользователей. Пример с сайта по продаже установок альтернативной энергии:
Какие инструменты использовать
Выделим основные способы и разберем их плюсы и минусы:
- Самописный поиск
+ Основное преимущество – создание поиска на основе всех ваших желаний и идей, который полностью интегрируется в вашу систему сайта.
– Ограничения: особенности выбранной cms, дороговизна работы специалистов и трата времени на разработку. У многих cms есть встроенные средства, что немного ускоряет процесс настройки поиска.
- Поиск по сайту с помощью сервисов Яндекс.Поиск и Google Custom Search
+ Уже готовые бесплатные продукты с кучей плюшек (морфологический анализ, готовые подсказки, исправление ошибок, учет поисковой статистики и др.). Большое количество инструкций и туториалов, поэтому у вас или ваших специалистов будет меньше вопросов, как настроить поиск по сайту.
– Ограничения: все-таки это внешний поиск, поэтому не получится указать, какие данные наиболее важны, а какие менее. Также нужно время на индексацию изменений на сайте.
- Использование других поисковых систем (Sphinx, Apache Solr, Xapian и др.).
+ Большой набор функций, которые помогут сделать поиск более удобным.
– Не каждый хостинг позволит запустить выбранную систему, а цена может быть слишком высокой. Нужны специалисты, разбирающиеся в их настройке.
Какой вариант лучше, решать только вам =) Мы же для начала рекомендуем настроить сервисы от Яндекса или Google, так как они бесплатны и наиболее распространены. Позже, если возникнет необходимость, можно перейти на другие продукты или разработать свой, уже точно зная, какие функции вам нужны.
Заключение
Придерживайтесь данных рекомендаций и поиск на сайте станет надежным инструментом в работе с клиентами. Если же вы еще не определились, нужен ли вашему сайту поиск, то пишите в комментариях, подскажем =).
Если возникли вопросы с настройкой поиска по сайту – озвучьте пожелания, поможем с реализацией.
1ps.ru