.
Чем отличается
Чем отличается ? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.
Текст в поля формы можно добавлять двумя способами:
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 {
color: white;
}
Для отображения иконок не забудьте подключить .
2. Поле поиска с кнопкой-иконкой
* {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. Поле поиска с кнопкой внутри
* {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»
* {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. Поле поиска с толстой нижней границей
* {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. Поле поиска с меняющимся цветом границы
* {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. Выезжающее поле поиска
Поле поиска появляется при нажатии на кнопку с иконкой.
* {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. Увеличивающееся в ширину поле поиска
* {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;
}
Октябрь 25, 2019
Запись была обновлена
Выдвигающаяся форма поиска на сайт
Стиль Flat обрел немалую популярность при дизайне сайтов. И в этом уроке мы рассмотрим еще один элемент сайта, который сделан в этом стиле. Это элемент — форма поиска. Но не простая , а форма поиска которая появляется при нажатии и «сворачивается» если ее не используют. Что касается иконки поиска, то она берется из SVG-файла и является масштабируемой при различных разрешениях экрана(как на мобильных устройствах, так и на больших мониторах).
Пример можно увидеть здесь:
Скачать
Выдвигающаяся форма поиска
Как использовать?
HTML
Сперва определимся с разметкой, которая будет на HTML странице:
1
2
3
4
5
6
7
<div
id
=
"sb-search"
class
=
"sb-search"
>
<form
>
<input
class
=
"sb-search-input"
placeholder=
"Что будет искать?"
type
=
"text"
value
=
""
name
=
"search"
id
=
"search"
>
<input
class
=
"sb-search-submit"
type
=
"submit"
value
=
""
>
<span
class
=
"sb-icon-search"
>
</
form
>
</
div
>
В форме поиска ничего необычного нет: текстовое поле для ввода, кнопка поиска и элемент
CSS
Теперь добавим стилей, чтобы форма поиска красиво смотрелась на странице.
Так как будет появляться при клике, то изначально она скрыта. Это делается с помощью свойства overflow
и его значением hidden
, в результате чего скрывается всё что находится за пределами иконки(в итоге мы видим только иконку, а текстовое поле нет):
.sb-search
{
position
:
relative
;
margin-top
:
10px
;
width
:
0%
;
min-width
:
60px
;
height
:
60px
;
float
:
right
;
overflow
:
hidden
;
-webkit-transition
:
width
0.3s;
-moz-transition
:
width
0.3s;
transition
:
width
0.3s;
-webkit-backface-visibility
:
hidden
;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.sb-search-input
{
position
:
absolute
;
top
:
0
;
right
:
0
;
border
:
none
;
outline
:
none
;
background
:
#fff
;
width
:
100%
;
height
:
60px
;
margin
:
0
;
z-index
:
10
;
padding
:
20px
65px
20px
20px
;
font-family
:
inherit
;
font-size
:
20px
;
color
:
#2c3e50
;
}
input[
type=
"search"
]
.sb-search-input
{
-webkit-appearance:
none
;
-webkit-border-radius
:
0px
;
}
Определяем цвет текста, который находится на фоне запроса(текста, который мы вводим при поиске):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.sb-search-input
:
:-webkit-input-placeholder
{
color
:
#efb480
;
}
.sb-search-input
:-moz-placeholder
{
color
:
#efb480
;
}
.sb-search-input
:
:-moz-placeholder
{
color
:
#efb480
;
}
.sb-search-input
:-ms-input-placeholder
{
color
:
#efb480
;
}
Кнопка поиска находится всегда над остальными блоками и элементами на странице, поэтому задаем ей большое значение z-index
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.sb-icon-search
{
color
:
#fff
;
background
:
#e67e22
;
z-index
:
90
;
font-size
:
22px
;
font-family
:
"icomoon"
;
speak
:
none
;
font-style
:
normal
;
font-weight
:
normal
;
font-variant
:
normal
;
text-transform
:
none
;
-webkit-font-smoothing
:
antialiased;
}
.sb-icon-search
:before
{
content
:
"\e000
"
;
}
Также не забываем подключить специальные иконки(SVG). Для того чтобы вставить иконку в кнопке поиска:
1
2
3
4
5
6
7
8
9
10
@font-face {
font-family
:
"icomoon"
;
src:
url
("../fonts/icomoon/icomoon.eot"
)
;
src:
url
("../fonts/icomoon/icomoon.eot?#iefix"
)
format("embedded-opentype"
)
,
url
("../fonts/icomoon/icomoon.woff"
)
format("woff"
)
,
url
("../fonts/icomoon/icomoon.ttf"
)
format("truetype"
script
>
<script
src
=
"js/uisearch.js"
>
<script
>
new UISearch(document.getElementById("sb-search"));
</
script
>
Вывод
Симпатичная форма поиска, которая занимает очень мало места на сайте и красиво появляется при нажатии на иконку с поиском.
Для многих людей эффективность поиска информации в Интернете – это те самые ноги, которые волка кормят. Где найти актуальную и свежую информацию? Где купить дешевле, а продать подороже? Где найти максимально точные инструкции для выполнения тех или иных задач? Где посмотреть фильмы онлайн? Чтобы максимально корректно отвечать на эти и подобные вопросы пользователей поисковые системы из года в год совершенствуют и без того изощрённые механизмы представления сайтов в поисковых выдачах по конкретным пользовательским запросам. Цель поисковиков – отвести людей на как можно более качественный сайт для получения ответа на заданные вопросы.
Помимо поисковых механизмов, сами поисковики оснащены фильтрами поиска, чтобы любой пользователь мог сузить область поиска информации или конкретизировать свой запрос.
Рассмотрим ниже некоторые из поисковых расширений, которыми можно дополнить популярные браузеры, и, как следствие - увеличить эффективность поиска информации в Интернете.
Поисковые расширения для Google Chrome
Search the current site
Внутренним поисковиком обустроен не каждый сайт, и на таких ресурсах приходиться подолгу бегать из раздела в раздел в поисках конкретной информации. Внедрённое в браузер расширение для поиска внутри сайта – универсальный инструмент, который будет всегда под рукой, на какой бы сайт вы не попали. Всё, что необходимо сделать для поиска нужной информации внутри какого-то сайта, это ввести ключевой запрос в небольшое поисковое поле, появляющееся при нажатии кнопки расширения на панели браузера.
В новой вкладке браузера откроются результаты поиска поисковика, и в них будут отобраны страницы конкретного сайта, где встречается ключевое слово.
Search the current site внедряется с предустановленной поисковой системой Google, но в параметрах расширения можно установить другой поисковик – Яндекс, Yahoo или Bing. Для этого на кнопке расширения вызываем контекстное меню и выбираем команду «Параметры».
В новой вкладке браузера откроются параметры расширения, где можем выбрать другую поисковую систему. И уже она будет осуществлять поиск внутри сайта.
Альтернативный поиск Google
Поисковая система Яндекс изначально предусматривает возможность искать информацию в двух других поисковиках - Google и Bing – одним кликом, правда ссылки для перехода в эти поисковики вместе с введённым ключевые запросом ютятся в самом низу страницы результатов поиска.
А вот Google в этом плане более эгоистичен - в его результатах поиска нет никаких упоминаний о поисковиках-конкурентах. Исправить эту ситуацию можно, внедрив в Google Chrome расширение «Альтернативный поиск Google».
Чем постоянно за каждым разом вводить в довесок к ключевому слову «торрент», чтобы получить результаты поиска по торрент-трекерам, проще установить специальное расширение для этих целей TMS (Torrents MultiSearch).
Кнопка расширения внедряется в панель инструментов браузера, и при её нажатии откроется небольшое поисковое поле для ввода запроса.
Результаты поиска появляются в отдельной вкладке, и это будет контент, найденный только на торрент-трекерах Рунета, а не на сайтах-варезниках, софт- и медийных порталах или официальных сайтах.
В результатах поиска по торрент-трекерах найденный контент можно отфильтровать по размеру файла или дате его выкладки. Для сужения поиска можно задать дополнительно ключевые слова.
Результаты поиска также можно смотреть отдельно по конкретным торрент-трекерам и отдельно по таким типам контента, как фильмы, музыка, программное обеспечение.
Помимо этого, расширение TMS внедряется в контекстное меню браузера, чтобы можно было отправить в поиск по торрент-трекерам любое слово или фразу, выделенные на страницах в Интернете без лишней возни с копированием и вставкой.
Контекстный поиск
В Google Chrome внедрена функция контекстного поиска с помощью одного поисковика, установленного в браузере по умолчанию. Увеличить число поисковых систем, с помощью которых можно искать любое выделенное слово на страницах сайтов, призвано расширение «Контекстный поиск».
В расширении изначально присутствует возможность поиска по популярнейшему торрент-трекеру RuTracker, по Википедии и по медийному порталу Kinopoisk.Ru.
Другие поисковики, чтобы через них можно было бы искать информацию прямо из контекстного меню браузера, добавляются в параметрах расширения. Откроем меню Google Chrome, выберем «Настройки» и перейдём в раздел расширений, установленных в браузере.
В перечне расширений выбираем нужное нам – «Контекстный поиск». Жмём ссылку «Параметры».
Поисковые расширения для Opera
Search within the site
Кнопка расширения находится на панели инструментов браузера, и, нажав на неё, можно вызвать поисковое поле для ввода ключевого запроса, а также сменить поисковик.
Предустановленные Яндекс и Google в настройках расширения можно дополнить другими поисковиками. Вызовем на кнопке расширения контекстное меню и выбираем команду «Настройки».
Точно так же, как и в случае с расширением «Контекстный поиск» для Google Chrome, для добавления новой поисковой системы необходимо ввести её URL-строку.
Torrents MultiSearch
Similar image search
Similar image search добавляет в контекстное меню браузера Opera дополнительную команду поиска похожих изображений с помощью нескольких поисковиков.
Или будет представлен список публикаций с похожими картинками.
Поисковые расширения для Mozilla Firefox
Поиск по сайту
Как и в предыдущих двух случаях, специальное расширение для поиска внутри любого сайта в Интернете существует и для браузера Mozilla Firefox.
Только в случае с Огненным Лисом поиск по сайту встраивается в существующее поисковое поле браузера, добавляя перед значком обычного поиска свой значок в виде красного увеличительного стекла.
Смена поисковика по умолчанию для обычного поиска Mozilla Firefox влечёт за собой и смену поисковика и для поиска внутри сайтов.
Расширение «Поиск по сайту» интегрируется в контекстное меню Mozilla Firefox, и, выделив любое «попавшееся под руку» слово, в отдельных результатах поиска можно увидеть все страницы сайта, где это слово присутствует.
Поиск от byffox
Любые программные продукты с такими «ещё не повзрослевшими» названиями, как правило, раздражают многих пользователей тем, что в них ну никак не усматривается даже намёк о целевом назначении предлагаемого инструментария.
И о том, что именно предлагает «Софтина от Васи» или «Репак игрули от Пети», приходится узнавать только при детальном ознакомлении с описанием. Тем не менее, за таким легкомысленным названием, как «Поиск от byffox», кроется полезный и толковый функционал. Это расширение позволяет пополнить контекстное меню браузера дополнительной командой поиска выделенного слова с помощью различных поисковиков.
имя ключа параметра. Для поля поиска чаще всего применяется «q» или «text».
значение ключа параметра. Чаще всего не задаётся. Пользователь может его изменить на свой текст, если не указаны атрибуты readonly и disabled .
заблокировано изменение пользователем
заблокированы доступ, изменение пользователем и передача данных текущего параметра
поле не может быть пустым
шаблон ввода как в регулярных выражениях JS , следование которому необходимо для отправки формы
минимальное количество символов, необходимое для отправки формы
максимальное количество символов, которое может набрать пользователь
длина поля в символах
подсказка-заглушка
всплывающая подсказка при наведении курсора мышки
автозаполнение. Современные браузеры показывают ранее введённые поисковые запросы на текущем домене. Можно его отключить или сделать более конкретизированным.
список рекомендованных запросов
проверяется орфография и грамматика
фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа
Убрать в поле поиска крестик «Очистить», удаляющий ранее набранный текст
Как работает форма поиска на сайте
Самый простой HTML-код
Если набрать в поле «вопрос» и щелкнуть по кнопке «Найти», то адрес страницы изменится с « http://сайт/2011/06/forma-poiska-po-saitu..html?text=вопрос
», как это происходит при нажатии на ссылку . При загрузке страницы, скрипт проверяет наличие заданных параметров в URL и при их обнаружении формирует и отображает результаты поиска по сайту.
Но в целях увеличения скорости загрузки документа, скрипт, обрабатывающий запрос, как правило, помещают только на одну страницу сайта, на которую будет сделан переход, если её адрес прописать в атрибуте action: « http://сайт/search/
?text=вопрос ».
Для работы скрипта могут понадобиться дополнительные параметры, которые указываются в searchid=808327
&text=вопрос ».
Результат работы формы открыть в новой вкладке с помощью атрибута target
Где взять скрипт поиска по сайту
Можно воспользоваться
предложенным специальными сервисами Яндекса и Google , встроенным в используемую CMS (при наличии), например, на Blogger на « https://site.ru
/search?q=вопрос », где « site.ru » заменить на свой адрес блога, разработанным самостоятельно, например, на PHP.
Самый простой вариант - перенаправить запрос Google:
Текст на кнопке: «Поиск», «Искать», «Найти»
Из слов-побудителей «Найти» имеет совершённый вид и подразумевает, что результат поиска будет обязательно положительным.
Предыдущая статья: Чему равна скорость света Следующая статья: Чувственное и рациональное в познавательном процессе
