Форма поиска html


Степан, огромное спасибо за труд! Очень понравилась “Красивая форма поиска”. Но при выполнении всех действий – кнопка не работает. То есть, просто не нажимается, хоть и выводится в шапке! В чем может быть дело?
Вставляю в “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

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

Это относится как к контейнеру <div> с классом seach, так и к элементам самой формы — тегам <input>, формирующим поле ввода и кнопку поиска.

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

Если сейчас открыть страницу сайта, то в этом состоянии можно увидеть, что форма Яндекс.Поиска разместилась в предназначенном ей месте.

Однако, вид самой формы пока не соответствует существующему дизайну. Что требует назначения определенных свойств CSS для имеющихся в ней элементов <input>.

Ниже приведены дополнения CSS-кода, которые приводят форму Яндекс.Поиска к внешнему виду, соответствующему особенностям дизайна создаваемого сайта (внесенные дополнения выделены светлым фоном).


Ранее при оформлении элементов сайдбара подробно рассматривалось назначение стилей CSS для формирования внешнего вида форм. Поэтому не будем здесь повторяться, а только отметим, что все свойства для элементов <input> поля ввода (поз.27÷41) и кнопки «Найти» (поз.42÷57) применены к имеющемуся в исходном коде от Яндекс.Поиск элементу <div> с классом ya-site-form.

А для визуализации состояния кнопки к этим же элементам назначены псевдо-классы: :hover (поз.58÷61) — для активного состояния (находящаяся под курсором мыши) и :active (поз.62÷65) — для нажатого состояния (удерживаемая кнопкой мыши). Сделано это аналогично тому, как ранее мы оживляли кнопки и делали их интерактивными на этапе верстки сайта.

Проверим теперь результат выполненных действий, обновив страницу сайта.

Как видно после стилизации данный элемент поиска приняла типовой для этого сайта вид.

А теперь раз комментируем код JavaScript и посмотрим как он будет выглядеть после полной загрузки страницы и выполнения скрипта, обеспечивающего взаимодействие с сервисом Яндекс.Поиск.

Видно, что в этом состоянии исказились размеры и расположение элементов, размер шрифта, а также цвет кнопки.

Как отмечалось ранее это связано с тем, что выполнение скрипта приводит к появлению в форме дополнительных элементов со своими стилями CSS. Что, соответственно, и приводит к таким изменениям.

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

rabota-vinete.ru


Что мы теряем при верстке данной формы с помощью HTML5 и CSS3

  1. IE9 и ниже — не увидим текст по умолчанию (атрибут placeholder).
  2. IE8 и ниже — не увидим закругленных углов и внутренних теней.
  3. IE7 — для него приходится указать другую ширину формы, т.к. он не поддерживает свойство box-sizing.
  4. IE6 — а его вообще в расчет не берем =)

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

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

Выглядит он вот так:

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

  1. Атрибут type="text" заменен type="search".
  2. Инлайновый скрипт заменен на placeholder="поиск".

CSS-код


Вот все необходимые стили с комментариями:

И стили для IE ниже 9-й версии:

P.S. Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.

dimox.name

CSS эксперименты с полем и кнопкой поиска

От автора: В этой обучающей статье я хотела бы рассказать о том, как можно украсить обычную форму поиска. Мы не будем делать чего-то необычного. Наоборот, мы рассмотрим четыре различных подхода к тому, как можно улучшить поле поиска с помощью CSS переходов.

У вас уже есть стандартный блок с поиском

Для начала в вашем HTML-документе вам необходимо создать тег input с типом search. Если вы посмотрите на нижеприведенный код, то заметите четыре разных элемента: блок div с классом .box, блок div с классом .container-1, элемент span с классом .icon и сам элемент input с типом search.

Все четыре варианта будут иметь поле поиска и иконку в виде лупы. Каждый из четырех примеров будет помещен в контейнер, чтобы мы могли независимо управлять полем поиска. И наконец, блок div будет отвечать за центрирование контейнера.

Форма поиска html


Добавление шрифтов Font Awesome

Шрифты Font Awesome являются библиотекой иконок. Узнать подробнее об этом проекте вы можете на собственном сайте проекта Font Awesome.

Пример кода сверху – это один из примеров того, как вы можете вставить иконку внутрь разметки. Однако, для того чтобы иконка отображалась, вам необходимо прописать ссылку на библиотеку Font Awesome, как это показано в следующем примере. Вставьте данную ссылку внутрь элемента head.

Базовое оформление

Мы собираемся добавить некоторые стили в отдельной таблице стилей (которую вам также необходимо подключить внутри элемента head).

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

Форма поиска html

Украшение блока с поиском

