Dezvoltarea unui formular de căutare frumos folosind CSS3. Aspect formular de căutare Formular de căutare frumos pe css3

Câmp de căutare pentru site este unul dintre cele mai importante elemente ale interfeței cu utilizatorul de pe o pagină web. Cu ajutorul acestuia, utilizatorul poate găsi conținutul dorit pe site-ul dvs.

În acest tutorial, veți învăța cum să creați marcajul câmpului de căutare folosind HTML5, precum și cum să stilați elementele de formular folosind puterea CSS3, fără a utiliza scripturi.

1. Marcaj HTML

Căutare

Element

este un container pentru un formular de căutare, câmpul de căutare este creat folosind elementul sau , iar un buton pentru a trimite date către server poate fi creat folosind elementul sau .

Cum este diferit? din ? Ambele câmpuri creează un câmp de text cu o singură linie pentru introducerea textului, dar type="search" este adăugat la standardul HTML5 și este un indiciu semantic pentru browsere. Toate browserele cu excepția Mozilla Firefox, adăugați o cruce de curățare pe teren. Pentru a-l elimina, puteți schimba tipul câmpului în type="text" .

Cum este diferit? din

? Nu există nicio diferență în acțiunea butoanelor de trimitere create folosind prima sau a doua metodă. Diferența este că elementul este un container, prin urmare puteți plasa alte elemente în interiorul acestuia, de exemplu, imagini sau pictograme.

Puteți adăuga text în câmpurile de formular în două moduri:
1)
Culoarea textului afișat va fi gri. Folosind următoarele reguli, puteți seta textul indicativ la orice culoare, puteți schimba stilul și fundalul câmpului. Acești selectori nu pot fi combinați într-o singură regulă, altfel nu vor funcționa.

Intrare::-webkit-input-placeholder ( culoare: #B6C0A5; stil font: italic; fundal: #E0EFCA; ) input:-moz-placeholder (culoare: #B6C0A5; stil font: italic; fundal: #E0EFCA; ) input:-ms-input-placeholder (culoare: #B6C0A5; stil font: cursiv; fundal: #E0EFCA; )

2)
Culoarea textului afișat va fi neagră. Puteți seta culoarea folosind proprietatea culoare, de exemplu:

Intrare (culoare: alb; )

Pentru a afișa pictograme, nu uitați să vă conectați.

2. Câmp de căutare cu butonul pictogramă

* (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; culoare: #9E9C9C; 0; cursor: cursor; buton: înainte (conținut: "\f002"; font-family: 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; bordura-rază: 3px; ) intrare ( lățime: 100%; înălțime: 42px; fundal: #F9F0DA; buton: înainte (conținut: FontAwesome; culoare: #F9F0DA; dimensiunea fontului; : îndrăzneț;

4. Câmp de căutare în stil 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”; font-family: FontAwesome;

5. Câmp de căutare cu 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; ) intrare ( lățime: 100%; înălțime: 42px; umplutură-stânga: 15px; ) buton (înălțime: 42px; lățime: 42px; poziție: absolut; sus: 0; cursor: cursor; ) 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ă

