Ako napísať hľadaný reťazec v html. Rozbaľovacie pole vyhľadávania. Vyhľadávacie pole s hrubým spodným okrajom
25. október 2019 Záznam bol aktualizovaný
Posuvný vyhľadávací formulár na webe
Plochý štýl si získal značnú obľubu v dizajne webových stránok. A v tejto lekcii sa pozrieme na ďalší prvok stránky, ktorý je vyrobený v tomto štýle. Tento prvok je vyhľadávací formulár. Nie však jednoduchý, ale vyhľadávací formulár, ktorý sa zobrazí po kliknutí a ak sa nepoužíva, „spadne“. Pokiaľ ide o ikonu vyhľadávania, pochádza zo súboru SVG a je škálovateľná v rôznych rozlíšeniach obrazovky (na mobilných zariadeniach aj na veľkých monitoroch).
Príklad je možné vidieť tu:
Stiahnuť ▼
Vyťahovací vyhľadávací formulár
Ako použiť?
Html
Najprv definujme označenie, ktoré bude na stránke HTML:
| 1 2 3 4 5 6 7 | <div id = "sb-search" class = "sb-search"> <forma> <input class = zástupný symbol "sb-search-input" = "Čo bude hľadať?" typ = "text" hodnota = "" názov = "hľadať" id = "hľadať"> <input class = "sb-search-submit" type = "submit" value = ""> <span class = "sb-icon-search"> </ formulár> </ div> |
Vo vyhľadávacom formulári nie je nič neobvyklé: textové pole na zadanie, tlačidlo vyhľadávania a prvok pre ikonu.
CSS
Teraz pridajte nejaký štýl, aby vyhľadávací formulár vyzeral na stránke pekne.
Keďže sa zobrazí po kliknutí, je spočiatku skrytý. To sa vykonáva pomocou nehnuteľnosti pretečeniu a jeho význam skryté, v dôsledku čoho je všetko mimo ikony skryté (v dôsledku toho vidíme iba ikonu, ale nie textové pole):
| .sb-search (pozícia: relatívna; horný okraj: 10 pixelov; šírka: 0%; minimálna šírka: 60 pixelov; výška: 60 pixelov; plávajúci formát: vpravo; pretečenie: skryté; -webkit-prechod: šírka 0,3 s; -moz- prechod: šírka 0,3s; prechod: šírka 0,3s; -viditeľnosť-zadnej strany webkitu: skrytá;) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .sb-search-input (pozícia: absolútna; hore: 0; vpravo: 0; ohraničenie: žiadne; obrys: žiadne; pozadie: #fff; šírka: 100 %; výška: 60px; okraj: 0; z-index: 10 ; výplň: 20 pixelov 65 pixelov 20 pixelov 20 pixelov; rodina písem: dediť; veľkosť písma: 20 pixelov; farba: # 2c3e50;) vstup [typ = "vyhľadávanie"] .sb-search-vstup (-webkit-vzhľad: žiadny; -webkit -polomer-bordu: 0px ;) |
Určujeme farbu textu, ktorý je na pozadí požiadavky (text, ktorý zadáme počas vyhľadávania):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .sb-search-input:: -webkit-input-placeholder (farba: # efb480;) .sb-search-input: -moz-placeholder (color: # efb480;) .sb-search-input:: -moz- zástupný symbol (farba: # efb480;) .sb-search-input: -ms-input-placeholder (farba: # efb480;) |
Tlačidlo vyhľadávania je vždy nad zvyškom blokov a prvkov na stránke, preto sme ho nastavili veľký význam 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 "; } |
Nezabudnite tiež zahrnúť špeciálne ikony (SVG). Ak chcete vložiť ikonu do tlačidla Hľadať:
| 1 2 3 4 5 6 7 8 9 10 | @ font-face (rodina fontov: "icomoon"; src: url ( "../fonts/icomoon/icomoon.eot"); src: url ( "../fonts/icomoon/icomoon.eot?#iefix") formát ("embedded-opentype"), adresa URL ( "../fonts/icomoon/icomoon.woff") formát ("woff"), adresa URL ( "../fonts/icomoon/icomoon.ttf") formát (skript "truetype"><skript src = "js / uisearch.js"> <skript> nové UISearch (document.getElementById ("sb-search"));</ skript> |
Výkon
Pekný vyhľadávací formulár, ktorý na stránke zaberá veľmi málo miesta a krásne sa zobrazí po kliknutí na ikonu vyhľadávania.
V tomto návode vytvoríme rozbaľovací vyhľadávací formulár, ktorý dokonale zapadá do dizajnu mobilného rozhrania. Na implementáciu prvku sa použije iba CSS – žiadny JavaScript ani ďalšie značenie. Jednoduché a efektívna metóda implementovať kompaktný vyhľadávací formulár.
Vymenovanie
Na mobilných zariadeniach sa počíta každý pixel. Aby sa minimalizoval priestor potrebný na zobrazenie formulára, bude sa spočiatku zobrazovať v kompaktnej forme a po prijatí vstupného zamerania (: zaostrenie) sa rozbalí. Tento prístup šetrí priestor pre ďalšie prvky rozhrania a obsah.
HTML značky
Pre formulár je použitý HTML5. Kód je veľmi jednoduchý:
Obnovenie predvoleného zobrazenia pre vyhľadávací formulár v prehliadačoch Webkit
V prehliadačoch Webkit bude predvolene vyzerať vyhľadávací formulár takto:
Ak chcete, aby vyhľadávací formulár vyzeral ako bežné pole na zadávanie textu, musíte pridať nasledujúce štýly:
Vstup (-webkit-vzhľad: textové pole; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;) input :: - webkit-search-decoration, input :: - webkit- tlačidlo Hľadať-Zrušiť (zobrazenie: žiadne;)
Vytvárame náš vyhľadávací formulár
Vstupné pole bude mať bežnú šírku 55 pixelov a v stave zamerania sa rozšíri na 130 pixelov. Vlastnosť prechodu sa používa na animáciu a tieňový rámček na efekt žiary.
Vstup (pozadie: #ededed url (img / search-icon.png) neopakovateľné 9px stred; orámovanie: plné 1px #ccc; výplň: 9px 10px 9px 32px; šírka: 55px; / * Predvolená šírka * / -webkit- border -radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;) input: focus (šírka : 130px; / * Šírka so zaostrením * / farba pozadia: #fff; farba orámovania: # 6dcff6; -webkit-box-shadow: 0 0 5px rgba (109,207,246,, 5); -moz-box- tieň: 0 0 5px rgba (109,207,246, 0,5); box-shadow: 0 0 5px rgba (109,207,246, 0,5); / * Efekt žiary * /)
Príklad B
V príklade B je vyhľadávací formulár výrazne minimalizovaný – zobrazuje sa iba ikona bez vypĺňania textu. Upozorňujeme, že vlastnosti polstrovania a šírky pre vyhľadávacie pole sa zmenili na okrúhle tlačidlo. Aby bol text neviditeľný, použite vlastnosť color: transparent.
# vstup demo-b (šírka: 15px; padding-left: 10px; farba: priehľadná; kurzor: ukazovateľ;) # vstup demo-b: prechod (farba pozadia: #fff;) # vstup demo-b: zameranie (šírka : 130px; padding-left: 32px; color: # 000; background-color: #fff; kurzor: auto;)
Kompatibilita prehliadača
Opísaná metóda funguje vo všetkých hlavných prehliadačoch: Chrome, Firefox, Safari a IE8 +. V prehliadačoch IE7 a starších táto funkcia nefunguje z dôvodu nedostatočnej podpory pre pseudotriedu: focus a typ vyhľadávacieho poľa.
názov kľúča parametra. Pre vyhľadávacie pole sa najčastejšie používa „q“ alebo „text“. hodnota kľúča parametra. Najčastejšie sa to nepýta. Používateľ ho môže zmeniť na svoj vlastný text, ak atribúty iba na čítanie a zakázané nie sú špecifikované. zablokovaná zmena používateľa zablokovaný prístup, úprava užívateľa a prenos údajov z aktuálneho poľa parametrov nemôže byť prázdna vstupná šablóna ako v regulárnych výrazoch JS, ktoré je potrebné dodržať pri odoslaní formulára minimálne množstvo znaky potrebné na odoslanie formulára maximálny počet znakov, ktoré môže používateľ zadať dĺžka poľa v znakoch nápoveda-zástupný symbol, keď sa kurzor myši pohybuje pri automatickom dopĺňaní. Moderné prehliadače zobrazujú predtým zadané vyhľadávania v aktuálnej doméne. Môžete ho vypnúť alebo spresniť. zoznam odporúčaných dopytov zameranie poľa kontrolovaného pravopisu a gramatiky (t. j. obdobie medzi kliknutím na prvok a kliknutím mimo prvku) prijatých pri načítavaní dokumentu
Odstráňte krížik "Vymazať" vo vyhľadávacom poli, čím sa odstráni predtým napísaný text
Ako funguje vyhľadávací formulár na stránke
Najjednoduchší HTML kód
Ak napíšete do poľa „otázka“ a kliknete na tlačidlo „Nájsť“, adresa stránky sa zmení z „http: //site/2011/06/forma-poiska-po-saitu..html ? text = otázka„Ako sa to stáva, keď kliknete na odkaz. Po načítaní stránky skript skontroluje prítomnosť zadaných parametrov v adrese URL a v prípade nájdenia vygeneruje a zobrazí výsledky vyhľadávania na webe.
Aby sa však zvýšila rýchlosť načítania dokumentov, skript, ktorý spracováva požiadavku, sa spravidla umiestni iba na jednu stránku webu, na ktorú sa uskutoční prechod, ak je jeho adresa napísaná v atribúte action: " http: // stránka / vyhľadávanie /? text = otázka ".
Aby skript fungoval, môžu byť potrebné ďalšie parametre, ktoré sú špecifikované v ... Toto pole sa nezobrazuje.? hľadané číslo = 808327& text = otázka “.
Otvorte výsledok formulára na novej karte pomocou atribútu target
Kde získať skript vyhľadávania na stránke
Môžeš použiť
- ponúkané špeciálnymi službami Yandex a Google,
- vložené do použitého CMS (ak je k dispozícii), napríklad v službe Blogger na adrese „https: // site.ru/ vyhľadávanie? q = otázka ", kde" site.ru "je nahradená adresou vášho blogu,
- vyvinuté samostatne, napríklad v PHP.
Najjednoduchšou možnosťou je presmerovať požiadavku Google:
Text na tlačidle: "Hľadať", "Hľadať", "Nájsť"
Z podnetných slov má „Nájsť“ dokonalú formu a znamená, že výsledok vyhľadávania bude nevyhnutne pozitívny.
Vyhľadávacie pole na stránke- jeden z podstatné prvky používateľské rozhranie na webovej stránke. S jeho pomocou môže používateľ nájsť požadovaný obsah na vašej stránke.
V tomto návode sa naučíte, ako vytvárať značky pre vyhľadávacie pole pomocou HTML5 a ako štylizovať prvky formulára pomocou funkcií CSS3 bez skriptovania.
1. Značenie HTML
Element