Cum se scrie un șir de căutare în html. Câmp de căutare drop-down

Caseta de cautare pentru site este unul dintre cele mai importante elemente ale interfeței cu utilizatorul de pe o pagină web. Cu acesta, utilizatorul poate găsi conținutul dorit pe site-ul dvs.

În acest tutorial, veți învăța cum să creați un marcaj pentru o casetă de căutare folosind HTML5, precum și cum să stilați elementele de formular folosind puterea CSS3 fără utilizarea de scripturi.

1. Marcaj HTML

Element

este un container pentru formularul de căutare, câmpul de căutare este creat folosind elementul sau , iar butonul pentru trimiterea datelor către server poate fi creat folosind elementul sau
* (dimensiunea casetei: border-box;) formular (poziție: relativă; lățime: 300px; margine: 0 automat; ) intrare ( lățime: 100%; înălțime: 42px; padding-left: 10px; chenar: 2px solid #7BA7AB ; chenar-rază: 5px; contur: niciunul; fundal: #F9F0DA; culoare: #9E9C9C; ) buton (poziție: absolut; sus: 0; dreapta: 0px; lățime: 42px; înălțime: 42px; chenar: niciunul; fundal: #7BA7AB; chenar-rază: 0 5px 5px 0; cursor: indicator; ) butonul: înainte (conținut: „\f002”; familia de fonturi: FontAwesome; dimensiunea fontului: 16px; culoare: #F9F0DA; )

3. Câmp de căutare cu un buton în interior

* (dimensiunea casetei: border-box;) formular (poziție: relativă; lățime: 300px; margine: 0 auto; ) intrare, buton ( chenar: niciunul; contur: niciunul; raza margine: 3px; ) intrare ( lățime: 100%; înălțime: 42px; fundal: #F9F0DA; umplutură-stânga: 15px; ) buton (înălțime: 26px; lățime: 26px; poziție: absolut; sus: 8px; dreapta: 8px; fundal: #F15B42; cursor: indicator; ) buton:înainte (conținut: „\f105”; familia de fonturi: FontAwesome; culoare: #F9F0DA; dimensiunea fontului: 20px; greutatea fontului: bold; )

4. Câmpul de căutare în stilul „plat”

* (dimensiunea casetei: border-box;) formular (poziție: relativă; lățime: 300px; margine: 0 auto; fundal: #A3D0C3; ) intrare, buton (chenar: niciunul; contur: niciunul; fundal: transparent; ) intrare ( lățime: 100%; înălțime: 42 px; umplutură-stânga: 15 px; ) buton ( înălțime: 42 px; lățime: 42 px; poziție: absolut; sus: 0; dreapta: 0; cursor: indicator; ) buton: înainte ( conținut: „\f002”; familia de fonturi: FontAwesome; dimensiunea fontului: 16px; culoare: #F9F0DA; )

5. Casetă de căutare cu un chenar de jos gros

* (dimensiunea casetei: border-box;) formular (poziție: relativă; lățime: 300px; margine: 0 automat; fundal: #F9F0DA; chenar-bottom: 4px solid #be290e; ) intrare, buton ( chenar: niciunul; contur : niciunul; fundal: transparent; ) introducere ( lățime: 100%; înălțime: 42 px; umplutură-stânga: 15 px; ) buton ( înălțime: 42 px; lățime: 42 px; poziție: absolut; sus: 0; dreapta: 0; cursor: pointer; ) buton:înainte (conținut: „\f178”; familia de fonturi: FontAwesome; dimensiunea fontului: 20px; culoare: #be290e; )

6. Câmp de căutare cu culoarea chenarului se schimbă

* (box-sizing: border-box;) formular (poziție: relativă; lățime: 300px; margine: 0 auto; ) intrare, buton (contur: niciunul; fundal: transparent; ) intrare ( lățime: 100%; înălțime: 42px ; padding-stânga: 15px; chenar: 3px solid #F9F0DA; ) buton ( chenar: niciunul; înălțime: 42px; lățime: 42px; poziție: absolut; sus: 0; dreapta: 0; cursor: indicator; ) buton: înainte ( conținut: „\f002”; familia de fonturi: FontAwesome; dimensiunea fontului: 16px; culoare: #F9F0DA; ) input:focus (culoare chenar: #311c24; )

7. Caseta de căutare glisantă

Câmpul de căutare apare când faceți clic pe butonul pictogramă.

* (box-sizing: border-box;) formular (poziție: relativă; lățime: 300px; margine: 0 auto; înălțime: 42px; ) intrare (înălțime: 42px; lățime: 0; padding: 0 42px 0 15px; chenar: niciunul; chenar-jos: 2px solid transparent; contur: niciunul; fundal: transparent; tranziție: .4s cubic-bezier(0, 0.8, 0, 1); poziție: absolut; sus: 0; dreapta: 0; z-index : 2; ) input:focus ( lățime: 300px; z-index: 1; chenar-jos: 2px solid #F9F0DA; ) buton ( fundal: #683B4D; chenar: niciunul; înălțime: 42px; lățime: 42px; poziție: absolută ; sus: 0; dreapta: 0; cursor: indicator; ) buton: înainte ( conținut: „\f002”; familia de fonturi: FontAwesome; dimensiunea fontului: 16px; culoare: #F9F0DA; )

8. Creșterea câmpului de căutare

* (box-sizing: border-box;) form ( width: auto; float: right; margin-right: 30px; ) intrare ( lățime: 250px; înălțime: 42px; padding-left: 15px; chenar-radius: 42px; chenar: 2px solid #324b4e; fundal: #F9F0DA; contur: niciunul; poziție: relativă; tranziție: .3s liniar; ) input:focus ( lățime: 300px; ) buton ( lățime: 42px; înălțime: 42px; fundal: niciunul; chenar: niciunul; poziție: absolut; sus: -2px; dreapta: 0; ) butonul: înainte (conținut: „\f002”; familia de fonturi: FontAwesome; culoare: #324b4e; )

În acest tutorial, vom crea un formular de căutare drop-down care se potrivește perfect în designul interfeței pentru dispozitivele mobile. Numai CSS va fi folosit pentru a implementa elementul - fără JavaScript sau markup suplimentar. O modalitate simplă și eficientă de a implementa un formular de căutare compact.

Scop

Pe dispozitivele mobile, fiecare pixel contează. Pentru a minimiza spațiul necesar pentru afișarea formularului, acesta va fi afișat inițial într-o formă compactă și va fi extins atunci când primește focalizarea de intrare (:focus ). Această abordare vă permite să economisiți spațiu pentru alte elemente de interfață și conținut.

Marcaj HTML

Formularul folosește HTML5. Codul este foarte simplu:

Resetarea vizualizării implicite a formularului de căutare în browserele Webkit

În mod implicit, în browserele Webkit, formularul de căutare va arăta astfel:

Pentru ca formularul de căutare să arate ca un câmp obișnuit de introducere a textului, trebuie să adăugați următoarele stiluri:

Intrare ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration, input::-webkit- butonul de căutare-anulare (afișare: niciunul; )

Construirea formularului nostru de căutare

Câmpul de intrare va avea o lățime obișnuită de 55 px și se va extinde la 130 px în starea :focus. Proprietatea de tranziție este folosită pentru animație și box-shadow este folosit pentru efectul de strălucire.

Introducere ( fundal: #ededed url(img/search-icon.png) centru fără repetare de 9 px; chenar: solid 1 px #ccc; padding: 9px 10px 9px 32px; lățime: 55px; /* Lățime implicită */ -webkit- border -radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-tranziție: toate .5s; -moz-transition: toate .5s; tranziție: toate .5s; ) input:focus ( lățime : 130px; /* Lățime cu focalizare de intrare */ culoarea fundalului: #fff; culoarea marginii: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box- shadow: 0 0 5px rgba(109.207.246,.5); case-shadow: 0 0 5px rgba(109.207.246,.5); /* efect de strălucire */ )

Exemplul B

În exemplul B, formularul de căutare este redus la minimum - doar pictograma este afișată fără text de completare. Observați că proprietățile de umplutură și lățime ale câmpului de căutare s-au schimbat pentru a forma un buton rotund. Proprietatea color:transparent este folosită pentru a face textul invizibil.

#demo-b input (lățime: 15px; padding-left: 10px; culoare: transparent; cursor: pointer; ) #demo-b input:hover (culoare fundal: #fff; ) #demo-b input:focus ( lățime : 130 px; umplutură-stânga: 32 px; culoare: #000; culoare de fundal: #fff; cursor: automat; )

Compatibilitate browser

Metoda descrisă funcționează în toate browserele majore: Chrome, Firefox, Safari și IE8+. În browserele IE7 și mai vechi, funcționalitatea nu funcționează din cauza lipsei de suport pentru pseudoclasa :focus și tipul câmpului de căutare.

Pentru mulți oameni, eficiența căutării de informații pe internet este chiar picioarele care hrănesc lupul. Unde pot găsi informații actualizate și actualizate? De unde să cumperi mai ieftin și să vinzi mai scump? Unde pot găsi cele mai precise instrucțiuni pentru efectuarea anumitor sarcini? Unde să vizionezi filme online? Pentru a răspunde cât mai corect la aceste și întrebări similare ale utilizatorilor, motoarele de căutare îmbunătățesc de la an la an mecanismele deja sofisticate de prezentare a site-urilor în rezultatele căutării pentru anumite interogări ale utilizatorilor. Scopul motoarelor de căutare este de a duce oamenii către cel mai bun site posibil pentru a obține răspunsuri la întrebările lor.

Pe lângă motoarele de căutare, motoarele de căutare în sine sunt echipate cu filtre de căutare, astfel încât orice utilizator să poată restrânge sfera căutării de informații sau să-și specifice cererea.

Luați în considerare mai jos câteva dintre extensiile de căutare care pot fi adăugate la browserele populare și, ca rezultat, creșteți eficiența căutării de informații pe Internet.

Căutați extensii pentru Google Chrome

Căutați pe site-ul curent

Nu orice site este echipat cu un motor de căutare intern, iar pe astfel de resurse trebuie să alergi mult timp din secțiune în secțiune în căutarea unor informații specifice. Extensia de browser pentru căutarea în cadrul site-ului este un instrument universal care va fi mereu la îndemână, indiferent de site-ul pe care ajungeți. Tot ce trebuie să faceți pentru a găsi informațiile de care aveți nevoie în interiorul unui site este să introduceți o interogare cheie într-un mic câmp de căutare care apare când faceți clic pe butonul de extensie din panoul browserului.

Rezultatele căutării motorului de căutare se vor deschide într-o filă nouă de browser, iar paginile unui anumit site unde apare cuvântul cheie vor fi selectate în ele.

Căutați site-ul actual este încorporat cu un motor de căutare Google preinstalat, dar puteți seta un alt motor de căutare în parametrii extensiei - Yandex, Yahoo sau Bing. Pentru a face acest lucru, apelați meniul contextual de pe butonul de extensie și selectați comanda „Parametri”.

Opțiunile de extensie se vor deschide într-o filă nouă de browser, unde putem selecta un alt motor de căutare. Și deja va căuta în site.

Căutare alternativă Google

Motorul de căutare Yandex oferă inițial posibilitatea de a căuta informații în alte două motoare de căutare - Google și Bing - cu un singur clic, deși linkurile pentru a merge la aceste motoare de căutare, împreună cu interogarea cheie introdusă, se înghesuie în partea de jos a pagina cu rezultatele căutării.

Dar Google este mai egoist în această privință - în rezultatele căutării sale nu se menționează motoarele de căutare concurente. Puteți remedia această situație prin implementarea extensiei Google Chrome Alternative Search în Google Chrome.

În loc să tastați în mod constant anexa la cuvântul cheie „torrent” de fiecare dată pentru a obține rezultate de căutare pentru trackere de torrent, este mai ușor să instalați o extensie specială în aceste scopuri TMS (Torrents MultiSearch).

Butonul de extensie este încorporat în bara de instrumente a browserului și, atunci când se face clic, se va deschide un mic câmp de căutare pentru a introduce o interogare.

Rezultatele căutării apar într-o filă separată, iar acesta va fi conținut găsit doar pe dispozitivele de urmărire a torrentului Runet și nu pe site-uri warez, portaluri software și media sau site-uri oficiale.

În rezultatele căutării pentru trackere torrent, conținutul găsit poate fi filtrat după dimensiunea fișierului sau data de încărcare. Puteți specifica cuvinte cheie suplimentare pentru a restrânge căutarea.

Rezultatele căutării pot fi, de asemenea, vizualizate separat pentru anumite dispozitive de urmărire a torrentului și separat pentru tipuri de conținut, cum ar fi filme, muzică, software.

În plus, extensia TMS este încorporată în meniul contextual al browserului, astfel încât să poți trimite orice cuvânt sau frază evidențiat pe paginile de Internet la căutarea de trackere torrent fără prea multă agitație cu copierea și lipirea.

Căutare în context

Google Chrome a implementat o funcție de căutare contextuală folosind un motor de căutare instalat în browserul implicit. Pentru a crește numărul de motoare de căutare cu care puteți căuta orice cuvânt selectat pe paginile site-urilor, este destinată extensia „Căutare în context”.

Extensia are inițial capacitatea de a căuta în cel mai popular tracker de torrent RuTracker, Wikipedia și portalul media Kinopoisk.Ru.


În parametrii de extensie sunt adăugate și alte motoare de căutare, astfel încât prin intermediul acestora să se poată căuta informații direct din meniul contextual al browserului. Deschideți meniul Google Chrome, selectați „Setări” și accesați secțiunea de extensii instalate în browser.

În lista de extensii, selectați-o pe cea de care avem nevoie - „Căutare context”. Faceți clic pe linkul „Setări”.

Căutați extensii pentru Opera

Caută pe site

Butonul de extensie se află în bara de instrumente a browserului și, făcând clic pe el, puteți apela câmpul de căutare pentru introducerea unei interogări cheie, precum și puteți schimba motorul de căutare.

Yandex și Google preinstalate în setările extensiei pot fi completate cu alte motoare de căutare. Apelați meniul contextual de pe butonul de extensie și selectați comanda „Setări”.

La fel ca și în cazul extensiei Context Search pentru Google Chrome, pentru a adăuga un nou motor de căutare, trebuie să introduceți șirul URL al acestuia.

Torrent MultiSearch

Căutări similare de imagini

Căutarea de imagini similare adaugă o comandă suplimentară la meniul contextual al browserului Opera pentru a căuta imagini similare folosind mai multe motoare de căutare.

Sau va fi prezentată o listă de publicații cu imagini similare.

Căutați extensii pentru Mozilla Firefox

Cautarea site-ului

Ca și în cele două cazuri precedente, există și o extensie specială pentru căutarea în interiorul oricărui site de pe Internet pentru browserul Mozilla Firefox.

Numai în cazul Fire Fox, căutarea pe site este încorporată în câmpul de căutare existent al browserului, adăugând pictograma acesteia sub forma unei lupe roșii în fața pictogramei obișnuite de căutare.

Schimbarea motorului de căutare implicit pentru căutarea Mozilla Firefox obișnuită implică schimbarea motorului de căutare și în cadrul site-urilor.

Extensia Site Search este integrată în meniul contextual Mozilla Firefox, iar selectând orice cuvânt care vă vine la îndemână, puteți vedea toate paginile site-ului în care acest cuvânt este prezent în rezultatele de căutare separate.

Căutare după byffox

Orice produse software cu astfel de nume „neîncă maturate”, de regulă, enervează mulți utilizatori prin faptul că nici măcar nu indică scopul propus al setului de instrumente propus.

Și trebuie să aflați ce oferă exact „Softina din Vasya” sau „Repak a jucat de la Petya” doar după o cunoaștere detaliată a descrierii. Cu toate acestea, în spatele unui nume atât de frivol precum „Search by byffox” se află o funcționalitate utilă și inteligentă. Această extensie vă permite să completați meniul contextual al browserului cu o comandă suplimentară de căutare pentru cuvântul selectat folosind diferite motoare de căutare.

numele cheii parametrului. Pentru câmpul de căutare, „q” sau „text” este cel mai frecvent utilizat. valoarea cheii parametrului. Cel mai adesea nu este setat. Utilizatorul îl poate schimba în propriul text dacă nu sunt specificate atributele de numai citire și dezactivate. modificarea utilizatorului blocat accesul blocat, modificarea utilizatorului și transferul de date al câmpului parametrului curent nu poate fi șablon de intrare gol ca în js expresii regulate, care trebuie urmat pentru a trimite formularul numărul minim de caractere necesar pentru a trimite formularul numărul maxim de caractere pe care utilizatorul le poate introduce lungimea câmpului în caractere indiciu stub tooltip la trecerea mouse-ului completare automată. Browserele moderne afișează termeni de căutare introduși anterior pe domeniul actual. Îl puteți dezactiva sau îl puteți face mai specific. o listă de interogări recomandate este verificată pentru câmpurile de focalizare pentru ortografie și gramatică (adică perioada dintre clic pe un element și clic în afara elementului) obținută atunci când documentul este încărcat

Eliminați crucea „Șterge” din câmpul de căutare, care șterge textul introdus anterior

Cum funcționează formularul de căutare de pe site

Cel mai simplu cod HTML

Dacă introduceți în câmpul „întrebare” și faceți clic pe butonul „Găsiți”, adresa paginii se va schimba din „http://site/2011/06/forma-poiska-po-saitu..html ?text=intrebare", ca aceasta se întâmplă când faceți clic pe un link. Când pagina este încărcată, scriptul verifică datele date parametrii în URL iar când sunt găsite, generează și afișează rezultate de căutare pentru site.

nume="text">

Dar pentru a crește viteza de încărcare a documentului, scriptul care procesează cererea este plasat de obicei pe o singură pagină a site-ului, care va fi redirecționat către dacă adresa sa este specificată în atributul acțiune: „ http://site/search/?text=intrebare.

action="http://site/search/">

Pentru ca scriptul să funcționeze, pot fi necesari parametri suplimentari, care sunt specificați în . Acest câmp nu este afișat.? searchid=808327&text=intrebare.

Deschideți rezultatul formularului într-o filă nouă cu atribut target

target="_blank">

De unde pot obține scriptul de căutare a site-ului?

Poți să folosești

Cea mai simplă opțiune este să redirecționați solicitarea către Google:

Textul butonului: „Căutare”, „Căutare”, „Găsiți”

Dintre cuvintele motivante, „Găsiți” are o formă perfectă și implică faptul că rezultatul căutării va fi neapărat pozitiv.

ARTICOLE SIMILARE