* (dimensiunea casetei: 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 ; umplutură-stânga: 15px; chenar: 3px solid #F9F0DA; buton (chenar: niciunul; lățime: 42px; poziție: absolut; sus: 0; cursor: cursor; ) conținut: "\f002"; font-size: 16px;

7. Câmp de căutare extras

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

* (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; margine de jos: 2px fundal: .4s cubic-bezier(0, 0,8, 1: 2) intrare: focus (lățime: 300px; butonul solid #F9F0DA; ) ( fundal: #683B4D; chenar: niciunul; înălțime: 42px; lățime: 42px; poziție: absolut ; sus: 0; dreapta: 0; cursor: indicator; ) butonul: înainte ( conținut: "\f002 "; font-family: FontAwesome; font-size: 16px; culoare: #F9F0DA; )

8. Extinderea 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; bordura: 2px contur: nicio poziție: liniar: -2px;

Câmpul de căutare este probabil unul dintre cele mai comune elemente ale interfeței cu utilizatorul. Când lucrați la nivelul de confort al interfeței, de foarte multe ori există dorința de a adăuga un câmp de căutare elegant. ÎN această lecție vom crea un astfel de element popular folosind pseudo elemente.

Marcaj HTML

Pentru a pregăti un astfel de câmp, marcarea va fi minimă.

Substituentul special HTML5 și atributele obligatorii sunt folosite aici:

• substituent- acest atribut specifică faptul că textul este afișat în câmp înainte ca câmpul să primească focus de intrare, apoi textul este ascuns.
• necesar- acest atribut specifică condiție prealabilă disponibilitatea informațiilor în câmpul de introducere înainte de trimiterea formularului.

HTML5 are, de asemenea, o nouă semnificație pentru atributul type: type="search" . Dar este slab acceptat în browsere, așa că nu îl vom folosi deocamdată.

Elementele HTML, cum ar fi img și input, nu au conținut. Prin urmare, un pseudo-element precum:before nu va afișa nicio săgeată pentru buton.

Soluția la această problemă în cazul nostru este să folosim butonul type="submit" în loc de input type="submit" . Astfel păstrăm formularul folosind tasta ENTER.

CSS

Mai jos sunt stilurile necesare pentru demonstrația noastră:

Anulați împachetarea textului

Cf:before, .cf:after( continut:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )

Elemente de formă

Prefixele browserului nu sunt afișate în cod pentru o mai bună claritate. Puteți vedea codul complet în textul sursă.

/* Stiluri pentru containerul formular */ .form-wrapper ( lățime: 450px; padding: 15px; margine: 150px auto 50px automat; fundal: #444; fundal: rgba(0,0,0,.2); chenar- rază: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2) /* Stiluri de introducere a textului */ .form-wrapper input ( lățime: 330px; ; padding: 10px 5px: bold 15px "trebuchet MS": 3px 0 3px .form-wrapper: focus: 0 0 2px rgba(0,0,0,.8) inset; .form-wrapper input::-webkit -input-placeholder (color: #999; font-weight: normal; font-style: italic; ) . intrare form-wrapper:-moz-placeholder (culoare: #999; greutate font: normal; stil font: cursiv ; ) .form-wrapper input:-ms-input-placeholder (culoare: #999; greutate font: normal; font-style: italic ) /* Buton de trimitere formular */ .form-wrapper button ( overflow: vizibil; poziție: float relativ: dreapta;

chenar: 0;

• umplutură: 0;

  cursor: pointer;

  font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";

  Și este puțin diferit în browserele bazate pe motorul webkit (Chrome, Safari):

  Câmp de căutare în webkit

  După cum puteți vedea, atunci când vă concentrați pe un câmp, se adaugă o evidențiere, iar când introduceți text, apare un buton clar când faceți clic pe el, conținutul câmpului este șters, ceea ce în sine este destul de convenabil;

  Fără stilul CSS, formularul nostru de căutare pare destul de simplu deocamdată, în acest articol vom încerca să facem ceva de genul acesta:

  
  De exemplu: aspectul formularului de căutare

  Dacă nu există planuri de a accepta browsere mai vechi, un element nesemantic gol

  poate fi înlocuit cu pseudo-elementul:before .

  Caracteristici ale designului formularului de căutare

  Deoarece am decis să folosesc destul de multe proprietăți CSS3, aceste miracole nu vor funcționa în browserele Internet Explorer mai vechi și pentru a obține compatibilitatea între browsere, trebuie să conectați cârje, să faceți ceva cu imagini etc.

  În primul rând, aș dori să atrag atenția asupra unor caracteristici, și anume:

  • stilizare în browsere bazate pe motorul webkit
  • stilul substituentului

  Căutați stiluri de formular în browserele Chrome, Safari

  Să adăugăm ceva stil câmpului cu clasa .search:

  Căutare ( fundal: #d8e6ef; chenar: 1px solid #000; )

  Rezultat în captura de ecran:

  Căutați în browserele FF, Opera, Chrome și Safari

  Ca de obicei, există ezitare și confuzie în browsere în Chrome, chenarul funcționează cumva ciudat (marginile apar ca și cum am fi setați padding), în timp ce Safari ignoră complet regulile. Dar există o soluție pentru această situație, adăugați următoarea regulă la codul CSS:

  Căutare ( -webkit-appearance: none; )

  Acum totul este normal în webkit-uri, dar încă diferă în evidențierea câmpurilor atunci când sunt focalizate implicit și butonul de ștergere. Aceste elemente, deși adesea convenabile, uneori pot strica intenția de proiectare și trebuie să fie dezactivate. Îndepărtarea luminii de fundal este foarte ușoară:

  Căutare:focus (contur: niciunul; /* a eliminat evidențierea focalizării */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow : inset 0 0 2px #000 box-shadow: inset 0 0 2px #000 /* a adăugat umbră interioară pentru toate browserele */ )

  Tot ce rămâne este să scapi de butonul de ștergere. De fapt, poate fi stilizat cu ușurință prin înlocuirea unei cruci simple cu un fel de fundal, poziționând-o etc., dar în exemplul meu nu va fi nevoie de el:

  /* regulă numai pentru un element cu clasa de căutare */ .search::-webkit-search-cancel-button (afișare: niciunul; /* a eliminat butonul de ștergere */ ) /* sau pentru toate câmpurile cu tipul de căutare în documentul */ input ::-webkit-search-cancel-button (afișare: niciunul; )

  Proiectarea unui substituent pentru indicații de tip text

  Din păcate, cu sugestia textului, totul este puțin mai complicat decât pare la prima vedere. În primul rând, nu funcționează în IE9, ca să nu mai vorbim de browserele mai vechi, așa că în locurile critice în care ceva text în domeniu este absolut necesar, ar trebui să utilizați JavaScript. În al doilea rând, substituentul este prost proiectat în browserele Firefox, Chrome, Safari și nu se pretează deloc la Opera:

  :-moz-placeholder ( culoare: #304e62; /* a schimbat culoarea în FF */ ) ::-webkit-input-placeholder ( culoare: #304e62; /* a schimbat culoarea în webkit */ )

  Vă rugăm să rețineți că acești selectori nu vor funcționa dacă sunt enumerați separat prin virgule, fiecare trebuie să înceapă pe o linie nouă.

  Am luat în considerare momentele speciale în care ar putea apărea dificultăți, restul piesei nu ar trebui să provoace probleme unui layout designer mai mult sau mai puțin experimentat.

  Scripturi jQuery

  În cele din urmă, să adăugăm câteva scripturi în formularul nostru, și anume:

  • vom anula cererea și vom afișa un mesaj de eroare la trimiterea unui câmp gol
  • când ne concentrăm pe teren, vom adăuga un mic sfat instrument în partea de jos

  Este foarte ușor să implementezi toate acestea folosind puterea jQ, am primit următorul cod cu comentarii:

  $(function() ( /* procesează trimiterea formularului */ $(".search-form").submit(function() ( var errVal = "cerere goală"; /* Dacă câmpul este gol sau conține valoarea errVal */ if( $(".search").val() == "" || $(".search").val() == errVal) ( /* adaugă errVal la câmp, schimbă culoarea de fundal și */ $(" .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)"); /* return false - formularul nu este trimis */ return false ; )); / * când câmpul este focalizat */ $(".search").focus(function() ( /* setează câmpul la valoarea originală */ $( this).val("").css((backgroundColor: "#d8e6ef")); /* show tooltip */ $(".notice").fadeIn(400 )); ".căutare").blur(function( ) ( /* elimină tooltip */ $(".notice").fadeOut(400); ));

  Desigur, cel mai bine este să înlocuiți clasele într-un script cu identificatori pentru o operare mai rapidă a scriptului și chiar dacă în document apar alte elemente cu aceleași clase, acestea nu vor întrerupe funcționarea scriptului.

  Rezultate

  Astfel, am proiectat și programat un formular de căutare pentru site, funcționând în cele mai recente versiuni de Firefox, Chrome, Opera, Safari și IE9+. Dacă vrei cu adevărat, poți face o versiune mai mult sau mai puțin cross-browser, începând cu IE6.

  Verificat

  • Internet Explorer 9+
  • Operă
  • Firefox
  • Chrome
  • Safari

  Ajută proiectul

Am fost criticat, spunând că aspectul este nasol, dar există HTML5 și CSS3 modern.

Desigur, am înțeles, cele mai recente standarde sunt cool și toate astea. Dar adevărul este că eu, de regulă, fac machete la comandă, iar în majoritatea cazurilor este importantă identitatea completă în diferite browsere, ceea ce nu permite utilizarea celor mai noi tehnologii. Prin urmare, mă concentrez în primul rând pe compatibilitatea între browsere și, din obișnuință, am așezat formularul de căutare „în mod vechi”.

În general, prin această postare corectez situația (de dragul celor nemulțumiți de articolul anterior =) și ofer propria mea versiune a aspectului aceluiași formular de căutare, dar folosind tehnologii HTML5 și CSS3.

Un exemplu despre ceea ce se va întâmpla ca urmare este disponibil.

Ce pierdem atunci când proiectăm acest formular folosind HTML5 și CSS3?

1. IE9 și mai jos - nu vom vedea textul implicit (atribut substituent).
2. IE8 și mai jos - nu vom vedea colțuri rotunjite și umbre interioare.
3. IE7 - trebuie să specificați o lățime diferită a formularului, deoarece... nu acceptă proprietatea de dimensionare a casetei.
4. IE6 - dar nu luăm în considerare deloc =)

În alte browsere moderne, totul este bine. Consider că deficiențele de mai sus nu sunt critice, așa că pentru site-ul meu aș folosi în siguranță un formular conceput folosind cele mai noi tehnologii.

Codul HTML din formularul de căutare

Arata cam asa:

În comparație cu formularul din articolul anterior, s-au făcut următoarele modificări în conformitate cu tehnologia HTML5:

1. Atributul type="text" a fost înlocuit cu type="search" .
2. Scriptul inline a fost înlocuit cu placeholder="search" .!}

Cod CSS

Iată toate stilurile necesare cu comentarii:

Caută ( /* setează lățimea necesară a formularului în funcție de design ** formularul se întinde fără probleme */ lățime: 35%; /* vom poziționa butonul de trimitere absolut, ** de aceea această proprietate este necesară */ poziție: relativ; ) .search input ( /* dezactivează chenarele pentru intrări */ border: none; ) /* stiluri pentru câmpul de intrare */ .search .input ( /* întinde câmpul de introducere pe toată lățimea formularului */ width : 100% /* datorită căptușelii interioare de sus (8px) și de jos (9px) ** ajustați înălțimea formularului ** faceți căptușeala interioară din dreapta (37px) mai mare decât cea din stânga, ** butonul de trimitere va fi plasat acolo */ padding: 8px 37px 9px 15px /* astfel încât lățimea câmpului de introducere (100%) include padding-ul interior */ -moz-box-sizing: border-box-sizing: border; -box; /* adaugă umbre interioare */ box-shadow: inset 0 0 5px rgba(0,0 ,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); / border-radius: 20px font: 13px Tahoma, Arial, culoare sans-serif: #555;

contur: niciunul; ) /* schimbă designul câmpului de intrare când este focalizat */ .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 ); fundal: #E8E8E8; culoare: #333 ) /* proiectează butonul de trimitere */ .search .submit ( /* poziționează butonul absolut din partea dreaptă a formularului */ poziție: absolut: 0; dreapta: 0; lățime: 37px /* întinde butonul la înălțimea completă a formularului */ înălțime: 50% nu se repetă */ opacitate; ; ) /* când treceți cursorul, modificați transparența butonului de trimitere */ .search .submit:hover ( opacitate: 0.8; ) /* această proprietate este necesară pentru ca în browsere ** Chrome și Safari să puteți stila intrările */ intrare ( -webkit-aspect: niciunul; )

Și stiluri pentru IE sub versiunea 9:

/* setați stiluri separate pentru browserele IE sub versiunea 9 */ *+html .search ( /* pentru IE7 ajustează lățimea la alte browsere și adaugă o umplutură ** dreapta, astfel încât butonul de trimitere să fie la locul lor */ lățime: 28 % ; padding: 0 52px 0 0; .search .input ( chenar: 1px solid #DFDFDF; margine-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input ( border: 1px solid #CFCFCF; border-top: 1px solid #999; .search .submit (filtru: alpha(opacity=50); )search .submit:hover (filter: alpha(opacity=80); ) Mulțumim criticilor pentru comentariile lor la articolul anterior! Datorită ție, mi s-au blocat câteva puncte noi de aspect.

O casetă de căutare este una dintre componentele principale ale site-ului web care definesc și îmbunătățesc interfața cu utilizatorul a unui site web. Fără îndoială, un formular de căutare este o componentă foarte necesară a unui site web bine structurat pentru a-și îmbunătăți gradul de utilizare în rândul utilizatorilor. Acest element de bază al interfeței cu utilizatorul servește diferitelor scopuri, ajutând vizitatorii să navigheze cu ușurință prin site-ul web pentru a găsi exact ceea ce caută.

În primul rând, această componentă de căutare pe o singură linie este de obicei plasată vizibil pe bara de navigare sau uneori ascunsă sub o pictogramă obișnuită care oferă o mulțime de avantaje; de asemenea, economisește mult timp, face site-ul ușor de utilizat, îmbunătățește navigarea și experiența utilizatorului. În cele din urmă, cireasa de pe tort este că este foarte ușor să creezi o casetă de căutare.

Dacă vă numărați printre proprietarii de site-uri web care nu au încă o casetă de căutare pe site-ul lor sau sunt în căutarea unor forme de căutare mai bune pentru a le înlocui pe cele originale, atunci acest tutorial enumerat cu cele mai bune scripturi de formulare de căutare CSS3, HTML și jQuery ar putea ajuta la îndeplinirea scopului dvs.

Înainte de a merge la lista celor mai bune tutoriale/scripturi pentru formularele de căutare Bootstrap, CSS3, HTML5 și jQuery, să știm de ce este atât de important formularul de căutare pe un site web.

O privire asupra beneficiilor formularului de căutare într-un site web:

1. Site-ul web devine mai interactiv și mai ușor de utilizat

1. Îmbunătățește experiența utilizatorului

1. Permite navigarea pe întregul site

1. Simplifică procesul de căutare prin direcționarea cu ușurință a utilizatorului către secțiunea dorită

1. Economisește timp și bani

Am compilat o listă cu cele mai bune formulare de căutare CSS3, HTML5 și jQuery neplătite disponibile online, care pot fi folosite pentru a crea cu ușurință o casetă de căutare de la zero.

Explorați 2,5 milioane de active digitale, inclusiv cele mai bune teme WordPress din 2018

Peste 2 milioane de articole de pe cea mai mare piață din lume pentru șabloane, teme și elemente de design HTML5. Indiferent dacă de asta aveți nevoie, fie că doriți doar câteva fotografii de stoc - toate acestea pot fi găsite aici la Envato Market.

DESCARCĂ ACUM

Formular de căutare Colorlib v1

Vă oferim o colecție uimitoare de exemple remarcabile de formulare de căutare gratuite pe care le puteți utiliza pentru o varietate de scopuri diferite. Acesta este ideal pentru site-uri web legate de călătorii, precum și pentru directoare. Cu un fundal de imagine pe tot ecranul, puteți crea o atmosferă minunată care se traduce într-o experiență plăcută de căutare. De asemenea, puteți ajusta formularul și îl puteți face să urmeze regulamentele dvs. de branding fără a transpira. În loc să creezi unul de la zero, poți acum să accelerezi procesul și să adaugi în spațiul tău web această formă ingenioasă de oraș. Mergeți la pagina de previzualizare live și apoi apăsați butonul de descărcare.

Formular de căutare Colorlib v2

Ca platformă de călătorie, cu siguranță doriți să oferiți utilizatorilor funcții de căutare solide. Dacă vă concentrați în primul rând pe hoteluri, acest formular de căutare ucigaș vă va face bine. Are un design web complet flexibil și receptiv, care își remodelează instantaneu structura pe orice dispozitiv. Într-adevăr, Colorlib Search Form v2 funcționează pe smartphone-uri, tablete și desktop-uri ca de vis.

În plus, șablonul are și selecționare de date, precum și o opțiune de a alege câte persoane vor călători. Implementați-l pe site-ul dvs. web existent și oferiți-le vizitatorilor și clienților potențiali ceva mai mult. Cu rezultate de căutare adecvate, ei își pot rezerva rapid călătoria și pot crește entuziasmul.

Formular de căutare Colorlib v3

Formularul de căutare Colorlib v3 este un exemplu de formular de căutare gratuit pentru cineva care conduce un magazin online. Și dacă utilizați setările implicite, Formularul de căutare Colorlib v3 este cel mai bun pentru site-urile de comerț electronic de modă și îmbrăcăminte. Desigur, veți avea o briză să corectați setările și să faceți ca șablonul să vă urmeze cu precizie regulile și reglementările. Este un formular simplu de utilizat pe care îl puteți pune în joc fără a avea nicio problemă. La urma urmei, Formularul de căutare Colorlib v3 este complet gratuit, gata și setat pentru ca dvs. să vă avantajeze foarte mult. Implică-te acum și bucură-te de rezultate.

Formular de căutare Colorlib v4

Ești în curs de a crea un magazin online de îmbrăcăminte? Dacă acesta este cazul și doar adăugați ultimele retușuri finale, condimentați lucrurile cu acest exemplu de formular de căutare HTML5 gratuit. Nu doar condimentați, ci și accelerați. La urma urmei, acum nu mai trebuie să creați un formular de căutare de la zero. Aveți totul configurat și gata de plecare, la doar un clic distanță. Puteți chiar să creați o pagină separată, care va fi despre formularul de căutare, cu un fundal de imagine pe tot ecranul. Chiar sub formular, puteți enumera și cele mai căutate cuvinte cheie sau le puteți lega la alte secțiuni și categorii ale site-ului dvs. de comerț electronic.

Formular de căutare Colorlib v5

Frumoase și practice, acestea sunt cele două caracteristici principale ale Colorlib Search Form v5. Acest șablon de formular de căutare gratuit este uimitor de flexibil, perfect pentru cineva care se află pe dispozitivul său mobil, precum și pentru utilizatorii de desktop. Formularul de căutare Colorlib v5 are un fundal îndrăzneț cu imagine care îmbunătățește experiența. Puteți face ca lucrurile să avanseze imediat, doar apăsați butonul de descărcare acum și începeți să introduceți acest șablon de căutare minunat în magazinul dvs. web deja uluitor. Rețineți, deși Colorlib Search Form v5 este simplu de utilizat, cunoștințele de bază de codare sunt necesare pentru a putea lucra cu acesta cu succes.

Formular de căutare Colorlib v6

Formularul de căutare Colorlib v6 este un alt șablon de formular de căutare gratuit modern și sofisticat, ideal pentru magazinele care promovează articole de modă și accesorii. Într-adevăr, dacă săpați aspectul, dar doriți să îl utilizați pentru altceva, nu ezitați să mergeți complet împotriva normei cu acesta. Formularul de căutare Colorlib v6 are o bară de căutare rotunjită cu opțiunea de a adăuga text deasupra și dedesubt. Imaginea de fundal îi oferă un avantaj, făcând funcția de căutare de pe pagina dvs. mai atrăgătoare pentru ochi. Desigur, Formularul de căutare Colorlib v6 este, de asemenea, pe deplin receptiv și pregătit pentru mobil, așa cum puteți vedea pe pagina de previzualizare live a șablonului.

Formular de căutare Colorlib v7

Dacă sunteți interesat să adăugați un formular de căutare mai avansat pe platforma dvs. web, mai bine nu ratați să verificați Formularul de căutare Colorlib v7. Pe lângă funcția de căutare de bază, există și o opțiune avansată care acoperă șase câmpuri diferite. O altă caracteristică interesantă a acestui exemplu de formular de căutare gratuit este butonul de ștergere. Setează toate câmpurile la valorile implicite, astfel încât să nu fie nevoie să le ștergeți pe toate manual. Foarte convenabil într-adevăr. Există, de asemenea, un contor de rezultate care arată câte articole sunt disponibile pentru cuvântul cheie care vă interesează.

Formular de căutare Colorlib v8

Aveți nevoie de și mai multe exemple de formulare de căutare gratuite bazate pe CSS3 și HTML5? Dacă acesta este cazul, ei bine, continuați să derulați și să vă bucurați de tot conținutul uimitor pe care îl aducem la masă. Iată o altă soluție fantastică pentru magazinele de modă cu o funcție de căutare avansată și fundal de imagine. Similar cu șablonul anterior, acesta are, de asemenea, un buton care resetează parametrii de căutare la implicit. Alături de bara principală de căutare, există șase câmpuri suplimentare de completat și de a obține cele mai precise rezultate posibile. De asemenea, forma are un finisaj frumos închis la culoare, ceea ce o face mai elegantă.

Formular de căutare Colorlib v9

Formularul de căutare Colorlib v9 este un formular de căutare gratuit, multifuncțional, pe care îl puteți utiliza pentru o varietate de obiective diferite. Dacă rulați un spațiu web cu o mulțime de conținut și elemente în curs, o funcție de căutare avansată ar fi foarte utilă. Și acesta este ceva ce oferă Colorlib Search Form v9. Are un aspect profesional și sofisticat pe care îl puteți modifica fără efort, făcându-l să urmeze cu precizie reglementările dvs. de branding. Dar dacă îți place să iasă din cutie, folosește-l așa cum este și termină de implementat în pagina ta într-o clipă de deget.

Formular de căutare Colorlib v10

Un șablon de formular de căutare gratuit îngrijit, contemporan și complet flexibil, cu un efect de gradient pentru a condimenta puțin lucrurile. Acest instrument nu numai că vă va deosebi cu ușurință de concurență și va crea o experiență încântătoare, dar vine și cu o secțiune suplimentară de căutare avansată. Alături de bara principală de căutare (cu margini rotunjite), există șase câmpuri suplimentare cu o opțiune derulantă pe care o puteți modifica în funcție de preferințele dvs. de afaceri. Și pentru a face căutările repetate mai confortabile, există și un buton de resetare inclus în aspect. Nu uitați să verificați Formularul de căutare Colorlib v10 pe mobil și să vedeți cât de bine își remodelează structura.

Formular de căutare Colorlib v11

Hoteluri și alte companii de cazare, Formularul de căutare Colorlib v11 este un instrument ingenios și ușor de utilizat, care vă va face excepțional de bine. Rețineți că designul funcționează și pentru zboruri, închiriere de mașini și multe altele. Dacă construiți o pagină, aspect după aspect, bloc cu bloc, mai bine vă economisiți timp cu modele predefinite. Acest șablon de formular de căutare gratuit este plin de bunătăți care vă vor ajuta să mergeți în puțin timp sau în cel mai scurt timp. Primul lucru este în primul rând, zboară un fundal de imagine. Folosește-l strategic și le vei capta atenția într-o clipă. În plus, Formularul de căutare Colorlib v11 cuprinde, de asemenea, toate secțiunile necesare pentru o căutare rapidă și confortabilă.

Formular de căutare Colorlib v12

Un alt șablon remarcabil de formular de căutare gratuit pentru hoteluri, zboruri și închirieri de mașini, cu un aspect receptiv și complet adaptat pentru dispozitive mobile. Vine cu diferite opțiuni pentru căutări rapide, precum și cu selecții de date pentru check-in și check-out. Formularul este echipat cu un cadru gradient transparent cu un fundal de imagine. Dacă doriți să săriți peste elementele de bază și să creați un aspect mai modernist, aveți soluția potrivită chiar în fața ochilor. Doar descărcați-l, la urma urmei, șablonul este complet gratuit, gata și setat pentru ca dvs. să-l profitați la maximum.

Formular de căutare Colorlib v13

În calitate de proprietar de director, mai bine aveți o funcție de căutare îngrijită, confortabilă de utilizat și plină de resurse disponibile pe pagina dvs. pentru toți vizitatorii dvs. Astfel, ei pot descoperi rapid ceea ce îi interesează, completând căutarea, care este în mod normal lungă și plictisitoare, într-o briză mică. În special pentru orașe, baruri, hoteluri, restaurante și alte lucruri, Colorlib Search Form v13 este opțiunea potrivită pentru tine. Este complet gratuit, astfel încât să îl puteți descărca cu ușurință și să îl testați și numai mai târziu să decideți dacă este potrivit pentru nevoile dvs. O, băiete, va fi o potrivire perfectă cu platforma ta online.

Formular de căutare Colorlib v14

Păstrați lucrurile simple și la obiect cu Formularul de căutare Colorlib v14. Dacă sunteți pe cale să lansați un nou site de turism, mai bine vă asigurați că opțiunea de căutare este complet rezolvată. În acest fel, toată lumea poate găsi și rezerva rapid aventura potrivită pentru vacanța viitoare. Cu Formularul de căutare Colorlib v14, puteți introduce cu ușurință o bară de căutare convenabilă, care se va cufunda fără probleme în spațiul dvs. web existent. Marginile rotunde și efectul de umbră îl fac să pară foarte modern și la modă. Selectorul de date de check-in și check-out, precum și câmpul pentru numărul de oaspeți, sunt integrate din cutie.

Formular de căutare Colorlib v15

Vibrațiile de pe plajă devin puternice cu acest șablon de formular de căutare gratuit. Având în vedere asta, ați ghicit, Formularul de căutare Colorlib v15 este cel mai potrivit pentru tot ceea ce este legat de călătorii și turism. Căutarea de hoteluri, mașini și zboruri nu a fost niciodată mai ușoară datorită ușurinței și rafinamentului pe care acest aspect le aduce la masă. Bucurați-vă să lăsați aspectul exact așa cum este și atașați-l pe site-ul dvs. pentru o soluție super rapidă. Dar este posibilă și efectuarea de ajustări și îmbunătățiri suplimentare. Alături de formularul obligatoriu, Colorlib Search Form v15 include și două casete de selectare pentru a oferi clientului și mai multe opțiuni.

Formular de căutare Colorlib v16

Un șablon uimitor de exemplu de formular de căutare gratuit pentru a face să parcurgeți hoteluri, mașini și zboruri într-un mod ușor. Inutil să spun că este cel mai bun instrument pentru a face rezervări online cu două câmpuri pentru a indica destinația, precum și datele de plecare și de întoarcere. În plus, Formularul de căutare Colorlib v16 are trei casete de bifat și imagine de fundal. Desigur, puteți modifica fiecare secțiune în funcție de obiectivul principal. Colorlib Search Form v16 se adaptează, de asemenea, fluent la diferite dispozitive și apare uimitor pe ecranele retină. De bază la prima vedere, dar suficient de puternic și practic pentru a face treaba în scurt timp.

Formular de căutare Colorlib v17

Acest șablon special oferă un tip de formular trei în unu în care utilizatorul poate alege între rezervarea unui hotel, a unei mașini sau a unui zbor. Filtrarea se face impecabil pentru o execuție rapidă. De asemenea, fiecare secțiune vine cu un set diferit de câmpuri, potrivite pentru subiect. Toate trei includ selector de date, în timp ce numai secțiunea de mașini are și un selector de timp. Ca să nu mai vorbim, puteți personaliza Formularul de căutare Colorlib v17 după preferințele dvs., puteți corecta câmpurile în funcție de nevoile dvs. și puteți oferi tuturor vizitatorilor o modalitate convenabilă de a găsi cele mai bune opțiuni de rezervare pentru nevoile și preferințele lor. Fie că implementați acest aspect gratuit al formularului de căutare în pagina dvs., fie îl utilizați ca pagină individuală, ambele opțiuni funcționează fără probleme.

Formular de căutare Colorlib v18

Absolut fenomenal șablon de formular de căutare HTML5 gratuit, alias un vrăjitor de formulare pe care vă veți distra foarte mult să îl implementați în designul dvs. web. Formularul de căutare Colorlib v18 modifică fără probleme la tot felul de stiluri diferite de site-uri web, atâta timp cât se referă la călătorii și turism. Cu fundalul imaginii, puteți crea strategic o primă impresie puternică, determinând pe toată lumea să fie intrigat să completeze formularul cât mai repede posibil. Desigur, puteți introduce formularul într-unul dintre aspectele dvs. predefinite sau îl puteți utiliza exact așa cum este. Economisiți timp și efort și abordați în mod inteligent formularele de căutare pentru hoteluri, închiriere de mașini și zboruri.

Formular de căutare Colorlib v19

Formularul de căutare Colorlib v19 este o altă alternativă de formular de căutare gratuită, perfectă pentru zboruri și companii aeriene. Forma stârnește o cutie modernă cu margini rotunjite și efect transparent, de gradient. Fundalul constă dintr-o imagine atrăgătoare, care nu face decât să ridice experiența generală. În ceea ce privește formularul, are cinci câmpuri diferite și un buton de căutare; de la și către, pasageri, plecare și întoarcere. Ultimii doi vin și cu culegători de date. Dacă un formular de căutare decent este tot ce lipsește pagina dvs., acum știți de unde să obțineți unul gata făcut și complet gratuit. Apăsați butonul de descărcare și sunteți gata.

Formular de căutare Colorlib v20

Înființați un hub online în care oamenii din întreaga lume ar putea găsi rapid cea mai bună ofertă de zbor? Dacă acesta este cazul, ei bine, un formular de căutare solid este una dintre funcțiile obligatorii de care aveți nevoie pentru a le face pe site-ul dvs. Formularul de căutare Colorlib v20 este un exemplu de formular de căutare gratuit pe care îl puteți utiliza exact ca atare sau îl puteți folosi ca inspirație. Are o atenție deosebită la detalii cu margini rotunjite și efect de gradient și transparent. Fundalul este, de asemenea, o imagine care creează o atmosferă minunată. Nu în ultimul rând, aspectul este 100% compatibil cu dispozitivele mobile, pe care îl puteți testa, de asemenea, accesând pagina de previzualizare live.

Formular de căutare Colorlib v21

Dacă doriți să vă păstrați prezența online cât mai simplă și cât mai minimală posibil, atunci cu siguranță aveți nevoie de Formularul de căutare Colorlib v21. Vine ca un buton cu o pictogramă de căutare care, când dai clic pe el, deschide o întreagă bară de căutare. În plus, Colorlib Search Form v21 vine și în două stiluri diferite, rotund și pătrat. Desigur, acest formular de căutare gratuit funcționează impecabil pe dispozitive mobile și desktop, așa că capacitatea de răspuns nu trebuie să vă faceți griji. Pur și simplu descărcați instrumentul acum și faceți-l să strălucească pe site-ul dvs. mai devreme decât mai târziu, oferind o opțiune de căutare interesantă.

Formular de căutare Colorlib v22

Un formular de căutare gratuit modern, simplu și sofisticat pe care îl puteți folosi pentru toate site-urile. De la companii și bloguri la portofolii și magazine online, Colorlib Search Form v22 se adaptează la toate conceptele din cutie. De asemenea, acest instrument funcționează excelent ca funcție de căutare prin suprapunere, care continuă să tastați caractere fără distragere a atenției. Nu este nevoie să complicați prea mult lucrurile atunci când aveți o mulțime de aspecte și componente predefinite întotdeauna la dispoziție. Nu numai atât, dar multe articole asemănătoare premium nu vă costă nici un ban. Ei bine, ce mai așteptați, descărcați formularul acum și obțineți-l pentru a vă decora pagina. Când funcția se întâlnește cu stilul - asta este când vine vorba de Formularul de căutare Colorlib v22.

Formular de căutare Colorlib v23

Curățenie cu o notă de creativitate, asta obțineți cu Formularul de căutare Colorlib v23. Este un șablon de formular de căutare gratuit bazat pe HTML5, care se transformă fluent pe smartphone-uri, tablete și computere desktop. Împreună cu bara de căutare și butonul de îndemn, puteți adăuga și diferite texte în interiorul câmpului de căutare în sine, precum și chiar sub acesta. De asemenea, puteți utiliza un fundal de imagine sau puteți păstra lucrurile goale, indiferent de ce se potrivește cel mai bine nevoilor dvs., Colorlib Search Form v23 se ocupă de multe pentru un instrument gratuit. Acum știi că nu mai trebuie să începi de la zero.

Formular de căutare Colorlib v24

În timp ce unele site-uri web oferă doar căutarea după cuvinte cheie, puteți face mai mult decât atât cu Formularul de căutare Colorlib v24. Este un șablon de formular de căutare gratuit, care depășește funcția de căutare de bază. După cum puteți vedea, puteți oferi tuturor utilizatorilor să-și rafinați căutarea, alegând categoria potrivită din câmpul drop-down. Ei vor găsi și mai repede articolul exact pe care îl caută. O funcție de căutare confortabilă și rapidă și navigabilitatea pe site sunt completări excelente la o experiență superbă. Asigurați-vă că un vizitator părăsește spațiul dvs. online mulțumit și pe dvs. cu o nouă conversie.

Formular de căutare Colorlib v25

În timp ce Colorlib Search Form v25 se potrivește cel mai bine magazinelor online de îmbrăcăminte și accesorii, puteți, de asemenea, să mergeți complet împotriva normei și să îl utilizați pentru ceva complet diferit. Opțiunile sunt foarte multe odată ce aveți acces la un instrument versatil și flexibil, care se întâmplă să fie foarte simplu de utilizat. Fundal de imagine cu umbrire, câmp derulant pentru categorii, bară de căutare și un buton cu efect de gradient, acesta este practic atunci când vine vorba de Formularul de căutare Colorlib v25. Simțiți-vă liber să-l conectați la pagina dvs. din cutie sau să o ajustați mai mult; indiferent de gustul tău meticulos, acest instrument se potrivește fără îndoială.

Este un formular de căutare simplu și aliniat central, cu o zonă de text (care strălucește când dați clic) și un buton de trimitere. Chenarul strălucitor animat al acestei casete de căutare o face mai atractivă și interactivă, deoarece strălucește instantaneu de fiecare dată când textul este introdus în acea casetă. De asemenea, această casetă cu stil a fost dezvoltată cu CSS și HTML, care este funcțională cu jQuery. Priviți mai atent funcțiile și designul acestei casete de căutare în acest tutorial.

Caseta de căutare este un element foarte necesar și cel mai des folosit într-un site web. Acest instrument simplu de căutare face site-ul dvs. frumos și ușor de utilizat. Îmbunătățește experiența utilizatorului simplificând navigarea și explorarea. Tot ce trebuie să faceți este să urmați instrucțiunile menționate în tutorial și să creați singur caseta de căutare de la zero.

Acest formular de căutare elegant este unic cu caracteristicile sale extensibile. În primul rând, pe ecran apare doar o pictogramă de căutare, dar când faceți clic pe acea pictogramă, iese bara de căutare extinsă. Nu doar asta, ci se mută automat înapoi la pictograma sa obișnuită lupă ori de câte ori bara de căutare este lăsată goală. În plus, consultați tutorialul pentru a obține o imagine clară a procedurii de proiectare a acestui formular de căutare bazat pe CSS3 și HTML.

Fiecare vizitator care ajunge pe site-ul dvs. web îmbunătățește clasarea afacerii dvs., așa că acum este datoria dvs. să îmbunătățiți experiența acestor utilizatori, oferind o opțiune de căutare bine structurată la nivelul întregului site. Astfel, ei pot explora și naviga cu ușurință pe site în câteva fracțiuni de timp. Acest tutorial vă va oferi o privire detaliată asupra procesului complet de proiectare a instrumentelor de căutare cu modele și formulare uimitoare.

Învățați pas cu pas din acest tutorial pentru a obține o casetă de căutare CSS3 elegantă pe site-ul dvs. pentru a atrage mai mulți vizitatori pe site-ul dvs. Aceste casete de căutare elegante și atractive ajută utilizatorii să obțină cu ușurință ceea ce caută pe site-ul dvs., ceea ce le economisește timp și creează o impresie bună de durată a afacerii și a site-ului dvs. web pe ei.

Exact după numele său, această casetă de căutare „Loooong The Search Bar” se extinde automat ori de câte ori se face clic pe zona de căutare. O astfel de bară de căutare uimitoare este creată folosind CSS3 fără utilizarea ulterioară a vreunui limbaj de scripting. Reține-ți vizitatorii servindu-le cu elemente funcționale ca acesta. Sunteți încă confuz cu privire la funcțiile și caracteristicile acestui formular de căutare? Nu vă faceți griji, aruncați o privire la tutorialul informativ pentru a ști cum să creați o „Loooong The Search Bar” pe site-ul dvs.

Obțineți caseta de căutare stilizată integrată cu efecte speciale cum ar fi tranziții, colțuri rotunjite și umbre în casetă în doar câțiva pași simpli menționați în tutorial. Această casetă de căutare creativă complet nouă vine cu o funcție de text predictiv în câmpurile de căutare. Afișează toate rezultatele de căutare arhivate, sugerate și cele mai apropiate. Ajută utilizatorii să caute rapid folosind doar inițialele cuvintelor cheie.

Odată ce introduceți textul făcând clic pe pictograma lupă a paginii web, acesta se extinde în continuare sub formă animată. Aspectul barei de căutare se schimbă de la simplu la extrem de atractiv și intuitiv. O veți înțelege mai clar din tutorial cu o procedură detaliată pentru a construi o căutare animată.

În primul rând, această casetă de căutare inspirată de Apple este creată folosind CSS3 pentru a satisface înclinația nemuritoare a utilizatorilor Apple. În plus, pentru a personaliza experiența de căutare la fel ca un dispozitiv Apple, puteți căuta acest tutorial pe bara de căutare pentru a crea singur.

Formular de căutare curată, CSS3/jQuery + PSD

Dacă doriți să vă marcați site-ul web deasupra celorlalți, atunci trebuie să adăugați elemente unice în site-ul dvs. O casetă de căutare este una dintre ele. Dacă aveți o casetă de căutare personalizată, atunci cu siguranță ar fi mai ușor pentru un vizitator să vă exploreze site-ul, ceea ce ar putea transforma vizitatorii tăi frecventi în potențiali cumpărători. Această casetă de căutare este, de asemenea, încorporată în CSS3, având validarea jQuery simplificată cu o caracteristică interesantă, adică apare o fereastră pop-up dacă utilizatorul nu găsește și completează câmpul de căutare.

Ești în căutarea unor formulare de căutare interesante și inspirate pentru site-ul tău? Apoi consultați acest tutorial pentru a crea o casetă de căutare CSS3 uimitoare folosind validarea HTML5 și jQuery. În plus, folosind funcția Modernizr, puteți face cu ușurință caseta de căutare compatibilă cu browserele dvs.

Acest formular de căutare atrăgător este unic prin aspectul și afișarea, care accentuează aspectul site-ului web. Efectul special stratificat de sub caseta de căutare va atrage, de asemenea, vizitatorii din prima. În general, consultați acest tutorial pentru a arunca o privire asupra procedurii de creare a unui formular de căutare de la zero.

Casetă de căutare cu atribut flexibil

Acest formular de căutare flexibilă conține un câmp de introducere de căutare flexibil cu butonul de trimitere de lățime fixă ​​și chenar fix. Această caracteristică minunată, inspirată, va atrage cu siguranță atenția vizitatorilor atunci când ajung pe site-ul dvs. De asemenea, obțineți informații detaliate în acest tutorial despre cum funcționează împreună funcțiile și codarea CSS3 și HTML5.

Este un formular de căutare adecvat, care completează structura unui site web, este întotdeauna preferat atât de dezvoltatori, cât și de proprietarii de site-uri. Pe baza utilizării unui formular de căutare, este la fel de important să faceți unele modificări de stil în structura și afișarea acestuia. Cu o pictogramă lupă în partea de sus și bara de căutare rotunjită de mai jos, acest tip de bară de căutare arată grozav. Aflați mai multe din tutorial.

Crearea unei bare de navigare în stil plat cu o casetă de căutare și un meniu drop-down este acum simplă cu acest tutorial. Puteți adăuga elemente precum setări, listă, opțiuni utilizând codarea HTML și cu CSS, adăugați stiluri de bază, elemente de navigare și listă, linkuri, casetă de căutare, meniu derulant etc. Acest meniu derulant se încadrează pe verticală, afișând toate opțiunile disponibile.

Vă mulțumim că ați vizitat Colorlib și că ați citit acest articol! Apreciem foarte mult! Acum ar putea dori să înveți cum să faci un site web

Dezvăluire: Această pagină conține link-uri de afiliere externe care pot duce la primirea unui comision dacă alegeți să cumpărați produsul menționat. Opiniile de pe această pagină sunt ale noastre și nu primim bonus suplimentar pentru recenzii pozitive.