Эта обучающая статья полностью посвящена тому, как научиться украшать блоки с поиском. В первом примере я буду объяснять все очень подробно; я хочу быть уверена в том, что вы точно понимаете, что и как происходит. В последующих трех примерах я просто покажу, как добиться различных переходов.

#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%.


Форма поиска html

Добавление эффектов при наведении

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

Из вышеприведенного отрывка кода видно, что мы добавили два дополнительных состояния – focus и active. Таким образом, эффект не будет исчезать, когда курсор мыши будет уводиться с элемента. Что еще важнее – эффект будет сохранен при взаимодействии с элементом.

Форма поиска html

Создание перехода

Для реализации перехода нам нужно добавить несколько строк кода. Вернемся обратно к правилу, в котором мы назначили стили для элемента 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.

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

Форма поиска html

Добавление эффектов при наведении

Последнее, что нам осталось сделать, – это определить, как будет выглядеть блок с поиском при наведении. Первое правило в нижеприведенном отрывке кода гарантирует нам отсутствие навязанного браузером свечения и сохранение размеров поля поиска в момент ввода запроса. Второе правило просто растягивает элемент input при наведении на всю ширину.

Последний момент, который происходит с блоком поиска, – это изменение цвета иконки. Это просто небольшой штрих, чтобы показать пользователю, что блок с поиском является активным и готов к взаимодействию, в отличие от неактивного состояния. Данное изменение не связано с переходом.

Форма поиска html

#3. Увеличение размера иконки при наведении

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

HTML

И снова HTML-разметка для иконки и блока с поиском будет такой же, как и в предыдущих двух примерах. Исключением, конечно же, является элемент с классом .container-3.

CSS

CSS стили для данного примера не представляют собой ничего особенного. По большей части начало очень похоже на первые примеры, в которых состояние по умолчанию оформляется точно так же. Ниже приведен код для контейнера и элемента input. Обратите внимание, что на этот раз для элемента input не применяется переход.

И опять следом идут правила для атрибута placeholder:

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

Форма поиска html

Добавление эффектов при наведении

В вышеприведенном коде происходит несколько вещей. Во-первых, мы изменяем цвет иконки при наведении и передвигаем ее немного выше, чтобы сохранить вертикальное центрирование при увеличении размера. Во-вторых, мы добавляем трансформацию для иконки при наведении. Таким образом, она фактически будет в 1.5 раза больше исходного размера. Поскольку до этого мы определили переход для всех свойств, иконка будет увеличиваться в размере при наведении.

И снова, для получения более подробной информации о трансформациях посмотрите статью CSS3 переходы и трансформации с нуля.

Форма поиска html

#4. Кнопка при наведении

В отличие от предыдущих трех примеров, этот пример будет более сложным. При наведении, сверху будет появляться кнопка, позволяющая продолжить поиск – что-то наподобие кнопок Отправить или Продолжить. Внутри кнопки будет расположена иконка в виде лупы.

HTML

В этом примере HTML-разметка немного отличается. Элемент input, конечно, также находится здесь, но иконка теперь находится внутри кнопки, которая расположена после элемента input. Важно, чтобы кнопка располагалась после элемента input, т.к. от этого зависит реализация эффекта при наведении.

Форма поиска html

CSS

CSS в этом примере другой, поэтому будьте внимательны! Ниже приводится код для оформления контейнера. Для начала, у нас отсутствует свойство position: relative; оно уже не играет важной роли, поскольку иконка не опирается на данное свойство, чтобы оказаться поверх элемента input. Однако у нас появилось свойство overflow:hidden. Это свойство препятствует появлению кнопки, когда курсор мыши не наведен на блок с поиском. Формально, появляющаяся кнопка уже находится справа от элемента input, но благодаря свойству overflow:hidden, ее не видно, т.к. она выходит за границы контейнера (контейнер и элемент input имеют одинаковую ширину).

В следующем отрывке кода к элементу input не применяется переход, т.к. на этот раз он является элементом, для которого создается эффект.

Далее идет код, изменяющий цвет текста атрибута placeholder.

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

Форма поиска html

Добавление эффектов при наведении

Для того чтобы кнопка появилась, нужно поместить ее поверх элемента input. Это достигается за счет отрицательного значения у свойства margin. До этого мы установили значение 0 для свойства opacity, а теперь нужно вернуть его на 1, чтобы кнопка была тоже видимой.

Форма поиска html

Последнее правило только меняет фоновый цвет кнопки при наведении. Хорошо будет показать пользователю, что кнопка является активной, и он может нажать на нее, чтобы осуществить поиск; нет никакой пользы от кнопки, которая остается неактивной.

Форма поиска html

Заключение

Итак, вот и подошли к концу наши CSS эксперименты! Мы взяли стандартную форму поиска и применили небольшой набор эффектов, чтобы изменить ее поведение. Как еще, по вашему мнению, можно изменить поле поиска? Для каких еще параметров вы бы хотели применить переходы и трансформации? Расскажите нам об этом в комментариях!

