Как написать поисковую строку на html. Раскрывающееся поле поиска. Поле поиска с толстой нижней границей
Октябрь 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 > |
Вывод
Симпатичная форма поиска, которая занимает очень мало места на сайте и красиво появляется при нажатии на иконку с поиском.
В данном уроке мы создадим раскрывающуюся форму поиска, которая отлично впишется в дизайн интерфейса для мобильных устройств. Для реализации элемента будет использоваться только CSS - никакого JavaScript и дополнительной разметки. Простой и эффективный способ для реализации компактной формы поиска.
Назначение
На мобильных устройствах идет учет каждого пикселя. Для минимизации требуемого для вывода формы пространства она будет изначально показываться в компактной форме и раскрываться по получению фокуса ввода (:focus ). Такой подход позволяет сохранить место для других элементов интерфейса и содержания.
Разметка HTML
Для формы используется HTML5. Код очень простой:
Сбрасываем вид для формы поиска по умолчанию в браузерах Webkit
По умолчанию в браузерах Webkit форма поиска будет иметь следующий вид:
Для того, чтобы форма поиска выглядела как обычное поле ввода текста нужно добавить следующие стили:
Input { -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; }
Формируем нашу форму поиска
Поле ввода будет иметь обычную ширину 55px и раскрываться для 130px в состоянии :focus . Свойство transition используется для анимации, а box-shadow используется для эффекта свечения.
Input { background: #ededed url(img/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: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); /* Эффект свечения */ }
Пример В
В примере B форма поиска существенно минимизирована - выводится только иконка без заполняющего текста. Обратите внимание, что изменились свойства padding и width для поля поиска, чтобы сформировать круглую кнопку. Для того, чтобы текст был невидим используется свойство color:transparent .
#demo-b input { width: 15px; padding-left: 10px; color: transparent; cursor: pointer; } #demo-b input:hover { background-color: #fff; } #demo-b input:focus { width: 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; }
Совместимость с браузерами
Описанный метод работает во всех основных браузерах: Chrome, Firefox, Safari, и IE8+. В IE7 и старых браузерах функционал не действует по причине отсутствия поддержки псевдо-класса:focus и типа поля поиска.
имя ключа параметра. Для поля поиска чаще всего применяется «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:
Текст на кнопке: «Поиск», «Искать», «Найти»
Из слов-побудителей «Найти» имеет совершённый вид и подразумевает, что результат поиска будет обязательно положительным.
Поле поиска для сайта — один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте.
В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.
1. Разметка HTML
Элемент