Html vyhľadávací formulár v okne. Krásny vyhľadávací formulár css

Zdravím všetkých čitateľov a predplatiteľov stránky. Dnes budem hovoriť o tom, ako vytvoriť štýlový vyhľadávací formulár HTML pre webovú stránku.

Väčšina stránok a blogov s množstvom rôznych informácií používa takéto formuláre. Umožňujú návštevníkom nájsť ten správny článok podľa kľúčových slov, myslím, že ich videl každý.

Z pohľadu prehliadača ide o jednoduché HTML formuláre, s dvoma prvkami: textovým poľom a tlačidlom, ktoré odošle požiadavku. Niekedy nemusí byť tlačidlo, v takom prípade sa formulár odošle stlačením klávesu Enter.

Ako príklad som si zobral jednu z prác z premiumpixels.com. Tu je odkaz na samotný príspevok. Tento bezplatný súbor psd so šiestimi typmi tvarov vyzerá ako na obrázku nižšie. Samotné PSD si môžete stiahnuť z tejto stránky, pretože je zadarmo.

Obmedzíme sa na vytvorenie svetlej a tmavej verzie, keďže tretia, v modrej farbe, je veľmi podobná svetlej.

Čo získame ako výsledok, pozri nižšie:

Takže, ako som povedal, HTML kód je formulár s dvoma vstupnými prvkami. Pre jednoduchosť dizajnu som každý z nich zabalil do div bloku.

Pre všetky typy dizajnu bude tento kód rovnaký.

Tí, ktorí pracovali s Drupal 7, môžu vidieť, že táto štruktúra je veľmi podobná štandardnému vyhľadávaciemu formuláru v Drupale 7. Je. Ak tento dizajn vložíte na svoju stránku v tomto CMS, nebudete musieť vo výstupe HTML nič meniť (okrem zástupného symbolu, pozri nižšie).

Pre vstupné pole nastavíme atribút zástupný symbol. Hodnota tohto atribútu sa zobrazí vo vstupnom poli a zmizne, keď pole bude aktívne. Veľmi výhodná nehnuteľnosť.

V predvolenom nastavení v rôznych prehliadačoch bude celý tento vyhľadávací formulár vyzerať inak a nie všade veľmi štýlovo. Napríklad jeho vzhľad v Opere a Safari je uvedený nižšie:

Preto sa nezaobídeme bez označenia štýlu. Zvážte štýly pre okrúhlu svetlú verziu. Do súboru CSS vložte nasledujúci kód:

#search-block-form( width:248px; height:28px; border-radius:15px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) left top repeat-x; ) .focus-active( border-color:#aaa !important; background:#fff !important; ) #search-block-form input( padding:0; margin:0; display:block; border:none; outline:none; background:none; width :100%; výška:100%; ) #search-block-form .form-actions( width:28px; height:28px; float:left; background:url(images/searchIcon.png) 5px 2px no-repeat; ) #search-block-form .form-actions input:hover(kurzor:ukazovateľ; ) #search-block-form .form-actions input( overflow:hidden; text-indent:-9999px; ) #search-block-form . form-item( width:210px; padding:0px 5px; float:right; height:28px; ) #search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans- serif;color:#222;height:auto !important;padding:6px 0; ) .placeholder(color:#cbcbcb !important;)

Zoberme si to pekne po poriadku a podrobnejšie. Najprv zadáme samotný formulár s ID #search-block-form , rozmery, farbu orámovania a zaoblenie rohov.

#search-block-form( width:248px; height:28px; border-radius:15px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) left top repeat-x; )

Všetky vnútorné prvky nebudú mať farbu pozadia ani okraja, takže prepíšeme všetky predvolené vlastnosti na oboch vstupných značkách.

#search-block-form input( padding:0; margin:0; display:block; border:none; obrys:none; background:none; width:100%; height:100%; )

Dizajn nastavíme, ak je to možné, na divy, v ktorých sú prvky zabalené, a nie na ne.

Blok s akciami formulára bude vľavo a položka formulára vpravo. Tlačidlo na odoslanie formulára obsahuje text, ale my ho nepotrebujeme, preto ho odstránime nasledujúcou známou metódou.

