Як зробити пошук по сайту
- Прибрати в поле пошуку хрестик «Очистити», що видаляє раніше набраний текст
- Результат роботи форми відкрити в новій вкладці за допомогою атрибута target
- Текст на кнопці: «Пошук», «Шукати», «Знайти»
- значок лупи
Прибрати в поле пошуку хрестик «Очистити», що видаляє раніше набраний текст
<style> input [type = "search"] :: - ms-clear {display: none; } Input [type = "search"] :: - webkit-search-cancel-button {display: none; } </ Style> <input type = "search">Найпростіший 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:
<form action = "http://google.com/search" target = "_ blank"> <input type = "search" name = "q"> <input type = "hidden" name = "as_sitesearch" value = "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 {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 "/> </ form>Html?Ru/search/?
Ru/search/?