Как да напиша низ за търсене в html. Падащо поле за търсене. Поле за търсене с дебела долна граница
25 октомври 2019 г. Записът е актуализиран
Плъзгаща се форма за търсене в сайта
Стилът Flat придоби значителна популярност в дизайна на уебсайтове. И в този урок ще разгледаме друг елемент от сайта, който е направен в този стил. Този елемент е форма за търсене. Но не просто, а формуляр за търсене, който се появява при щракване и „свива“, ако не се използва. Що се отнася до иконата за търсене, тя идва от SVG файл и е мащабируема в различни разделителни способности на екрана (както на мобилни устройства, така и на големи монитори).
Пример може да се види тук:
Изтегли
Изтегляне на формуляра за търсене
Как да използвам?
Html
Първо, нека определим маркирането, което ще бъде на HTML страницата:
| 1 2 3 4 5 6 7 | <div id = "sb-search" class = "sb-search"> <форма> <input class = "sb-search-input" заместител = "Какво ще търсите?" type = "text" value = "" name = "search" id = "search"> <input class = "sb-search-submit" type = "submit" value = ""> <span class = "sb-icon-search"> </ form> </ div> |
Във формата за търсене няма нищо необичайно: текстово поле за въвеждане, бутон за търсене и елемент за иконата.
CSS
Сега нека добавим малко стил, за да изглежда формата за търсене хубава на страницата.
Тъй като ще се появи при щракване, първоначално е скрит. Това става с помощта на имота препълванеи неговото значение скрит, в резултат на което всичко извън иконата е скрито (в резултат виждаме само иконата, но не и текстовото поле):
| .sb-search (позиция: относителна; марж-отгоре: 10px; ширина: 0%; мин. ширина: 60px; височина: 60px; float: надясно; преливане: скрито; -webkit-преход: ширина 0.3s; -moz- преход: ширина 0.3s; преход: ширина 0.3s; -webkit-backface-видимост: скрит;) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .sb-search-input (позиция: абсолютна; отгоре: 0; вдясно: 0; граница: няма; контур: няма; фон: #fff; ширина: 100%; височина: 60px; марж: 0; z-индекс: 10 ; padding: 20px 65px 20px 20px; font-family: наследяване; font-size: 20px; color: # 2c3e50;) input [type = "search"] .sb-search-input (-webkit-външен вид: няма; -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 (цвят: # efb480;) .sb-search-input: -moz-placeholder (цвят: # efb480;) .sb-search-input :: -moz- заместител (цвят: # efb480;). sb-search-input: -ms-input-placeholder (цвят: # efb480;) |
Бутонът за търсене винаги е над останалите блокове и елементи на страницата, затова го задаваме голямо значение z-индекс:
| 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"; говорете: няма; style-font: 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><скрипт src = "js / uisearch.js"> <скрипт>нов UISearch (document.getElementById ("sb-search"));</ скрипт> |
Изход
Хубава форма за търсене, която заема много малко място на сайта и се появява красиво, когато щракнете върху иконата за търсене.
В този урок ще създадем падаща форма за търсене, която идеално се вписва в дизайна на мобилния интерфейс. За внедряване на елемента ще се използва само CSS - без JavaScript или допълнително маркиране. Прост и ефективен методза внедряване на компактен формуляр за търсене.
Назначаване
На мобилните устройства всеки пиксел се брои. За да се сведе до минимум пространството, необходимо за показване на формуляра, първоначално той ще бъде показан в компактна форма и разширен при получаване на входен фокус (: фокус). Този подход спестява място за други елементи и съдържание на интерфейса.
HTML маркиране
HTML5 се използва за формуляра. Кодът е много прост:
Нулиране на изгледа по подразбиране за формата за търсене в браузъри Webkit
По подразбиране в браузърите Webkit формулярът за търсене ще изглежда така:
За да изглежда формата за търсене като обикновено поле за въвеждане на текст, трябва да добавите следните стилове:
Въвеждане (-webkit-поява: текстово поле; -webkit-box-sizing: content-box; font-family: наследяване; font-size: 100%;) input ::-webkit-search-decoration, input ::-webkit- бутон за отмяна на търсене (дисплей: няма;)
Ние формираме нашата форма за търсене
Полето за въвеждане ще има редовна ширина 55px и ще се разширява до 130px в състояние: focus. Свойството за преход се използва за анимация, а box-shadow се използва за ефекта на светене.
Въвеждане (фон: #ededed url (img / search-icon.png) без повторение 9px център; граница: плътен 1px #ccc; подложка: 9px 10px 9px 32px; ширина: 55px; / * ширина по подразбиране * / -webkit-border -радиус: 10em; : 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); / * Светлинен ефект * /)
Пример Б
В пример Б, формулярът за търсене е значително минимизиран - само иконата се показва без попълване на текст. Обърнете внимание, че свойствата на подложка и ширина за полето за търсене са се променили, за да образуват кръгъл бутон. За да направите текста невидим, използвайте свойството color: transparent.
# demo-b вход (ширина: 15px; padding-ляво: 10px; цвят: прозрачен; курсор: указател;) # demo-b вход: 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“ или „текст“. стойност на ключовия параметър. Най -често не се пита. Потребителят може да го промени в свой собствен текст, ако атрибутите само за четене и деактивирани не са посочени. блокирана модификация на потребител блокиран достъп, модификация на потребител и пренос на данни на текущия параметър, полето не може да бъде празен шаблон за въвеждане, както в регулярните изрази на JS, което трябва да се следва, за да изпратите формуляра минимална сумазнаци, необходими за изпращане на формуляра максималният брой знаци, които потребителят може да въведе дължината на полето в подсказка за символи hint-stub, когато задържите курсора на мишката за автоматично довършване. Съвременните браузъри показват предварително въведени търсения в текущия домейн. Можете да го изключите или да го направите по -конкретен. списък на препоръчаните заявки правопис и граматика проверени полеви фокус (тоест периодът между щракване върху елемент и щракване извън елемента), получен при зареждане на документ
Премахнете кръста „Изчистване“ в полето за търсене, което изтрива предварително въведения текст
Как работи формулярът за търсене на сайта
Най -простият HTML код
Ако въведете полето „въпрос“ и кликнете върху бутона „Намери“, адресът на страницата ще се промени от „http: //site/2011/06/forma-poiska-po-saitu..html ? текст = въпрос», Както се случва, когато кликнете върху връзката. Когато страницата се зареди, скриптът проверява наличието на посочените параметри в URL адреса и, ако бъде намерен, генерира и показва резултатите от търсенето на сайта.
Но за да се увеличи скоростта на зареждане на документа, скриптът, който обработва заявката, като правило се поставя само на една страница от сайта, към която ще бъде извършен преходът, ако неговият адрес е записан в атрибута на действието : " http: // сайт / търсене /? текст = въпрос ".
За да работи скриптът, може да са необходими допълнителни параметри, които са посочени в ... Това поле не се показва.? searchid = 808327& text = въпрос ".
Отворете резултата от формуляра в нов раздел, като използвате атрибута target
Къде да получите скрипт за търсене на сайт
Можеш да използваш
- предлагани от специални услуги на Yandex и Google,
- вградени в използваната CMS (ако има такава), например, в Blogger на адрес „https: // site.ru/ search? q = question ", където" site.ru "се заменя с адреса на вашия блог,
- разработен независимо, например в PHP.
Най -лесният вариант е да пренасочите заявката на Google:
Текст на бутона: „Търсене“, „Търсене“, „Намиране“
От подсказващите думи „Намери“ има перфектна форма и предполага, че резултатът от търсенето задължително ще бъде положителен.
Кутия за търсене на сайт- един от съществени елементипотребителски интерфейс на уеб страница. С негова помощ потребителят може да намери желаното съдържание на вашия сайт.
В този урок ще научите как да създавате маркиране на полето за търсене с помощта на HTML5 и как да оформяте елементи на формуляри с помощта на CSS3 функции без скриптове.
1. HTML маркиране
Елемент