#search-block-form .form-actions input( overflow:hidden; text-indent:-9999px; )

#search-block-form .form-item input( font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#222; height:auto !important; padding:6px 0; )

Teraz sa pozrime na kód JavaScript.

Zdá sa, prečo je tu potrebný JavaScript? V skutočnosti pridáva niekoľko užitočných vecí pre použiteľnosť.

Po prvé, vlastnosť zástupného symbolu prišla s HTML5 a jej podpora v starších prehliadačoch ponecháva veľa požiadaviek. Existuje však jednoduché riešenie v podobe jQuery pluginu jQuery-Placeholder , ktorý poskytne podporu pre túto vlastnosť vo všetkých prehliadačoch (vrátane IE6!).

Za týmto účelom zahrnieme samotný súbor a povolíme túto funkciu:

$("vstup").placeholder();

Ak sme zahrnuli jQuery, môžeme urobiť niečo iné. Povedzme napríklad, že keď formulár dostane zameranie, nejako sa zmení.

Na tento účel sme vytvorili špeciálnu triedu zameranú na aktívnu aktivitu. Keď pridáte túto triedu do formulára, farba pozadia sa zmení na bielu a farba okraja bude mierne tmavšia. Formulár bude reagovať na akcie užívateľa.

Focus-active( border-color:#aaa !important; background:#fff !important; )

Trieda .placeholder formátuje text z atribútu zástupného symbolu v starších prehliadačoch. Túto triedu je možné použiť iba vtedy, ak používame rovnaký doplnok jQuery.

Zástupný symbol (color:#cbcbcb !dôležité;)

To je všetko. Vytvorili sme vyhľadávací formulár, ktorý sa dá ľahko integrovať do väčšiny stránok.

Ostatné verzie sa príliš nelíšia, pozri zdrojový kód demo stránok, tam sú potrebné komentáre.

To je na dnes všetko. Napíšte do komentárov, o čom by ste si chceli prečítať v nových blogových príspevkoch, a tiež sa prihláste na odber RSS a buďte prvý, kto dostane informácie o aktualizácii stránky!

Úloha

Umiestnite tlačidlo na odoslanie formulára do rámčeka na zadávanie textu.

Riešenie

Musíte pochopiť, že nemôžete priamo pridať tlačidlo do poľa formulára. Akékoľvek metódy preto tento efekt iba napodobňujú. Ak chcete vytvoriť takúto ilúziu, odstráňte pôvodný rám okolo vyhľadávacieho poľa a pridajte ho do prvku obsahujúceho pole a tlačidlo. Táto metóda funguje najlepšie, keď máme zafixované všetky veľkosti. V príklade 1 je celková šírka formulára nastavená na 300 pixelov, pole je široké 274 pixelov a tlačidlo je široké 20 pixelov. Šírka poľa je zvolená s ohľadom na skutočnosť, že vo formulári nie sú žiadne prevody, čo negatívne ovplyvní celkový pohľad.

Niektoré doplnky do kódu CSS budú vyžadovať prehliadače Safari a Chrome. Pri zaostrení sú polia formulára zvýraznené farebným orámovaním, čo ničí našu ilúziu jediného poľa. Aby ste tomu zabránili, pridajte do štýlu vyhľadávacieho poľa obrys s hodnotou none , čím sa zablokuje vzhľad orámovania v zadaných prehliadačoch. Okolo vyhľadávacieho poľa ( ) v každom prípade zostane tenký okraj, možno ho odstrániť pomocou vlastnosti -webkit-appearance, opäť s hodnotou none .

Príklad 1: Vyhľadávací formulár

HTML5 CSS 2.1 IE Cr Op Sa Fx

Výsledok príkladu je znázornený na obr. jeden.

Ryža. 1. Pohľad na pole vyhľadávania s tlačidlom

Samotné tlačidlo je možné pridať rôznymi spôsobmi. Urobte z neho napríklad bežné tlačidlo s nápisom, cez , alebo, ako v príklade vyššie, ako tlačidlo s obrázkom na pozadí.

Dnes vám navrhujem vytvoriť krásny vyhľadávací formulár CSS. Súhlasím, štandardný dizajn formulárov v html nie je pôsobivý, ale dnes vytvoríme formu cukroviniek. Toto som našiel pre tento článok:

Ukážem vám krok za krokom, od a po z, ako takýto formulár vytvoriť. Tu si môžete stiahnuť rozloženie psd tohto a dvoch ďalších krásnych tvarov, aby ste si neskôr vystrihli potrebné obrázky.
https://ideasplayer.com/2011/12/free-custom-search-boxes-psd/

Krok 1 – označenie formulára html

Najprv si vytvoríme samotný formulár. Bude pozostávať z dvoch polí – bežného poľa na zadávanie textu a obrázkového tlačidla, ktoré si zadefinujeme neskôr.

Zatiaľ to vyzerá veľmi smutne:

2. krok – z rozloženia som vystrihla potrebné obrázky

Na vytvorenie tvaru si vystrihnem 2 obrázky.
Prvým je vstupné pole a samotné tlačidlo. Za týmto účelom vypnite vrstvy s textom a ikonou vyhľadávania, zvyšok je možné vybrať a uložiť pre web, ale uistite sa, že je vo formáte png-24, aby bola zachovaná priehľadnosť.

Teraz zakážem všetko okrem ikony vyhľadávania a ponechám si ju. Toto je obrázok, ktorý som dostal. Obrázky som pomenoval btn.png a icon.png a umiestnil ich do priečinka so súbormi html a css. Teraz môžete pracovať ďalej.

Krok 3 – Práca v CSS

Je čas začať písať css kód. Začnime s pravidlami pre samotný zoznam polí:

Hľadať ( pozadie: url(btn.png) bez opakovania vľavo hore; šírka: 268px; výška: 57px; štýl zoznamu: žiadny; )

1. vlastnosťou background som nastavil obrázok tlačidla a vstupného poľa, zakázal opakovanie, umiestnenie vľavo a hore
2. Šírku a výšku nastavím podľa veľkosti vystrihnutého obrázku
3. v štýle zoznamu vlastností: žiadne odstránenie značiek z položiek

Zatiaľ to vyzerá hrozne, však? Ale to je v poriadku, urobíme to hneď.

Krok 4 – Úprava štýlu textového vstupného poľa

A okamžite dám kód, ktorý som napísal, aby som upravil textové pole.

Vstup vyhľadávania ( orámovanie: žiadne; pozadie: priehľadné; okraj: 15px -20px 3px -15px; šírka: 170px; výplň: 5px; veľkosť písma: 14px; )

Všimnite si, že som použil selektor atribútov na odkazovanie na vstupné pole. Aby ste pochopili, o čom hovorím, odporúčam prečítať.

Ako tento kód pomohol? Urobil vstupné pole takto:

To znamená, že tu môžete priamo tlačiť, všetko je krásne zobrazené:

A teraz vysvetľujem tento kód:

1. border: none - touto vlastnosťou odstránime rámček zo vstupného poľa, nepotrebujeme všetky tieto rámiky a pozadia, pretože všetko je už na samotnom obrázku, takže s vlastnosťou background: transparent spravíme priehľadnú aj farbu pozadia aby nekazili výhľad.
2. margin - sú to vonkajšie okraje, napísal som ich tak, že vstupné pole je umiestnené priamo v tej časti obrázku, kde máme nakreslené pole. Na tento účel je vhodné použiť debugger, ktorý sa otvorí v prehliadači stlačením klávesu F12.
3. šírka je samozrejme šírka, špecifikoval som ju približne ako šírku nakresleného poľa.
4. polstrovanie- a umožní vám urobiť samotné ihrisko o niečo priestrannejšie
5. veľkosť písma je len veľkosť písma textu zadaného do poľa.

Okrem toho, že som sa vyhol zradnému modrému ťahu v blízkosti poľa pri prijímaní zaostrenia, pridal som nasledujúce štýly.

Vstup vyhľadávania:zameranie( orámovanie: žiadne; obrys: žiadne; tieňové pole: žiadne; )

Pseudotrieda :focus je zodpovedná za štýl polí, keď dostanú zameranie.

Super, máme tu len hrozné tlačidlo vyhľadávania, na mieste ktorého by mala byť krásna ikonka.

Krok 5 - finalizácia formulára, pridanie ikony vyhľadávania

Pripomínam vám, že časť kódu zodpovedná za zobrazenie druhého tlačidla vyzerá takto:

V súlade s tým máme prázdny atribút src, kde musíte zadať cestu k obrázku, ktorý by sa mal stať tlačidlom. Keďže som pomenoval obrázok icon.png a umiestnil ho do rovnakého adresára ako súbor html, môj kód bude vyzerať takto:

A tu je to, čo sa stalo:

Ide teda o jednoduchú záležitosť – umiestniť ikonu na správne miesto. Ako to spraviť? Áno, v skutočnosti existujú rôzne možnosti:

1. môžete použiť absolútne umiestnenie vzhľadom na zoznam
2. tlačidlo obrázka môžete nastaviť ako plávajúce a potom ho upraviť na správne miesto pomocou okrajov

Zvolil som druhý spôsob. Takže:

Voličom vstupu .search mám na mysli tlačidlo obrázka. Vlastne v mojom prípade mi vyhovovali práve takéto okraje, ale vlastnosť float: right spôsobí, že blok bude plávajúci a pritlačí ho k pravému okraju nadradeného bloku.

Opäť som použil debugger, aby sa tlačidlo zmestilo na správne miesto. Otvoril som ho a v ňom som určil, aké okraje sú potrebné, aby bol gombík na správnom mieste. Ak chcete zobraziť štýly prvku v ladiacom nástroji, kliknite pravým tlačidlom myši na prvok a vyberte možnosť Skontrolovať prvok.

Vyhľadávací panel pozostáva z kombinácie textového poľa a tlačidla Enter. Zdalo by sa, že dizajn tu ani nie je potrebný – veď hovoríme len o dvoch jednoduchých prvkoch. Na stránkach s veľkým množstvom obsahu je však vyhľadávací panel často dizajnovým prvkom, ktorý návštevníci používajú najčastejšie. Pri otvorení stránky s pomerne zložitou architektúrou sa používatelia okamžite obrátia na vyhľadávací panel, aby sa rýchlo a bezbolestne dostali do cieľa. A potom sa zrazu ukáže, že dizajn linky má veľký význam.

V tomto článku uvidíme, ako sa to dá vylepšiť, aby používateľ strávil minimum času tým, čo hľadá.

Najlepšie postupy

1. Použite ikonu lupy

Do vyhľadávacieho panela nezabudnite pridať vizuálnu značku - ikonu s lupou. Ikony sú podľa definície vizuálnymi reprezentáciami objektu, akcie alebo konceptu. Existuje množstvo ikon, ktorých význam číta drvivá väčšina používateľov. Do tejto kategórie patrí obrázok s lupou.

Používatelia rozpoznávajú informácie, ktoré ikona sprostredkúva, dokonca aj bez titulku

Poradenstvo: použite najjednoduchšiu schematickú verziu obrázka. Čím menej grafických detailov, tým lepšie bude postava rozpoznaná.

2. Umiestnite panel vyhľadávania na viditeľné miesto

Keďže funkcia vyhľadávania je pre stránku alebo aplikáciu taká dôležitá, mala by byť viditeľná – napokon môže používateľa najkratšou cestou doviesť na požadovanú stránku.

Na obrázku vľavo je funkcia vyhľadávania skrytá za ikonou

Je dôležité zobraziť celé pole na zadávanie textu: ak je skryté za ikonou, funkcia vyhľadávania bude menej viditeľná a interakcia bude vyžadovať od používateľa dodatočné úsilie.

Vyhnite sa používaniu postupného rozširovania pre funkciu vyhľadávania – skryje kontext

3. Dajte do vyhľadávacieho panela tlačidlo akcie

Tlačidlo pomáha ľuďom oznámiť, že medzi nimi a akciou je ešte jeden krok, aj keď sa rozhodnú urobiť tento krok stlačením klávesu Enter.

Poradenstvo: Nerobte tlačidlo vyhľadávania príliš malé, aby naň používatelia nemuseli zacieliť kurzorom. Čím viac miesta zaberá, tým je ľahšie si ho všimnúť a kliknúť.

Poskytnite používateľom možnosť spustiť vyhľadávanie buď pomocou klávesu Enter, alebo kliknutím na tlačidlo. Mnohí si zachovávajú zvyk stlačiť tlačidlo na spustenie procesu.

4. Pridajte panel vyhľadávania na každú stránku

Používateľom by ste mali dôsledne poskytovať prístup k vyhľadávaciemu panelu na ktorejkoľvek stránke lokality. Ak totiž používateľ nevidí, čo potrebuje, skúsi použiť vyhľadávanie, nech je kdekoľvek.

5. Vyhľadávací panel by mal byť jednoduchý

Pri navrhovaní vyhľadávacieho panela sa uistite, že vyzerá ako sám a je ľahko použiteľný. Štúdie použiteľnosti zistili, že pre používateľa je pohodlnejšie mať rozšírené možnosti vyhľadávania predvolene skryté. Ich zobrazením (ako v príklade boolovského vyhľadávania nižšie) riskujete, že zmiatnete ľudí, ktorí sa pokúšajú zadať dopyt.

boolovské vyhľadávanie

6. Umiestnite vyhľadávací panel tam, kde ho očakávate

Je zlé, keď sú používatelia nútení hľadať hľadaný reťazec – to znamená, že nepriťahuje pohľad a na stránke sa stráca.

Obrázok nižšie je prevzatý zo štúdie A. Dawn Shaikh a Keisi Lenz a ukazuje, kde na obrazovke používatelia očakávajú, že uvidia panel vyhľadávania. Tieto údaje boli získané na základe prieskumu medzi 142 respondentmi. Podľa štúdie sú najúspešnejšie oblasti v pravom hornom a ľavom hornom rohu obrazovky: tam je pre používateľov najpohodlnejšie nájsť hľadaný reťazec podľa štandardného F-vzoru.

Na obrázku je znázornené, ktoré oblasti obrazovky ľudia zvyčajne vyhľadávajú ako prvé. Pravý horný roh je stále vo vedení

Vyhľadávací panel teda umiestnite do pravého horného rohu alebo do hornej časti obrazovky do stredu – takže si môžete byť istí, že jeho umiestnenie splní očakávania používateľov.

Na stránkach YouTube s bohatým obsahom je panel vyhľadávania v strede hore na obrazovke

Poraďte:

• V ideálnom prípade by panel vyhľadávania mal ladiť s celkovým dizajnom stránky ako celku, no v prípade potreby by mal trochu vyčnievať.
• Čím viac obsahu na svojej stránke máte, tým výraznejšie by mal byť vyhľadávací panel. Ak je vyhľadávanie kľúčovou funkciou vašej stránky, nešetrite na kontrastoch – vstupné pole a ikona by mali vyniknúť na pozadí aj medzi prvkami okolo nich.

7. Primeraná dĺžka vedenia

Príliš krátke vstupné pole je častou chybou dizajnérov. Používateľovi to samozrejme nezabráni v zadávaní dlhého dopytu, ale bude viditeľná len jeho časť, a to je zlé z hľadiska použiteľnosti, keďže to komplikuje proces kontroly a úpravy zadaného textu. V skutočnosti, keď sa vo vyhľadávacom paneli zobrazuje príliš málo znakov, používatelia sú nútení používať krátke, nepresné dopyty, jednoducho preto, že tie dlhé bude ťažké a nepohodlné znovu prečítať. Ak sa veľkosť poľa zhoduje s očakávanou dĺžkou požiadaviek, potom je práca s nimi oveľa jednoduchšia.

Všeobecným pravidlom je, že do vstupného riadku by sa malo zmestiť 27 znakov (stačí na 90 % dopytov).

Amazon má vyhľadávací reťazec správnej dĺžky

Poradenstvo: Zvážte implementáciu reťazca, ktorý sa po kliknutí rozbalí. Týmto spôsobom môžete ušetriť miesto na obrazovke a zároveň poskytnúť dostatok vizuálnych podnetov pre používateľa, aby rýchlo našiel pole a vykonal vyhľadávanie.

8. Použite mechanizmus automatického dopĺňania

Mechanizmus automatického dopĺňania pomáha používateľovi vybrať požadovaný dopyt tým, že sa ho snaží predpovedať na základe už zadanej časti textu. Je potrebné nie urýchliť proces, ale usmerniť používateľa a pomôcť mu správne sformulovať požiadavku. Bežný používateľ má s tým veľký problém; ak nenájde to, čo hľadá na prvýkrát, ďalšie pokusy majú tendenciu zlyhať. Často sa ľudia jednoducho vzdajú. Automatické dopĺňanie – ak je samozrejme dobre nastavené – nabáda používateľov, aby používali vhodnejšie dopyty.

Vyhľadávací nástroj Google si tento vzor osvojil veľmi dobre, prvýkrát ho predstavil už v roku 2008. Je bežné, že používatelia používajú rovnaké dopyty viackrát, takže ukladaním ich histórie vyhľadávania šetrí Google čas a zlepšuje používateľskú skúsenosť.

Poraďte:

• Uistite sa, že funkcia automatického dopĺňania je skutočne užitočná. Ak je zle vykonaný, bude to len rozptyľovať a zmiasť používateľov. Preto používajte automatické opravy, rozpoznávanie koreňov a prediktívne zadávanie textu, aby bol nástroj kvalitný.
• Ponúknite možnosti automatického dopĺňania čo najrýchlejšie (niekde za tretím znakom), aby ste okamžite navrhli správne informácie a ušetrili používateľa od zadávania nepotrebných údajov.
• Zobrazujte maximálne 10 možností (a nepoužívajte posúvač), aby ste používateľa nezahltili informáciami.
• Prispôsobte si navigáciu pomocou klávesnice v zozname možností. Po dosiahnutí posledného bodu by mal byť používateľ schopný prejsť na začiatok. Stlačením klávesu Esc sa zoznam zbalí.
• Ukážte rozdiel medzi zadaným textom a navrhovanými údajmi. Napríklad zadaný text má štandardné písmo a časť voľby, ktorá sa automaticky vyplní, je tučná.

Automatické dopĺňanie šetrí čas používateľa a môže dokonca navrhnúť lepšie znenie

9. Majte jasno v tom, čo hľadať

Dobrým nápadom je zobraziť príklad vyhľadávacieho dopytu vo vstupnom poli: týmto spôsobom môžete používateľom sprostredkovať, na čo presne môžu túto funkciu použiť. Ak môže používateľ vyhľadávať podľa rôznych kritérií, povedzte mu o tom pomocou špeciálneho vzoru (ako v príklade zo stránky IMDB nižšie). HTML5 uľahčuje pridávanie textu, ktorý sa predvolene zobrazí v neaktívnom vyhľadávacom paneli.

Poradenstvo: Obmedzte sa na pár slov, inak namiesto minimalizácie kognitívnej záťaže ju len zvýšite.

Záver

Vyhľadávanie je základným typom činnosti a kľúčovým komponentom pri vytváraní informačne bohatej aplikácie alebo webovej stránky. Aj malé zmeny, ako je veľkosť poľa alebo špecifikácia toho, čo by sa do neho malo zadať, môžu výrazne zlepšiť použiteľnosť vyhľadávania a celkovú kvalitu UX.

Bol som kritizovaný, hovoria, že rozloženie je na hovno, ale existujú moderné HTML5 a CSS3.

Samozrejme, chápem, najnovšie štandardy sú cool a tak ďalej. Faktom však je, že spravidla robím sadzbu na objednávku a vo väčšine prípadov je dôležitá úplná identita v rôznych prehliadačoch, čo neumožňuje používať najnovšie technológie. Zameriavam sa preto predovšetkým na kompatibilitu medzi prehliadačmi a vyhľadávací formulár som si zo zvyku vymyslel „po starom“.

Vo všeobecnosti týmto príspevkom opravujem situáciu (kvôli tým, ktorí boli nespokojní s posledným článkom =) a ponúkam svoju verziu rozloženia rovnakého vyhľadávacieho formulára, ale pomocou technológií HTML5 a CSS3.

Príklad toho, čo sa stane ako výsledok, je možný.

Čo stratíme pri rozložení tohto formulára pomocou HTML5 a CSS3

1. IE9 a nižšie – neuvidí predvolený text (atribút zástupného symbolu).
2. IE8 a nižšie - neuvidí zaoblené rohy a vnútorné tiene.
3. IE7 - musíte preň zadať inú šírku formulára, pretože nepodporuje vlastnosť box-sizing.
4. IE6 - ale to vôbec neberieme do úvahy =)

V iných moderných prehliadačoch je všetko v poriadku. Verím, že vyššie uvedené nedostatky nie sú kritické, preto by som pre moju stránku smelo použil formulár zostavený pomocou najnovších technológií.

HTML kód vyhľadávacieho formulára

Vyzerá to takto:

Oproti formuláru z predchádzajúceho článku sú v súlade s technológiou HTML5 vykonané tieto zmeny:

1. Atribút type="text" bol nahradený atribútom type="search" .
2. Vložený skript nahradený zástupným symbolom="(!LANG:search" .!}

