html5 css3 საძიებო ფორმა. კომპაქტური საძიებო ფორმა CSS3-ში

მე მაკრიტიკებდნენ, ამბობენ, განლაგება მწარეა, მაგრამ არის თანამედროვე HTML5 და CSS3.

რა თქმა უნდა, მესმის, უახლესი სტანდარტები მაგარია და ეს ყველაფერი. მაგრამ ფაქტია, რომ მე, როგორც წესი, ვაკეთებ შეკვეთას და იქ, უმეტეს შემთხვევაში, მნიშვნელოვანია სხვადასხვა ბრაუზერში სრული იდენტურობა, რაც არ იძლევა უახლესი ტექნოლოგიების გამოყენების საშუალებას. აქედან გამომდინარე, მე ძირითადად ყურადღებას ვამახვილებ ბრაუზერის თავსებადობაზე და, ჩვევის გამო, შევადგინე საძიებო ფორმა "ძველი გზით".

ზოგადად, ამ პოსტით ვასწორებ სიტუაციას (მათ გულისთვის, ვინც უკმაყოფილო იყო ბოლო სტატიით =) და გთავაზობთ იმავე საძიებო ფორმის განლაგების ჩემს ვერსიას, მაგრამ HTML5 და CSS3 ტექნოლოგიების გამოყენებით.

მაგალითი იმისა, თუ რა ხდება შედეგად, შესაძლებელია.

რას ვკარგავთ ამ ფორმის HTML5-ისა და CSS3-ის გამოყენებით განლაგებისას

IE9 და ქვემოთ - ვერ დაინახავს ნაგულისხმევ ტექსტს (placeholder ატრიბუტი).
IE8 და ქვემოთ - ვერ დაინახავს მომრგვალებულ კუთხეებს და შიდა ჩრდილებს.
IE7 - თქვენ უნდა მიუთითოთ სხვა ფორმის სიგანე, რადგან ის არ უჭერს მხარს ყუთის ზომის თვისებას.
IE6 - მაგრამ ჩვენ მას საერთოდ არ გავითვალისწინებთ =)

სხვა თანამედროვე ბრაუზერებში ყველაფერი კარგადაა. მიმაჩნია, რომ ზემოაღნიშნული ხარვეზები არ არის კრიტიკული, ამიტომ ჩემი საიტისთვის თამამად გამოვიყენებდი უახლესი ტექნოლოგიების გამოყენებით ასახულ ფორმას.

საძიებო ფორმა HTML კოდი

ეს ასე გამოიყურება:

წინა სტატიის ფორმასთან შედარებით, შემდეგი ცვლილებები განხორციელდა HTML5 ტექნოლოგიის შესაბამისად:

type="text" ატრიბუტი შეიცვალა type="search"-ით.
Inline სკრიპტი ჩანაცვლებულია placeholder="(!LANG:search" .!}

CSS კოდი

აქ არის ყველა საჭირო სტილი კომენტარებით:

ძიება ( /* დააყენეთ ფორმის საჭირო სიგანე დიზაინიდან გამომდინარე ** ფორმა გადაჭიმულია უპრობლემოდ */ სიგანე: 35%; /* გაგზავნის ღილაკი განლაგდება აბსოლუტურად, ** ამიტომ ეს თვისებაა საჭირო */ პოზიცია: ნათესავი; ) .ძებნის შეყვანა ( /* გამორთე საზღვრები შეყვანებზე */ საზღვარი: არ არის; ) /* სტილები შეყვანის ველისთვის */ .search .input ( /* შეყვანის ველის გაჭიმვა ფორმის სრულ სიგანემდე */ სიგანეზე : 100%; /* ზედა (8 პიქსელი) და ქვედა (9 პიქსელი) შიგთავსის გამო ** ფორმის სიმაღლის კორექტირება ** მარჯვნივ (37 პიქსელი) მარცხენაზე მეტი, ** რადგან გაგზავნის ღილაკი იქნება მოთავსებულია იქ */ padding: 8px 37px 9px 15px; /* შეყვანის ველის სიგანეზე (100%) მოიცავდა inline padding */ -moz-box-sizing: border-box; box-sizing: border-box; / * დაამატეთ inline shadows */ box-shadow: inset 0 0 5px rgba(0,0 ,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3); /* მრგვალი კუთხეები */ საზღვრის რადიუსი: 20px; ფონი: #EEE; შრიფტი: 13px Tahoma, Arial, sans-serif; ფერი: #555; მონახაზი: არცერთი; ) /* შეცვალეთ შეყვანის ველის გარეგნობა ფოკუსზე */ .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); ფონი: #E8E8E8; ფერი: #333; ) /* სტილი გაგზავნის ღილაკზე */ .ძებნა .submit ( /* განლაგება ღილაკის აბსოლუტურად მარჯვენა კიდედან */ პოზიცია: აბსოლუტური; ზედა: 0; მარჯვნივ: 0; სიგანე: 37 პიქსელი; /* გაჭიმეთ ღილაკი ფორმის სრულ სიმაღლეზე */ სიმაღლე: 100%; კურსორი: მაჩვენებელი; ფონი: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% გამეორების გარეშე; /* დაამატეთ გამჭვირვალობა გაგზავნის ღილაკზე */ გამჭვირვალობა: 0.5; ) /* შეცვალეთ გაგზავნის ღილაკის გამჭვირვალობა. .submit:hover ( opacity: 0.8; ) /* ეს თვისება საჭიროა იმისათვის, რომ ბრაუზერებს ** Chrome-მა და Safari-მა შეძლონ შეყვანის სტილი */ შეყვანა ( -webkit-appearance: none; )

და IE-ს სტილები მე-9 ვერსიის ქვემოთ:

/* დააყენეთ ცალკეული სტილები IE-სთვის 9 ვერსიის ქვემოთ */ *+html .search ( /* IE7-ისთვის შეცვალეთ სიგანე სხვა ბრაუზერებისთვის და დაამატეთ მარჯვენა ** padding, რათა გაგზავნის ღილაკი მოთავსდეს ადგილზე */ სიგანე: 28 %; padding : 0 52px 0 0; ) .search .input ( საზღვარი: 1px მყარი #DFDFDF; საზღვრის ზედა: 1px მყარი #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( საზღვარი: 1px მყარი #CFCFCF; საზღვრის ზედა: 1px მყარი #999; ) .search .submit (ფილტრი: alpha(გაუმჭვირვალობა=50); ) .search .submit:hover (ფილტრი: alpha(გაუმჭვირვალობა=80); )

P.S.მადლობა კრიტიკოსებს წინა სტატიის კომენტარებისთვის! შენი წყალობით, მე მაქვს ახალი განლაგების მომენტები ჩემს თავში.

საძიებო ველი არის ვებსაიტის ერთ-ერთი მთავარი კომპონენტი, რომელიც განსაზღვრავს და აძლიერებს ვებსაიტის მომხმარებლის ინტერფეისს. ეჭვგარეშეა, საძიებო ფორმა არის კარგად სტრუქტურირებული ვებსაიტის ძალიან საჭირო კომპონენტი, რათა გაზარდოს მისი გამოყენებადობა მომხმარებლებში. მომხმარებლის ინტერფეისის ეს ძირითადი ელემენტი ემსახურება სხვადასხვა მიზნებს და ეხმარება ვიზიტორებს ნავიგაციაში ადვილად იპოვონ ის, რასაც ეძებენ.

უპირველეს ყოვლისა, ეს ერთი ხაზის საძიებო კომპონენტი ჩვეულებრივ მოთავსებულია ხილვადად ნავიგაციის ზოლზე ან ზოგჯერ დამალულია ჩვეულებრივი ხატის ქვეშ, რომელიც უამრავ უპირატესობას ემსახურება; ასევე, ის დაზოგავს დიდ დროს, ხდის ვებსაიტს მოსახერხებელი მომხმარებლისთვის, აუმჯობესებს ნავიგაციას და მომხმარებლის გამოცდილებას. დაბოლოს, ნამცხვარი არის ის, რომ საძიებო ველის შექმნა ძალიან მარტივია.

თუ თქვენ ხართ იმ ვებსაიტების მფლობელებს შორის, რომლებსაც ჯერ არ აქვთ საძიებო ველი თავიანთ ვებსაიტზე, ან ეძებთ უკეთეს საძიებო ფორმებს თქვენი ორიგინალის ჩასანაცვლებლად, მაშინ ეს ჩამოთვლილი გაკვეთილი საუკეთესო საძიებო ფორმის სკრიპტების CSS3, HTML და jQuery შეიძლება დაგეხმაროთ თქვენი მიზნის შესრულებაში.

სანამ Bootstrap, CSS3, HTML5 და jQuery საძიებო ფორმების საუკეთესო გაკვეთილების/სკრიპტების სიას გადავალთ, მოდით გავიგოთ, რატომ არის საძიებო ფორმა ასე მნიშვნელოვანი ვებსაიტზე.

მიმოხილვები ვებსაიტზე ძიების ფორმის უპირატესობებზე:

საიტი ხდება უფრო ინტერაქტიული და მომხმარებლისთვის მოსახერხებელი

აძლიერებს მომხმარებლის გამოცდილებას

ნებას რთავს საიტის ნავიგაციას

ამარტივებს ძიების პროცესს მომხმარებლის სასურველ განყოფილებაში ადვილად გადაყვანით

დაზოგეთ დრო და ფული

მე შევადგინე საუკეთესო გადახდილი CSS3, HTML5 და jQuery საძიებო ფორმების სია, რომლებიც ხელმისაწვდომია ონლაინ, რომელიც შეიძლება გამოყენებულ იქნას ნულიდან საძიებო ველის მარტივად შესაქმნელად.

გამოიკვლიეთ 2,5 მილიონი ციფრული აქტივი, მათ შორის 2018 წლის საუკეთესო WordPress თემები

2 მილიონი+ ელემენტი მსოფლიოს უდიდესი ბაზრიდან HTML5 შაბლონებისთვის, თემებისთვის და დიზაინის აქტივებისთვის. ეს არის ის, რაც გჭირდებათ, თუ თქვენ მხოლოდ რამდენიმე საფონდო ფოტოს შემდეგ - ეს ყველაფერი შეგიძლიათ ნახოთ აქ Envato Market-ზე.

ᲒᲐᲓᲛᲝᲬᲔᲠᲔ ᲐᲮᲚᲐᲕᲔ

Colorlib საძიებო ფორმა v1

ჩვენ შემოგთავაზებთ გამოჩენილი უფასო საძიებო ფორმის მაგალითების დიდ კოლექციას, რომელიც შეგიძლიათ გამოიყენოთ სხვადასხვა მიზნებისთვის. ეს კონკრეტული იდეალურია მოგზაურობასთან დაკავშირებული ვებსაიტებისთვის, ისევე როგორც დირექტორიებისთვის. სრული ეკრანის გამოსახულების ფონით, შეგიძლიათ შექმნათ გასაოცარი ატმოსფერო, რომელიც ითარგმნება სასიამოვნო ძიების გამოცდილებაში. თქვენ ასევე შეგიძლიათ დააზუსტოთ ფორმა და დაიცვან თქვენი ბრენდინგის წესები ოფლის გარეშე. იმის ნაცვლად, რომ შექმნათ ერთი ნულიდან, ახლა შეგიძლიათ დააჩქაროთ პროცესი და დაამატოთ ეს ლამაზი ქალაქი-პირველი ფორმა თქვენს ვებ სივრცეში. გადადით პირდაპირ გადახედვის გვერდზე და შემდეგ დააჭირეთ ჩამოტვირთვის ღილაკს.

Colorlib საძიებო ფორმა v2

როგორც მოგზაურობის პლატფორმა, თქვენ ნამდვილად გსურთ შესთავაზოთ თქვენს მომხმარებლებს მყარი საძიებო ფუნქციები. თუ პირველ რიგში ყურადღებას გაამახვილებთ სასტუმროებზე, ეს უფასო საძიებო ფორმა კარგად გამოგადგებათ. მას აქვს სრულად მოქნილი და საპასუხო ვებ დიზაინი, რომელიც მყისიერად აყალიბებს მის სტრუქტურას ნებისმიერ მოწყობილობაზე. მართლაც, Colorlib Search Form v2 მუშაობს სმარტფონებზე, პლანშეტებსა და სამუშაო მაგიდაზე, როგორც ოცნება.

უფრო მეტიც, შაბლონს ასევე აქვს თარიღის ამომრჩევები, ასევე არჩევანის არჩევანი, თუ რამდენი ადამიანი იმოგზაურებს. განახორციელეთ ის თქვენს არსებულ ვებსაიტზე და შესთავაზეთ თქვენს ვიზიტორებსა და პოტენციურ მომხმარებლებს რაიმე მეტი. შესაბამისი ძიების შედეგებით, მათ შეუძლიათ სწრაფად დაჯავშნონ მოგზაურობა და აღფრთოვანებულიყვნენ ძლიერი.

Colorlib საძიებო ფორმა v3

Colorlib Search Form v3 არის უფასო საძიებო ფორმის მაგალითი მათთვის, ვინც მართავს ონლაინ მაღაზიას. და თუ იყენებთ ნაგულისხმევ პარამეტრებს, Colorlib Search Form v3 საუკეთესოა მოდის და ტანსაცმლის ელექტრონული კომერციის ვებსაიტებისთვის. რა თქმა უნდა, თქვენ გექნებათ ნიავი, რომელიც შეასწორებს პარამეტრებს და აიძულებს შაბლონს ზუსტად დაიცვას თქვენი წესები და რეგულაციები. ეს არის მარტივი გამოსაყენებელი ფორმა, რომლის გამოყენებაც შეგიძლიათ რაიმე პრობლემის გარეშე. ყოველივე ამის შემდეგ, Colorlib Search Form v3 სრულიად უფასოა, მზად არის და დაყენებულია თქვენთვის, რომ დიდი სარგებლობა მოგაწოდოთ. ჩაერთეთ ახლავე და ისიამოვნეთ შედეგებით.

Colorlib საძიებო ფორმა v4

ხართ თუ არა ტანსაცმლის ონლაინ მაღაზიის შექმნის პროცესში? თუ ეს ასეა და თქვენ უბრალოდ ამატებთ ბოლო დასრულებას, გაახარეთ ყველაფერი ამ უფასო HTML5 საძიებო ფორმის მაგალითით. არა მხოლოდ გაახარეთ, არამედ დააჩქარეთ. ყოველივე ამის შემდეგ, ახლა თქვენ აღარ გჭირდებათ საძიებო ფორმის ნულიდან შექმნა. თქვენ ყველაფერი დაყენებული გაქვთ და მზად ხართ წასასვლელად, მხოლოდ ერთი დაწკაპუნებით. თქვენ შეგიძლიათ შექმნათ ცალკე გვერდიც კი, რომელიც იქნება საძიებო ფორმის შესახებ სრული ეკრანის გამოსახულების ფონით. ფორმის ქვემოთ, თქვენ ასევე შეგიძლიათ ჩამოთვალოთ ყველაზე მოძიებული საკვანძო სიტყვები ან დააკავშიროთ იგი თქვენი ელექტრონული კომერციის ვებსაიტის სხვა განყოფილებებთან და კატეგორიებთან.

Colorlib საძიებო ფორმა v5

ლამაზი და პრაქტიკული, ეს არის Colorlib Search Form v5-ის ორი ძირითადი მახასიათებელი. ეს უფასო საძიებო ფორმის შაბლონი არის განსაცვიფრებლად მოქნილი, იდეალურია მათთვის, ვინც თავის მობილურ მოწყობილობაზეა, ასევე დესკტოპის მომხმარებლებისთვის. Colorlib საძიებო ფორმა v5 აქვს თამამი გამოსახულების ფონი, რომელიც ამაღლებს გამოცდილებას. შეგიძლიათ დაუყონებლივ წინ წაიწიოთ საქმეები, უბრალოდ დააჭირეთ ჩამოტვირთვის ღილაკს და დაიწყეთ ამ შიშისმომგვრელი საძიებო შაბლონის დანერგვა თქვენს ისედაც ყბაზე მომგვრელ ვებ მაღაზიაში. გაითვალისწინეთ, მიუხედავად იმისა, რომ Colorlib Search Form v5 მარტივი გამოსაყენებელია, კოდირების ძირითადი ცოდნა აუცილებელია მასთან წარმატებით მუშაობისთვის.

Colorlib საძიებო ფორმა v6

Colorlib Search Form v6 არის კიდევ ერთი თანამედროვე და დახვეწილი უფასო საძიებო ფორმის შაბლონი, რომელიც იდეალურია მაღაზიებისთვის, რომლებიც აწარმოებენ მოდურ საქონელს და აქსესუარებს. მართლაც, თუ თქვენ იჭრებით განლაგებას, მაგრამ გსურთ მისი გამოყენება სხვა რამისთვის, მოგერიდებათ სრულიად ეწინააღმდეგებოდეს ნორმას. Colorlib საძიებო ფორმა v6 აღჭურვილია მომრგვალებული საძიებო ზოლით, ტექსტის ზემოთ და ქვემოთ დამატების ოფციით. ფონის სურათი მას უპირატესობას ანიჭებს, რაც თქვენს გვერდზე ძიების ფუნქციას უფრო მიმზიდველს ხდის. რა თქმა უნდა, Colorlib Search Form v6 ასევე სრულად რეაგირებს და მობილურებისთვის მზადაა, როგორც ხედავთ შაბლონის პირდაპირ გადახედვის გვერდზე.

Colorlib საძიებო ფორმა v7

თუ გაინტერესებთ უფრო გაფართოებული საძიებო ფორმის დამატება თქვენს ვებ პლატფორმაზე, უმჯობესია არ გამოტოვოთ Colorlib Search Form v7-ის შემოწმება. საძიებო ძირითად ფუნქციასთან ერთად, ასევე არის გაფართოებული ვარიანტი, რომელიც მოიცავს ექვს განსხვავებულ ველს. ამ უფასო საძიებო ფორმის მაგალითის კიდევ ერთი მაგარი ფუნქციაა წაშლის ღილაკი. ის აყენებს ყველა ველს ნაგულისხმევად, ასე რომ თქვენ არ გჭირდებათ მათი ხელით გასუფთავება. ძალიან მოსახერხებელია ნამდვილად. ასევე არის შედეგების მრიცხველი, რომელიც აჩვენებს რამდენი ელემენტია ხელმისაწვდომი კონკრეტული საკვანძო სიტყვისთვის, რომელიც თქვენ გაინტერესებთ.

Colorlib საძიებო ფორმა v8

გჭირდებათ კიდევ უფრო უფასო საძიებო ფორმის მაგალითები CSS3 და HTML5-ზე დაფუძნებული? თუ ეს ასეა, განაგრძეთ გადახვევა და ისიამოვნეთ ყველა საოცარი შინაარსით, რომელსაც მაგიდაზე ვატანთ. აქ არის კიდევ ერთი ფანტასტიკური გადაწყვეტა მოდის მაღაზიებისთვის გაფართოებული საძიებო ფუნქციით და გამოსახულების ფონით. წინა შაბლონის მსგავსად, ამ შაბლონსაც აქვს ღილაკი, რომელიც აღადგენს თქვენს ძიების პარამეტრებს ნაგულისხმევად. მთავარ საძიებო ზოლთან ერთად არის ექვსი დამატებითი ველი, რომ შეავსოთ და მიიღოთ რაც შეიძლება ზუსტი შედეგი. ასევე, ფორმას აქვს ლამაზი მუქი დასრულება, რაც მას უფრო ელეგანტურს ხდის.

Colorlib საძიებო ფორმა v9

Colorlib Search Form v9 არის მრავალფუნქციური უფასო საძიებო ფორმის განლაგება, რომელიც შეგიძლიათ გამოიყენოთ სხვადასხვა მიზნების ასორტიმენტისთვის. თუ თქვენ მართავთ ვებ სივრცეს უამრავი შინაარსითა და ნივთებით, გაფართოებული ძიების ფუნქცია ძალიან მოსახერხებელი იქნება. და ეს არის რაღაც Colorlib Search Form v9 აწვდის. მას აქვს პროფესიონალური და დახვეწილი გარეგნობა, რომელიც შეგიძლიათ მარტივად შეცვალოთ, რაც ზუსტად შეასრულებს თქვენს ბრენდინგის რეგულაციებს. მაგრამ თუ თქვენ გსურთ, რომ ის არ იყოს, აუცილებლად გამოიყენეთ იგი ისე, როგორც არის და დაასრულეთ იგი თქვენს გვერდზე თითის დაჭერით.

Colorlib საძიებო ფორმა v10

სუფთა, თანამედროვე და სრულად მოქნილი უფასო საძიებო ფორმის შაბლონი, გრადიენტური ეფექტით, რომ ოდნავ გაახალისოთ ყველაფერი. ეს ინსტრუმენტი არა მხოლოდ ადვილად გამოგარჩევთ კონკურენტებისგან და შექმნის სასიამოვნო გამოცდილებას, არამედ მას ასევე გააჩნია დამატებითი გაფართოებული საძიებო განყოფილება. მთავარ საძიებო ზოლთან ერთად (მომრგვალებული კიდეებით), არის ექვსი დამატებითი ველი ჩამოსაშლელი ვარიანტით, რომელიც შეგიძლიათ შეცვალოთ თქვენი ბიზნესის უპირატესობის მიხედვით. განმეორებითი ძიება უფრო კომფორტული რომ გახდეს, განლაგებაში შედის გადატვირთვის ღილაკიც. არ დაგავიწყდეთ მობილურზე შეამოწმოთ Colorlib Search Form v10 და ნახოთ რამდენად კარგად აყალიბებს იგი მის სტრუქტურას.

Colorlib საძიებო ფორმა v11

სასტუმროები და სხვა განსახლების ბიზნესები, Colorlib Search Form v11 არის მშვენიერი და მარტივი გამოსაყენებელი ინსტრუმენტი, რომელიც გამორჩეულად გამოგადგებათ. გაითვალისწინეთ, რომ დიზაინი ასევე მუშაობს ფრენებისთვის, მანქანის დაქირავებისთვის და სხვა. თუ თქვენ აშენებთ გვერდს, განლაგება განლაგების მიხედვით, ბლოკ-ბლოკად, უმჯობესია დაზოგოთ დრო წინასწარ განსაზღვრული დიზაინით. ეს კონკრეტული უფასო საძიებო ფორმის შაბლონი შეფუთულია სიკეთეებით, რომლებიც მიგიყვანთ უმოკლეს დროში. უპირველეს ყოვლისა, ის ასახავს გამოსახულების ფონს. გამოიყენეთ იგი სტრატეგიულად და მყისიერად მიიპყრობთ მათ ყურადღებას. Colorlib Search Form v11 ასევე ასახავს ყველა საჭირო განყოფილებას სწრაფი და კომფორტული ძიებისთვის.

Colorlib საძიებო ფორმა v12

კიდევ ერთი შესანიშნავი უფასო საძიებო ფორმის შაბლონი სასტუმროებისთვის, ფრენებისთვის და მანქანების დაქირავებისთვის საპასუხო და სრულად მობილურებისთვის მოსახერხებელი განლაგებით. მას გააჩნია სწრაფი ძიების სხვადასხვა ვარიანტები, ასევე თარიღის ამომრჩევები შემოწმებისა და გასვლისთვის. ფორმა აღჭურვილია გამჭვირვალე გრადიენტური ჩარჩოთი გამოსახულების ფონით. თუ გსურთ გამოტოვოთ საფუძვლები და შექმნათ უფრო მოდერნისტული სახე, თქვენ გაქვთ სწორი გამოსავალი თქვენს თვალწინ. უბრალოდ ჩამოტვირთეთ, ბოლოს და ბოლოს, შაბლონი სრულიად უფასოა, მზად არის და დაყენებულია იმისთვის, რომ გამოიყენოთ იგი თქვენი სრული უპირატესობით.

Colorlib საძიებო ფორმა v13

როგორც დირექტორიის მფლობელს, უმჯობესია გქონდეთ სუფთა, კომფორტული გამოსაყენებლად და მარაგი საძიებო ფუნქცია ხელმისაწვდომი თქვენს გვერდზე ყველა თქვენი ვიზიტორისთვის. ამ გზით, მათ შეუძლიათ სწრაფად აღმოაჩინონ ის, რაც მათ აინტერესებთ, დაასრულონ ძებნა, რომელიც ჩვეულებრივ გრძელი და დამღლელია, მცირე ნიავში. ქალაქებისთვის, ბარებისთვის, სასტუმროებისთვის, რესტორნებისთვის და კონკრეტულად სხვა რამეებისთვის, Colorlib Search Form v13 თქვენთვის სწორი ვარიანტია. ის სრულიად უფასოა, ასე რომ თქვენ შეგიძლიათ მარტივად ჩამოტვირთოთ და გამოსცადოთ და მხოლოდ მოგვიანებით გადაწყვიტოთ, შეესაბამება თუ არა თქვენს საჭიროებებს. ო, ბიჭო, იქნება ეს იდეალურად ემთხვევა თქვენს ონლაინ პლატფორმას.

Colorlib საძიებო ფორმა v14

შეინახეთ ყველაფერი მარტივი და მიზანმიმართული Colorlib Search Form v14-ით. თუ თქვენ აპირებთ ახალი ტურისტული ვებსაიტის გახსნას, უმჯობესია დარწმუნდეთ, რომ თქვენი ძიების ვარიანტი სრულად არის დალაგებული. ამ გზით, ყველას შეუძლია სწრაფად მოძებნოს და დაჯავშნოს შესაფერისი თავგადასავალი მომავალი შვებულებისთვის. Colorlib Search Form v14-ით, თქვენ შეგიძლიათ მარტივად შემოიტანოთ მოსახერხებელი საძიებო ზოლი, რომელიც შეუფერხებლად ჩაიძირება თქვენს არსებულ ვებ სივრცეში. მრგვალი კიდეები და ჩრდილის ეფექტი ხდის მას ძალიან თანამედროვე და ტრენდულს. შესვლისა და გასვლის თარიღის ამომრჩევები, ისევე როგორც სტუმრების რაოდენობის ველი, ინტეგრირებულია ყუთში.

Colorlib საძიებო ფორმა v15

პლაჟის განწყობა ძლიერდება ამ უფასო საძიებო ფორმის შაბლონით. ამის გათვალისწინებით, თქვენ წარმოიდგინეთ, Colorlib Search Form v15 საუკეთესოდ მოერგება ყველაფერს, რაც მოგზაურობას და ტურიზმს უკავშირდება. სასტუმროების, მანქანებისა და ფრენების ძებნა არასოდეს ყოფილა ადვილი იმ სიმარტივისა და დახვეწილობის წყალობით, რომელსაც ეს განლაგება მოაქვს მაგიდასთან. ისიამოვნეთ განლაგების დატოვებით ზუსტად ისე, როგორც არის და მიამაგრეთ იგი თქვენს ვებსაიტზე სუპერ სწრაფი გადაწყვეტისთვის. მაგრამ შესაძლებელია დამატებითი შესწორებებისა და გაუმჯობესებების შესრულებაც. სავალდებულოსთან ერთად, Colorlib Search Form v15 ასევე შეიცავს ორ ველს, რათა მომხმარებელს შესთავაზოს კიდევ უფრო მეტი ვარიანტი.

Colorlib საძიებო ფორმა v16

გასაოცარი უფასო საძიებო ფორმის ნიმუშის შაბლონი სასტუმროების, მანქანებისა და ფრენების დათვალიერების გასაუმჯობესებლად. ზედმეტია იმის თქმა, რომ ეს საუკეთესო საშუალებაა ონლაინ ჯავშნის გასაკეთებლად ორი ველით დანიშნულების ადგილის, ასევე გამგზავრებისა და დაბრუნების თარიღების დასაზუსტებლად. გარდა ამისა, Colorlib Search Form v16-ს აქვს სამი ველი, რომ მონიშნოთ და სურათის ფონი. რა თქმა უნდა, თქვენ შეგიძლიათ შეცვალოთ თითოეული სექცია ძირითადი მიზნის მიხედვით. Colorlib Search Form v16 ასევე თავისუფლად ადაპტირდება სხვადასხვა მოწყობილობებთან და განსაცვიფრებლად ჩანს ბადურის ეკრანებზე. ერთი შეხედვით ძირითადი, მაგრამ საკმარისად ძლიერი და პრაქტიკული სამუშაოს შესასრულებლად მცირე დროში.

Colorlib საძიებო ფორმა v17

ეს კონკრეტული შაბლონი გთავაზობთ სამი ერთში ტიპის ფორმას, სადაც მომხმარებელს შეუძლია აირჩიოს სასტუმროს, მანქანის ან ფრენის დაჯავშნა. ფილტრაცია ხდება უნაკლოდ, სწრაფი შესრულებისთვის. ასევე, თითოეულ განყოფილებას მოყვება ველების განსხვავებული ნაკრები, შესაბამისი საგნისთვის. სამივე მოიცავს თარიღის ამომრჩეველს, ხოლო მხოლოდ მანქანის განყოფილებას აქვს დროის ამომრჩევი. რომ აღარაფერი ვთქვათ, თქვენ შეგიძლიათ დააკონფიგურიროთ Colorlib Search Form v17 თქვენი მოწონებით, შეასწოროთ ველები თქვენს საჭიროებებზე და შესთავაზოთ ყველა თქვენს ვიზიტორს მოსახერხებელი გზა იპოვონ დაჯავშნის საუკეთესო ვარიანტები მათი საჭიროებებისა და პრეფერენციებისთვის. ან განახორციელებთ ამ უფასო საძიებო ფორმის განლაგებას თქვენს გვერდზე, ან იყენებთ მას, როგორც ცალკეულ გვერდს, ორივე ვარიანტი მუშაობს შეუფერხებლად.

Colorlib საძიებო ფორმა v18

აბსოლუტურად ფენომენალური უფასო HTML5 საძიებო ფორმის შაბლონი, იგივე ფორმის ოსტატი, რომლის დანერგვაც თქვენ გექნებათ დიდი სიამოვნებით თქვენს ვებ დიზაინში. Colorlib Search Form v18 შეუფერხებლად ცვლის ვებსაიტების ყველა სახის სტილს, რამდენადაც ისინი ეხება მოგზაურობასა და ტურიზმს. გამოსახულების ფონზე, თქვენ შეგიძლიათ სტრატეგიულად შექმნათ ძლიერი პირველი შთაბეჭდილება, რაც ყველას დააინტერესებს ფორმის რაც შეიძლება სწრაფად შევსებაში. რა თქმა უნდა, შეგიძლიათ ფორმა გააცნოთ თქვენს წინასწარ განსაზღვრულ განლაგებას ან გამოიყენოთ ის ზუსტად ისე, როგორც არის. დაზოგეთ დრო და ძალისხმევა და მიუდექით სასტუმროების საძიებო ფორმებს, მანქანების დაქირავებასა და ფრენებს ჭკვიანურად.

Colorlib საძიებო ფორმა v19

Colorlib Search Form v19 არის კიდევ ერთი უფასო საძიებო ფორმის ალტერნატივა, რომელიც იდეალურია ფრენებისა და ავიაკომპანიებისთვის. ფორმა ასახავს თანამედროვე ყუთს მომრგვალებული კიდეებით და გამჭვირვალე გრადიენტური ეფექტით. ფონი შედგება თვალწარმტაცი სურათისგან, რომელიც მხოლოდ ამაღლებს საერთო გამოცდილებას. რაც შეეხება ფორმას, ის ასწორებს ხუთ სხვადასხვა ველს და ძებნის ღილაკს; მგზავრებიდან და უკან, გამგზავრება და დაბრუნება. ამ უკანასკნელ ორს მოყვება თარიღის ამომრჩევებიც. თუ თქვენს გვერდს აკლია საძიებო ფორმა, ახლა თქვენ იცით, სად მიიღოთ მზა და სრულიად უფასოდ. დააჭირეთ ჩამოტვირთვის ღილაკს და მზად ხართ წახვიდეთ.

Colorlib საძიებო ფორმა v20

თქვენ ქმნით ონლაინ ცენტრს, სადაც ხალხი მთელი მსოფლიოდან შეძლებს სწრაფად იპოვნოს საუკეთესო ფრენის შეთავაზება? თუ ეს ასეა, კარგი, მყარი საძიებო ფორმა არის ერთ-ერთი სავალდებულო ფუნქცია, რომელიც თქვენ უნდა დააფიქსიროთ თქვენს ვებსაიტზე. Colorlib საძიებო ფორმა v20 არის უფასო საძიებო ფორმის მაგალითი, რომელიც შეგიძლიათ გამოიყენოთ ზუსტად ისე, როგორც არის ან გამოიყენოთ როგორც ინსპირაცია. მას აქვს სასიამოვნო ყურადღება დეტალებზე მომრგვალებული კიდეებით და გრადიენტული და გამჭვირვალე ეფექტით. ფონი ასევე არის სურათი, რომელიც ქმნის შესანიშნავ ატმოსფეროს. დაბოლოს, რაც არანაკლებ მნიშვნელოვანია, განლაგება არის 100% მობილურისთვის მოსახერხებელი, რომლის გამოცდაც შეგიძლიათ პირდაპირ გადახედვის გვერდზე გადასვლით.

Colorlib საძიებო ფორმა v21

თუ გსურთ თქვენი ონლაინ ყოფნა რაც შეიძლება მარტივი და მინიმალური, მაშინ აუცილებლად გჭირდებათ Colorlib Search Form v21. ის მოდის როგორც ღილაკი საძიებო ხატით, რომელიც მასზე დაწკაპუნებისას ხსნის მთელ საძიებო ზოლს. გარდა ამისა, Colorlib Search Form v21 ასევე მოდის ორ სხვადასხვა სტილში, მრგვალი და კვადრატული. რა თქმა უნდა, ეს უფასო საძიებო ფორმა მუშაობს მობილურ და დესკტოპ მოწყობილობებზე უნაკლოდ, ამიტომ რეაგირება არ უნდა ინერვიულოთ. უბრალოდ ჩამოტვირთეთ ინსტრუმენტი ახლავე და მიეცით ის თქვენს ვებსაიტზე ადრე, ვიდრე გვიან, გთავაზობთ ძიების მაგარი ვარიანტს.

Colorlib საძიებო ფორმა v22

თანამედროვე, მარტივი და დახვეწილი უფასო საძიებო ფორმის განლაგება, რომელიც შეგიძლიათ გამოიყენოთ ყველა და ყველა ვებსაიტისთვის. ბიზნესებიდან და ბლოგებიდან დაწყებული პორტფოლიოებამდე და ონლაინ მაღაზიებამდე, Colorlib Search Form v22 ადაპტირდება ყველა კონცეფციასთან. ასევე, ეს ინსტრუმენტი მშვენივრად მუშაობს, როგორც გადაფარვის საძიებო ფუნქცია, რომელიც აგრძელებს სიმბოლოების აკრეფას სრულიად ყურადღების გაფანტვის გარეშე. არ არის საჭირო ნივთების ზედმეტად გართულება, როდესაც ყოველთვის თქვენს განკარგულებაში გაქვთ უამრავი წინასწარ განსაზღვრული განლაგება და კომპონენტი. არა მხოლოდ ეს, არამედ ბევრი პრემიუმ მსგავსი ნივთი ასევე არ დაგიჯდებათ. აბა, რას ელოდებით, ჩამოტვირთეთ ფორმა ახლა და მიიღეთ ის თქვენი გვერდის გასაფორმებლად. როდესაც ფუნქცია ემთხვევა სტილს - ეს არის ის, რაც ეხება Colorlib Search Form v22-ს.

Colorlib საძიებო ფორმა v23

სისუფთავე კრეატიულობის შეხებით, ეს არის ის, რასაც იღებთ Colorlib Search Form v23-ით. ეს არის უფასო საძიებო ფორმის შაბლონი, რომელიც დაფუძნებულია HTML5-ზე, რომელიც თავისუფლად ცვლის სმარტფონებს, ტაბლეტებსა და დესკტოპ კომპიუტერებს. საძიებო ზოლთან და ქმედებისკენ მოწოდების ღილაკთან ერთად, თქვენ ასევე შეგიძლიათ დაამატოთ სხვადასხვა ტექსტები როგორც თავად საძიებო ველში, ასევე მის ქვემოთ. თქვენ ასევე შეგიძლიათ გამოიყენოთ სურათის ფონი ან დატოვოთ ნივთები ცარიელი, რაც თქვენს საჭიროებებს საუკეთესოდ შეესაბამება, Colorlib Search Form v23 ბევრს ამუშავებს უფასო ხელსაწყოსთვის. ახლა თქვენ იცით, რომ აღარ გჭირდებათ თავიდან დაწყება.

Colorlib საძიებო ფორმა v24

მიუხედავად იმისა, რომ ზოგიერთი ვებსაიტი გთავაზობთ მხოლოდ საკვანძო სიტყვით ძიებას, ამაზე მეტის გაკეთება შეგიძლიათ Colorlib Search Form v24-ით. ეს არის უფასო საძიებო ფორმის შაბლონი, რომელიც სცილდება ძირითად საძიებო ფუნქციას. როგორც ხედავთ, თქვენ შეგიძლიათ შესთავაზოთ თქვენს ყველა მომხმარებელს ძიების დახვეწა ჩამოსაშლელი ველიდან სწორი კატეგორიის არჩევით. ისინი ახლა უფრო სწრაფად იპოვიან ზუსტად იმ ნივთს, რომელსაც ეძებენ. კომფორტული და სწრაფი ძიების ფუნქცია და საიტის ნავიგაცია შესანიშნავი გამოცდილებაა. დარწმუნდით, რომ ვიზიტორი ტოვებს თქვენს ონლაინ სივრცეს კმაყოფილი და თქვენ ახალი კონვერტაციით.

Colorlib საძიებო ფორმა v25

მიუხედავად იმისა, რომ Colorlib Search Form v25 საუკეთესოდ შეეფერება ონლაინ ტანსაცმლისა და აქსესუარების მაღაზიებს, თქვენ ასევე შეგიძლიათ სრულიად ეწინააღმდეგოთ ნორმას და გამოიყენოთ იგი სრულიად განსხვავებული რამისთვის. ვარიანტები ძალიან ბევრია, როდესაც თქვენ გექნებათ წვდომა მრავალმხრივ და მოქნილ ინსტრუმენტზე, რომელიც ძალიან მარტივი გამოსაყენებელია. გამოსახულების ფონი დაჩრდილვით, კატეგორიის ჩამოსაშლელი ველით, საძიებო ზოლით და ღილაკით გრადიენტური ეფექტით, ეს ძირითადად ასეა, როდესაც საქმე ეხება Colorlib საძიებო ფორმას v25. თავისუფლად დააკავშირეთ იგი თქვენს გვერდს ყუთიდან ან დაარეგულირეთ იგი; თქვენი დახვეწილი გემოვნების მიუხედავად, ეს ინსტრუმენტი უდავოდ ემთხვევა მას.

ეს არის მარტივი და ცენტრალურად გასწორებული საძიებო ფორმა ტექსტის არეით (რომელიც ანათებს დაწკაპუნებისას) და გაგზავნის ღილაკით. ამ საძიებო ველის ანიმაციური მბზინავი საზღვარი მას უფრო მიმზიდველს და ინტერაქტიულს ხდის, რადგან ის მყისიერად ანათებს, როცა ტექსტი შეიყვანება ამ ველში. ასევე, ეს სტილის ყუთი შეიქმნა CSS-ით და HTML-ით, რომელიც ფუნქციონირებს jQuery-ით. უფრო ახლოს გაეცანით ამ საძიებო ველის ფუნქციებსა და დიზაინებს ამ სახელმძღვანელოში.

საძიებო ველი ძალიან საჭირო და ყველაზე ხშირად გამოყენებული ელემენტია ვებსაიტზე. ეს მარტივი საძიებო ინსტრუმენტი ხდის თქვენს ვებსაიტს ლამაზად და მოსახერხებელი. ის აძლიერებს მომხმარებლის გამოცდილებას ნავიგაციისა და ძიების გამარტივებით. ყველაფერი რაც თქვენ უნდა გააკეთოთ არის უბრალოდ მიჰყვეთ სახელმძღვანელოში მითითებულ მითითებებს და შექმნათ საძიებო ველი ნულიდან დამოუკიდებლად.

ეს კლასიკური საძიებო ფორმა უნიკალურია მისი გაფართოებადი ფუნქციებით. უპირველეს ყოვლისა, ეკრანზე მხოლოდ ძიების ხატულა ჩნდება, მაგრამ ამ ხატულაზე დაწკაპუნებისას ჩნდება გაფართოებული საძიებო ზოლი. არა მხოლოდ ეს, ის ავტომატურად ბრუნდება ჩვეულებრივ გამადიდებელი შუშის ხატულაზე, როდესაც საძიებო ზოლი ცარიელი რჩება. გარდა ამისა, შეამოწმეთ სახელმძღვანელო, რომ მიიღოთ ნათელი სურათი CSS3 და HTML-ზე დაფუძნებული საძიებო ფორმის დიზაინის პროცედურის შესახებ.

ყოველი ვიზიტორი, რომელიც მოხვდება თქვენს ვებსაიტზე, აუმჯობესებს თქვენი ბიზნესის რეიტინგს, ასე რომ, ახლა თქვენი მოვალეობაა გააუმჯობესოთ ამ მომხმარებლების გამოცდილება კარგად სტრუქტურირებული საიტის ძიების ვარიანტის მიწოდებით. ამრიგად, მათ შეუძლიათ ადვილად შეისწავლონ და ნავიგაცია მოახდინონ საიტზე დროის ნაწილებში. ეს გაკვეთილი მოგაწვდით დეტალურ განხილვას საძიებო ხელსაწყოს დიზაინის სრულ პროცესზე საოცარი დიზაინითა და ფორმებით.

ისწავლეთ ეტაპობრივად ამ გაკვეთილიდან, რომ მიიღოთ თანამედროვე CSS3 საძიებო ველი თქვენს ვებსაიტზე, რათა მოიზიდოთ მეტი ვიზიტორი თქვენს ვებსაიტზე. ეს ელეგანტური და მიმზიდველი საძიებო ველები ეხმარება მომხმარებლებს მარტივად მიიღონ ის, რასაც ეძებენ თქვენს ვებსაიტზე, რაც დაზოგავს მათ დროს და ქმნის კარგ შთაბეჭდილებას თქვენს ბიზნესსა და ვებსაიტზე მათზე.

ზუსტად მისი სახელით, ეს საძიებო ველი "Loooong The Search Bar" ავტომატურად ფართოვდება, როდესაც ძიების ზონას დააწკაპუნებთ. ასეთი საოცარი საძიებო ზოლი იქმნება CSS3-ის გამოყენებით, სკრიპტირების ენის შემდგომი გამოყენების გარეშე. შეაჩერეთ თქვენი ვიზიტორები ასეთი ფუნქციური ელემენტების მომსახურებით. ჯერ კიდევ დაბნეული ხართ ამ საძიებო ფორმის ფუნქციებსა და მახასიათებლებში? არ ინერვიულოთ, გადახედეთ ინფორმაციულ სახელმძღვანელოს, რათა იცოდეთ როგორ შექმნათ "Loooong The Search Bar" თქვენს ვებსაიტზე.

მიიღეთ სტილიზებული საძიებო ველი ინტეგრირებული სპეციალურ ეფექტებთან, როგორიცაა გადასვლები, მრგვალი კუთხეები და ყუთების ჩრდილები სახელმძღვანელოში ნახსენები რამდენიმე მარტივი ნაბიჯით. ამ სრულიად ახალ კრეატიულ საძიებო ველს გააჩნია პროგნოზირებადი ტექსტის ფუნქცია საძიებო ველებში. ის აჩვენებს ყველა დაარქივებულ, შემოთავაზებულ და ყველაზე ახლო ძიების შედეგებს. ის ეხმარება მომხმარებლებს სწრაფად მოძებნონ საკვანძო სიტყვების ინიციალების გამოყენებით.

მას შემდეგ რაც შეიყვანთ ტექსტს ვებგვერდის გამადიდებელი შუშის ხატულაზე დაწკაპუნებით, ის უფრო ფართოვდება ანიმაციური სახით. საძიებო ზოლის გარეგნობა მარტივიდან იცვლება უაღრესად მიმზიდველად და ინტუიციურად. ამას უფრო ნათლად გაიგებთ გაკვეთილიდან დეტალური პროცედურებით ანიმაციური ძიების შესაქმნელად.

პირველ რიგში, Apple-ის ინსპირირებული საძიებო ველი შექმნილია CSS3-ის გამოყენებით Apple-ის მომხმარებლების არასოდეს მომაკვდავი მიდრეკილების დასაკმაყოფილებლად. გარდა ამისა, ძიების გამოცდილების პერსონალიზებისთვის, როგორც Apple მოწყობილობის მსგავსად, შეგიძლიათ მოძებნოთ ეს საძიებო ზოლის სახელმძღვანელო, რათა შექმნათ საკუთარი ხელით.

სუფთა საძიებო ფორმა, CSS3/jQuery + PSD

თუ გსურთ თქვენი ვებსაიტის მონიშვნა სხვებზე მაღლა, მაშინ თქვენ უნდა დაამატოთ უნიკალური ელემენტები თქვენს ვებსაიტზე. მათ შორის არის საძიებო ველი. თუ თქვენ გაქვთ მორგებული საძიებო ველი, მაშინ, რა თქმა უნდა, ვიზიტორს გაუადვილდება თქვენი ვებსაიტის შესწავლა, რამაც შესაძლოა თქვენი ხშირი ვიზიტორები პოტენციურ მყიდველებად აქციოს. ეს საძიებო ველი ასევე არის ჩაშენებული CSS3, რომელსაც აქვს jQuery გამარტივებული ვალიდაცია საინტერესო ფუნქციით, ანუ ამომხტარი ფანჯარა გამოჩნდება, თუ მომხმარებელი გამოტოვებს საძიებო ველის პოვნას და შევსებას.

ეძებთ გრილ და შთამაგონებელ საძიებო ფორმებს თქვენი ვებსაიტისთვის? შემდეგ შეამოწმეთ ეს სახელმძღვანელო, რომ შექმნათ საოცარი CSS3 საძიებო ველი HTML5 და jQuery ვალიდაციის გამოყენებით. უფრო მეტიც, Modernizr-ის ფუნქციის გამოყენებით, თქვენ შეგიძლიათ მარტივად გახადოთ თქვენი საძიებო ველი თქვენს ბრაუზერებთან.

ეს თვალწარმტაცი საძიებო ფორმა უნიკალურია თავისი გარეგნობითა და ჩვენებით, რაც ხაზს უსვამს ვებსაიტის იერს. სპეციალური ფენიანი ეფექტი საძიებო ველის ქვემოთ ასევე აუცილებლად მიიზიდავს ვიზიტორებს პირველივე გასვლისას. მთლიანობაში, გადახედეთ ამ სახელმძღვანელოს, რათა გადახედოთ საძიებო ფორმის ნულიდან შექმნის პროცედურას.

საძიებო ველი მოქნილი ატრიბუტებით

ეს მოქნილი საძიებო ფორმა შეიცავს მოქნილ საძიებო შეყვანის ველს ფიქსირებული სიგანისა და ფიქსირებული საზღვრების გაგზავნის ღილაკით. ეს შიშის მომგვრელი ფუნქცია აუცილებლად მიიპყრობს ვიზიტორთა ყურადღებას, როდესაც ისინი თქვენს ვებსაიტზე მოხვდებიან. ასევე, მიიღეთ დეტალური ინფორმაცია ამ სახელმძღვანელოში, თუ როგორ მუშაობდა CSS3 და HTML5-ის ფუნქციები და კოდირება ერთად.

ეს არის სწორი საძიებო ფორმა, რომელიც ავსებს ვებგვერდის სტრუქტურას, ყოველთვის უპირატესობას ანიჭებენ როგორც დეველოპერებს, ასევე ვებსაიტების მფლობელებს. საძიებო ფორმის გამოყენებაზე დაყრდნობით, თანაბრად მნიშვნელოვანია მის სტრუქტურასა და ჩვენებაში სტილისტური ცვლილებების გაკეთება. გამადიდებელი შუშის ხატით ზემოთ და მომრგვალებული საძიებო ზოლით ქვემოთ, ამ ტიპის საძიებო ზოლი მშვენივრად გამოიყურება. შეიტყვეთ მეტი გაკვეთილიდან.

ბრტყელი სტილის ნავიგაციის ზოლის შექმნა საძიებო ველით და ჩამოსაშლელი მენიუთ ახლა ადვილია ამ გაკვეთილით. თქვენ შეგიძლიათ დაამატოთ ისეთი ელემენტები, როგორიცაა პარამეტრები, სია, პარამეტრები HTML კოდირების და CSS-ის გამოყენებით, დაამატეთ ძირითადი სტილები, ნავიგაცია და სიის ელემენტები, ბმულები, საძიებო ველი, ჩამოსაშლელი მენიუ და ა.შ. ეს ჩამოსაშლელი მენიუ იშლება ვერტიკალურად და აჩვენებს ყველა შესაძლო ვარიანტს.

გმადლობთ, რომ ეწვიეთ Colorlib-ს და წაიკითხეთ ეს სტატია! ჩვენ ძალიან ვაფასებთ მას! ახლა შეიძლება გსურდეთ ისწავლოთ ვებსაიტის შექმნა

გამჟღავნება:ეს გვერდი შეიცავს გარე შვილობილი ბმულებს, რამაც შეიძლება გამოიწვიოს საკომისიოს მიღება, თუ თქვენ აირჩევთ აღნიშნული პროდუქტის შეძენას. ამ გვერდის მოსაზრებები ჩვენია და ჩვენ არ ვიღებთ დამატებით ბონუსს დადებითი შეფასებებისთვის.

ორი ვარიანტი საძიებო ფორმებისთვის, რომლებიც დაზოგავს ადგილს თქვენს საიტზე. დაწკაპუნებით, ფორმა ფართოვდება ტექსტის შეყვანისთვის. მხოლოდ მეორადი CSS3.

HTML

მარტივი ფორმა html5 tag:

css

პირველ რიგში, მოდით გადატვირთოთ სტილები ვებ ნაკრებიბრაუზერები, რომლებიც საძიებო სისტემებში დამატებას ცდილობენ შეყვანატეგის ჩარჩო, დახურვის ხატულა. ამიტომ, ჩვენ ამ ყველაფერს ზედმეტს მოვხსნით:

შეყვანა ( მონახაზი: არცერთი; ) შეყვანა ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration , შეყვანა::-webkit-search-cancel-button (ჩვენება: არცერთი; /* ამოიღეთ ძებნა და გააუქმეთ ხატულა */ )

მოდით შევქმნათ საძიებო ფორმა:

ჩვენ არ შევჩერდებით ყველა თვისებაზე, უბრალოდ გაითვალისწინეთ, რომ საძიებო შეყვანის სიგანეს ჯერ აქვს მნიშვნელობა 55 პიქსელი, და გაფართოვდება 130 პიქსელიფოკუსის მომენტში : ფოკუსირება. საკუთრება გარდამავალისაშუალებას გაძლევთ გააცოცხლოთ ეს ცვლილება სიგანეში. გამოიყენება ბზინვარებისთვის ყუთის ჩრდილი:

შეყვანა ( ფონი: #ededed url(search-icon.png) განუმეორებელი 9px ცენტრი; კონტური: მყარი 1px #cccc; padding: 9px 10px 9px 32px; სიგანე: 55px; -webkit-border-radius: 10em; -moz- სასაზღვრო-რადიუსი: 10 ემ; საზღვრის რადიუსი: 10 ემ; -ვებკიტი-გარდამავალი: ყველა .5 წამი; -moz-ტრანზიცია: ყველა .5 წმ; გარდამავალი: ყველა .5 წამი; ) შეყვანა: ფოკუსი (სიგანე: 130 პიქსელი; ფონის ფერი: # fff; საზღვრის ფერი: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); )

AT დემო 2 შეყვანასაძიებო ველი კიდევ უფრო კომპაქტურია - გამოჩნდება მხოლოდ ხატულა. მასზე დაჭერით ასევე შეიცვლება შეყვანის ველის სიგანე.

#demo-b შეყვანა ( სიგანე: 18 პიქსელი; padding-მარცხნივ: 10 პიქსელი; ფერი: გამჭვირვალე; კურსორი: მაჩვენებელი; ) #demo-b შეყვანა: hover (ფონის ფერი: #fff; ) #demo-b შეყვანა: ფოკუსი ( სიგანე : 130 პიქსელი; შიგთავსი-მარცხნივ: 32 პიქსელი; ფერი: #000; ფონის ფერი: #fff; კურსორი: ავტომატური; )

და ტექსტი გამჭვირვალე ხდება:

#demo-b შეყვანა:-moz-placeholder (ფერი: გამჭვირვალე; ) #demo-b შეყვანა::-webkit-input-placeholder (ფერი: გამჭვირვალე; )

ფორმა მუშაობს ყველა თანამედროვე ბრაუზერში Chrome, Firefox, Safari, და IE8+.

საძიებო ველი ალბათ ერთ-ერთი ყველაზე გავრცელებული მომხმარებლის ინტერფეისის ელემენტია. ინტერფეისის გამოყენებადობის დონეზე მუშაობისას ძალიან ხშირია მოდური საძიებო ველის დამატების სურვილი. ამ გაკვეთილში ჩვენ შევქმნით ასეთ პოპულარულ ელემენტს ფსევდოელემენტების გამოყენებით.

HTML მარკირება

ასეთი ველის მოსამზადებლად, მარკირება მინიმალური იქნება.

ეს იყენებს სპეციალურ HTML5 ჩანაცვლებას და საჭირო ატრიბუტებს:

ადგილის მფლობელი- ეს ატრიბუტი ადგენს ტექსტის გამომავალს ველში, სანამ ველი მიიღებს შეყვანის ფოკუსს, შემდეგ ტექსტი იმალება.
საჭირო- ეს ატრიბუტი ადგენს სავალდებულო პირობას ინფორმაციის არსებობისთვის შეყვანის ველში ფორმის გაგზავნამდე.

HTML5-ს ასევე აქვს ახალი მნიშვნელობა ტიპის ატრიბუტისთვის: type="search" . მაგრამ ის არ არის კარგად მხარდაჭერილი ბრაუზერებში, ამიტომ ჩვენ არ გამოვიყენებთ მას ახლა.

HTML ელემენტებს, როგორიცაა img და input, არ აქვთ შინაარსი. მაშასადამე, ფსევდო ელემენტი, როგორიცაა :before, არ აჩვენებს ისრებს ღილაკისთვის.

ამ პრობლემის გადაწყვეტა ჩვენს შემთხვევაში არის ღილაკის type="submit" გამოყენება შეყვანის type="submit" ნაცვლად. ასე რომ, ჩვენ ვინახავთ ფორმას ENTER კლავიშის გამოყენებით.

css

აქ არის ჩვენი დემოსთვის საჭირო სტილები:

ტექსტის შეფუთვის გაუქმება

Cf: ადრე, .cf:after( შინაარსი:""; ჩვენება: მაგიდა; ) .cf:after( გასუფთავება: ორივე; ) .cf( მასშტაბირება:1; )

ფორმის ელემენტები

ბრაუზერის პრეფიქსები არ არის ნაჩვენები გაკვეთილის კოდში უკეთესი სიცხადისთვის. თქვენ შეგიძლიათ ნახოთ სრული კოდი საწყისი ტექსტში.

/* ფორმის კონტეინერის სტილი */ .form-wrapper ( სიგანე: 450px; padding: 15px; ზღვარი: 150px auto 50px auto; ფონი: #444; ფონი: rgba(0,0,0,.2); საზღვრის რადიუსი : 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) ჩასმული, 0 1px 0 rgba(255,255,255,.2); ) /* ტექსტის შეყვანის ველის სტილი */ .form-wrapper შეყვანა ( სიგანე: 330px; სიმაღლე: 20px; padding: 10px 5px; float: მარცხენა; შრიფტი: თამამი 15px "lucida sans", "trebuchet MS", "Tahoma"; საზღვარი: 0; ფონი: #eee; საზღვრის რადიუსი: 3px 0 0 3px; ) .form-wrapper შეყვანა:ფოკუსირება (მოხაზულობა: 0; ფონი: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) ჩასმული; ) .form-wrapper შეყვანა::- webkit -input-placeholder ( ფერი: #999; შრიფტის წონა: ნორმალური; შრიფტის სტილი: დახრილი; ) .form-wrapper შეყვანა:-moz-placeholder (ფერი: #999; შრიფტის წონა: ნორმალური; შრიფტის სტილი: დახრილი ; ) .form-wrapper შეყვანა:-ms-input-placeholder (ფერი: #999; შრიფტის წონა: ნორმალური; შრიფტის სტილი: დახრილი; ) /* ფორმის გაგზავნის ღილაკი */ .form-wrapper ღილაკი (გადასვლა: ხილული პოზიცია: ნათესავი; float:right; საზღვარი: 0; padding: 0; კურსორი: მაჩვენებელი; სიმაღლე: 40px; სიგანე: 110 პიქსელი შრიფტი: თამამი 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; ფერი: #fff; ტექსტის ტრანსფორმაცია: დიდი; ფონი: #d83c3c; საზღვარი-რადიუსი: 0 3px 3px 0; ტექსტი-ჩრდილი: 0 -1px 0 rgba(0, 0,0, .3); ) .form-wrapper ღილაკი:hover( background: #e54040; ) .form-wrapper ღილაკი:აქტიური, .form-wrapper ღილაკი:focus(ფონი: #c42f2f; მონახაზი: 0;) .form-wrapper ღილაკი: ადრე ( / * მარცხენა ისარი */ შინაარსი: ""; პოზიცია: აბსოლუტური; საზღვრის სიგანე: 8px 8px 8px 0; საზღვრის სტილი: მყარი მყარი არ არის; საზღვრის ფერი: გამჭვირვალე #d83c3c გამჭვირვალე; ზედა: 12px; მარცხნივ: -6px; ) .form-wrapper ღილაკი:hover:before( border-right-color: #e54040; ) .form-wrapper button:focus:fore, .form-wrapper ღილაკი:active:before( border-right-color: #c42f2f; ) .form-wrapper ღილაკი::-moz-focus-inner ( /* ამოიღეთ დამატებითი სივრცე ღილაკის გვერდით Mozilla Firefox-ში */ საზღვარი: 0; padding: 0; )

სტატიაში აღწერილია საიტის საძიებო ფორმის განლაგების მახასიათებლები, მოცემულია სემანტიკური კოდის მარკირების მაგალითი, CSS3 დიზაინი და დასასრულს მცირე jQuery მაგია.

მარკირება

HTML5-ის მოსვლამდე საძიებო ფორმა გადაკეთდა ჩვეულებრივ ტექსტურ ველად, ჩვენს ცხოვრებაში მარკირების ენის ახალი ვერსიის თანდათანობით შემოსვლით, მისთვის გაჩნდა სპეციალური ტიპის საძიებო ველი. ასე რომ, თანამედროვე საიტის HTML-ში შეიძლება დავინახოთ მსგავსი რამ:

კოდის შედეგი FF, Opera, IE9:

და ცოტა განსხვავებულად ბრაუზერებში, რომლებიც დაფუძნებულია webkit ძრავაზე (Chrome, Safari):
საძიებო ველი ვებკიტში
როგორც ხედავთ, როდესაც ველს ემატება ფოკუსი, ემატება ხაზგასმა, ხოლო ტექსტის შეყვანისას ჩნდება გასუფთავების ღილაკი, მასზე დაჭერისას ველის შიგთავსი იშლება, რაც თავისთავად საკმაოდ მოსახერხებელია.

CSS სტილის გარეშე, ჩვენი საძიებო ფორმა ჯერჯერობით საკმაოდ მარტივია, ამ სტატიაში ჩვენ შევეცდებით გავაკეთოთ მსგავსი რამ:

მაგალითად: საძიებო ფორმის განლაგება

თუ ძველი ბრაუზერების მხარდაჭერა არ არის დაგეგმილი, ცარიელი არასემანტიკური ელემენტია
შეიძლება შეიცვალოს ფსევდოელემენტით: ადრე .

საძიებო ფორმის დიზაინის მახასიათებლები

მას შემდეგ, რაც გადავწყვიტე გამოვიყენო ბევრი CSS3 თვისება, ეს სასწაულები არ იმუშავებს ძველ Internet Explorer ბრაუზერებში და ბრაუზერის ჯვარედინი თავსებადობის მისაღწევად, თქვენ უნდა დააკავშიროთ ხელჯოხები, გააკეთოთ რამე სურათებით და ა.შ.

უპირველეს ყოვლისა, მსურს ყურადღება გავამახვილო ზოგიერთ მახასიათებელზე, კერძოდ:
- სტილიზაცია ვებკიტის ბრაუზერებში
- ჩანაცვლების სტილი
მოძებნეთ ფორმების სტილები Chrome, Safari ბრაუზერებში

მოდით დავამატოთ სტილი ველში .search კლასით:
ძიება (ფონი: #d8e6ef; საზღვარი: 1px მყარი #000;)
სკრინშოტის შედეგი:
მოძებნეთ FF, Opera, Chrome და Safari ბრაუზერებში
ბრაუზერებში ჩვეულებისამებრ, შემაძრწუნებელი და დაბნეულობაა, Chrome-ში საზღვარი რატომღაც უცნაურად მუშაობს (ზღვრები ჩნდება, თითქოს padding-ს ვაყენებთ), Safari მთლიანად უგულებელყოფს წესებს. მაგრამ ამ სიტუაციაში არის გამოსავალი, ჩვენ ვამატებთ ამ წესს CSS კოდს:
ძიება ( -webkit-appearance: არცერთი;)
ახლა ყველაფერი კარგადაა ვებ-კომპანიებში, მაგრამ ისინი მაინც განსხვავდებიან ნაგულისხმევი ფოკუსით ველების ხაზგასმით და გასუფთავების ღილაკით. ამ ელემენტებმა, თუმცა ხშირად მოსახერხებელია, ზოგჯერ შეიძლება გააფუჭოს დიზაინის იდეა და უნდა გამორთოთ. განათების ამოღება ძალიან მარტივია:
ძიება:ფოკუსი ( მონახაზი: არცერთი; /* ამოღებულია ფოკუსის მონიშვნა */ -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; /* დამატებულია შიდა ჩრდილი, როგორც ალტერნატივა ყველა ბრაუზერისთვის */ )
რჩება გასუფთავების ღილაკის მოშორება. სინამდვილეში, მისი სტილი მარტივად შეიძლება მარტივი ჯვრის ჩანაცვლებით რაიმე სახის ფონით, განლაგებული და ა.შ., მაგრამ ჩემს მაგალითში ეს არ იქნება საჭირო:
/* წესი მხოლოდ კლასის ძიების მქონე ელემენტისთვის */ .search::-webkit-search-cancel-button ( ჩვენება: არცერთი; /* წაშლილია გასუფთავების ღილაკი */ ) /* ან ყველა ველი, რომელსაც აქვს ტიპის ძიება დოკუმენტში */ შეყვანა: :-webkit-search-cancel-button (ჩვენება: არცერთი; )
ჩანაცვლების ველის ტექსტის ინსტრუმენტების ფორმატირება

სამწუხაროდ, ტექსტის მინიშნებით, ყველაფერი ცოტა უფრო რთულია, ვიდრე ერთი შეხედვით ჩანს. პირველ რიგში, ის არ მუშაობს IE9-ში, რომ აღარაფერი ვთქვათ ძველ ბრაუზერებზე, ამიტომ JavaScript უნდა იყოს გამოყენებული კრიტიკულ ადგილებში, სადაც თავდაპირველად საჭიროა ველში გარკვეული ტექსტი. მეორეც, ადგილის დამფუძნებელი არ ემსახურება დიზაინს Firefox, Chrome, Safari ბრაუზერებში და საერთოდ არ ექვემდებარება თავს Opera-ს:
:-moz-placeholder (ფერი: #304e62; /* შეიცვალა ფერი FF-ში */ ) ::-webkit-input-placeholder (ფერი: #304e62; /* შეიცვალა ფერი ვებკიტში */ )
გთხოვთ გაითვალისწინოთ, რომ ეს სელექტორები არ იმუშავებს, თუ ისინი ჩამოთვლილია მძიმით გამოყოფილი, თითოეული უნდა დაიწყოს ახალი ხაზით.

მე განვიხილე განსაკუთრებული მომენტები, რომლებშიც შეიძლება წარმოიშვას სირთულეები, დანარჩენმა არ უნდა შეუქმნას პრობლემები მეტ-ნაკლებად გამოცდილ განლაგების დიზაინერს.

jQuery სკრიპტები

და ბოლოს, მოდით დავამატოთ რამდენიმე სკრიპტი ჩვენს ფორმას, კერძოდ:
- მოდით გავაუქმოთ მოთხოვნა და ცარიელი ველის გაგზავნისას გამოვაჩინოთ შეცდომის შეტყობინება
- როდესაც ფოკუსირებას აკეთებთ ველზე, დაამატეთ პატარა ინსტრუმენტს ბოლოში
jQ-ის ძალით ამ ყველაფრის განხორციელება ძალიან მარტივია, მე მივიღე შემდეგი კოდი კომენტარებით:
$(function() ( /* სახელური ფორმის გაგზავნა */ $(".search-form").submit(function() ( var errVal = "ცარიელი მოთხოვნა"; /* თუ ველი ცარიელია ან შეიცავს errVal მნიშვნელობას */ თუ ( $("search").val() == "" || $(".search").val() == errVal) ( /* დაამატეთ errVal მნიშვნელობა ველში, შეცვალეთ ფონის ფერი და */ $( " .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* return false - ფორმა არ არის წარმოდგენილი */ return false; ); ) ); / * როცა ველი ფოკუსირებულია */ $(".ძებნა").focus(function() ( /* დააყენეთ ველის მნიშვნელობა ცარიელი, ფონის ფერი დააყენეთ ნაგულისხმევად */ $(this).val(""). css((backgroundColor: "#d8e6ef")); /* ინსტრუმენტების მინიშნების ჩვენება */ $(".notice").fadeIn(400); )); /* როდესაც ფოკუსი ამოღებულია */ $(".ძებნა"). blur(function( ) ( /* tooltip ამოღება */ $(".notice").fadeOut(400); )); ));
რა თქმა უნდა, სკრიპტის უფრო სწრაფი მუშაობისთვის უმჯობესია სკრიპტში კლასების შეცვლა იდენტიფიკატორებით და თუ დოკუმენტში იგივე კლასების სხვა ელემენტები გამოჩნდება, ისინი არ არღვევენ სკრიპტს.

შედეგები

ამრიგად, ჩვენ შევქმენით და დავაპროგრამეთ საიტის საძიებო ფორმა, ის მუშაობს Firefox, Chrome, Opera, Safari და IE9+ უახლეს ვერსიებში. დიდი სურვილით, შეგიძლიათ შექმნათ მეტ-ნაკლებად ჯვარედინი ბრაუზერის ვერსია, მინიმუმ IE6-ით დაწყებული.

შემოწმდა
- Internet Explorer 9+
- ოპერა
- Firefox
- Chrome
- Safari
დაეხმარეთ პროექტს