Автор: Paula Borowska

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Форма поиска html

webformyself.com

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">.

searchbox-structure

Чем отличается <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

Приветствую всех читателей и подписчиков 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

Здравствуйте уважаемые читатели блога mainview.ru. Сегодня небольшой урок для тех, кто осваивает CSS и HTML. Сегодня посмотрим, как можно создать красивую форму для поиска при помощи CSS, используя минимум кода. Создадим три формы для поиска в разной цветовой схеме, чтобы продемонстрировать, как такая форма будет выглядеть в разных цветовых решениях.

Итак, мы создадим три стиля : темно-серый, светло-серыйи нейтрально серый, как на картинке ниже.

Форма поиска html

 

HTML

Каждая из форм поиска будет иметь текстовое полеи кнопку, нажав которую, мы можем представить запрос для поиска на сервер.

Ниже показано, как мы создаем три формы и что мы делаем. По сути, мы определяем три совершенно одинаковые структуры, различающиеся только назначенными классами. Разные классы отвечают за разное оформление.

<section class="container">    <h2>Красивая форма поиска - Демонстрация</h2>    <div class="lighter">  	<form>  		<span><input type="text" class="search rounded" placeholder="Искать..."></span>  		<span><input type="text" class="search square"><input type="button" value="Искать"></span>  	</form>  </div>    <div class="dark">  	<form>  		<span><input type="text" class="search rounded" placeholder="Искать..."></span>  		<span><input type="text" class="search square"><input type="button" value="Искать"></span>  	</form>  </div>    <div class="light">  	<form>  		<span><input type="text" class="search rounded" placeholder="Искать..."></span>  		<span><input type="text" class="search square"><input type="button" value="Искать"></span>  	</form>  </div>    </section>    

 

Как видите, в каждом цветовом решении мы к тому же определили ещё и два способа оформления текстового поля, для ввода запроса. Сначала мо создали поле с округлыми краями, а затем обычное прямоугольное поле. Какое вам больше нравится, то и можете использовать при верстке. Также можете изменять радиус округления, получая немного другой эффект.

Базовым для всех полей ввода текста является класс search.

Стилизация форм

Сначала мы создадим общий стиль, который повторяется на всех вышеперечисленных формах.

form{  	width:500px;  	margin:0 auto;  }  .search {   	padding:6px 15px 6px 30px;  	margin:3px;   	background: url('search.png') no-repeat 8px 6px;   }  

Для начала мы центрируем саму форму по центру страницы. Затем мы добавляем небольшое изображение со значком поиска в качестве фонового рисунка для поля. Чтобы текст в поле не накладывался на сам значок, просто зададим параметры отступа, располагая текст так, как нам надо.

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

.rounded {   	border-radius:15px;   	-moz-border-radius:15px;   	-webkit-border-radius:15px;   }  

Далее зададим остальные параметры для полей.

input[type=text]{  	color:#bcbcbc;  }    input[type=button], input[type=button]:hover {  	position:relative;   	left:-6px;  	border:1px solid #adc5cf;  	background: #e4f1f9; /* Old browsers */  	background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */  	background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Chrome10+,Safari5.1+ */  	background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */  	background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */  	background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */  	color:#7da2aa;  	cursor: pointer;  }    

Устанавливаем основные дивы, которые содержат формы поиска.

.lighter, .light, .dark {  	width:95%;  	height:50px;  	padding:40px 25px;  }  

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

 

Форма поиска в темно — сером цвете

.dark{  	background: url('dark_grey.jpg');  }  .dark input[type=text]{  	border:1px solid #2a2e31;  	background-color:#2d3035;  	color:#505358;  }    

 

Форма поиска в светло — сером цвете

.light{  	background: url('light_grey.jpg');  }  .light input[type=text]{  	border:1px solid #acb1b7;  	background-color:#fcfcfc;  }    

 

Форма поиска в нейтрально — сером цвете

.lighter{  	background: url('lighter_grey.jpg');  }  .lighter input[type=text]{  	border:1px solid #d0d0d0;  	background-color:#fcfcfc;  }    

 

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

mainview.ru

Как работает форма поиска на сайте

Самый простой 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="&#128269;">  </form>

Кликабельная картинка

<style>  .form-search { /* форма с boxtuffs.com */   position: relative;   display: inline-block;   border: 1px solid #747474;   border-radius: 3px;   box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;   background-image: linear-gradient(#BCBCBC, #EBEBEB);  }  .form-search:before { /* рамка вокруг формы */   position: absolute;   content: "";   top: -5px;   right: -5px;   bottom: -5px;   left: -5px;   z-index: -1;   border-radius: 5px;   background: 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


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.