CSS kód

Tu sú všetky potrebné štýly s komentármi:

Hľadať ( /* nastaviť požadovanú šírku formulára v závislosti od dizajnu ** formulár sa bez problémov natiahne */ šírka: 35%; /* tlačidlo odoslať bude umiestnené absolútne, ** takže táto vlastnosť je potrebná */ poloha: relatívne; ) .search input ( /* zakázať okraje na vstupoch */ border: none; ) /* štýly pre vstupné pole */ .search .input ( /* roztiahnuť vstupné pole na celú šírku formulára */ šírka : 100 %; /* kvôli hornému (8px) a spodnému (9px) odsadeniu ** upraviť výšku formulára ** odsadenie vpravo (37px) viac ako ľavé, ** pretože tlačidlo Odoslať bude umiestnené tam */ padding: 8px 37px 9px 15px; /* na zahrnutie šírky vstupného poľa (100%) vloženého výplne */ -moz-box-sizing: border-box; box-sizing: border-box; / * pridať vložené tiene */ box-shadow: inset 0 0 5px rgba(0,0 ,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); /* zaoblené rohy */ border-radius: 20px; pozadie: #EEE; font: 13px Tahoma, Arial, bezpätkové; farba: #555; obrys: žiadny; ) /* zmena vzhľadu vstupného poľa pri zameraní */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0,4 ); pozadie: #E8E8E8; farba: #333; ) /* štýl tlačidla odoslania */ .search .submit ( /* umiestnenie tlačidla úplne od pravého okraja formulára */ poloha: absolútna; hore: 0; vpravo: 0; šírka: 37px; /* roztiahnuť tlačidlo na celú výšku formulára */ výška: 100 %; kurzor: ukazovateľ; pozadie: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50 % bez opakovania; /* pridať priehľadnosť tlačidlu Odoslať */ nepriehľadnosť: 0,5; ) /* zmeniť priehľadnosť tlačidla Odoslať pri umiestnení kurzora myši */ .vyhľadať .submit:hover ( opacity: 0.8; ) /* táto vlastnosť je potrebná na to, aby prehliadače ** Chrome a Safari mohli upravovať vstupy */ input ( -webkit-appearance: none; )

A štýly pre IE pod verziou 9:

/* nastavenie samostatných štýlov pre IE pod verziou 9 */ *+html .search ( /* pre IE7 upravte šírku pre iné prehliadače a pridajte pravú ** výplň, aby sa tlačidlo odoslania zmestilo na miesto */ šírka: 28 %; výplň : 0 52px 0 0; ) .search .input ( border: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( border: 1px plný #CFCFCF; border-top: 1px plný #999; ) .search .submit ( filter: alpha(opacity=50); ) .search .submit:hover ( filter: alpha(opacity=80); )

P.S.Ďakujeme kritikom za komentáre k predchádzajúcemu článku! Vďaka vám mám v hlave niekoľko nových momentov rozloženia.