ლამაზი საძიებო ფორმა css3-ში. ლამაზი CSS3 საძიებო ფორმის შექმნა

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

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

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

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

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

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

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

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

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

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

1. type="text" ატრიბუტი შეიცვალა type="search"-ით.
2. 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

მარტივი ფორმა 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+.

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

ასე რომ, დღეს გვინდა გითხრათ საძიებო ფორმის დიზაინის შესახებ CSS3 თვისებების გამოყენებით.

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

მარკირება

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

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

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

ფორმა-შეფუთვა (
სიგანე: 450 პიქსელი
padding: 8px
ზღვარი: 100px ავტომატური;
გადინება: დამალული;
საზღვარი-სიგანე: 1px;
სასაზღვრო სტილი: მყარი
საზღვარი-ფერი: #დედედე #ბაბაბა #ააა #ბაბაბა;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-საზღვარი-რადიუსი: 10px;
-webkit-border-radius: 10px;
საზღვრის რადიუსი: 10 პიქსელი
ფონის ფერი: #f6f6f6;
background-image: -webkit-gradient(წრფივი, მარცხენა ზედა, მარცხენა ქვედა, from(#f6f6f6), to (#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

Form-wrapper #search(
სიგანე: 330px
სიმაღლე: 20px;
padding: 10px 5px;
float: მარცხენა;
შრიფტი: თამამი 16px "lucida sans", "trebuchet MS", "Tahoma";
საზღვარი: 1px მყარი #cccc;
-moz-box-shadow: 0 1px 1px #ddd ჩასმული, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-საზღვარი-რადიუსი: 3px;
-webkit-border-radius: 3px;
საზღვარი-რადიუსი: 3px
}

Form-wrapper #search:focus (
მონახაზი: 0;
საზღვარი-ფერი: #aaa;
-moz-box-shadow: 0 1px 1px #bbb ჩასმული;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb ჩასმული;
}

Form-wrapper #search::-webkit-input-placeholder (
ფერი: #999;
შრიფტის წონა: ნორმალური
}

Form-wrapper #search:-moz-placeholder (
ფერი: #999;
შრიფტის წონა: ნორმალური
}

Form-wrapper #search:-ms-input-placeholder (
ფერი: #999;
შრიფტის წონა: ნორმალური
}

ფორმა-შეფუთვა # გაგზავნა (
float:right;
საზღვარი: 1px მყარი #00748f;
სიმაღლე: 42px;
სიგანე: 100px
padding: 0;
კურსორი: მაჩვენებელი;
შრიფტი: თამამი 15px Arial, Helvetica;
ფერი: #fafafa;
ტექსტის ტრანსფორმაცია: დიდი;
ფონის ფერი: #0483a0;
background-image: -webkit-gradient(წრფივი, მარცხენა ზედა, მარცხენა ქვედა, from(#31b2c3), to (#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-საზღვარი-რადიუსი: 3px;
-webkit-border-radius: 3px;
საზღვარი-რადიუსი: 3px
ტექსტი-ჩრდილი: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}

Form-wrapper #submit:hover,
.form-wrapper #submit:focus (
ფონის ფერი: #31b2c3;
background-image: -webkit-gradient(წრფივი, მარცხენა ზედა, მარცხენა ქვედა, from(#0483a0), to (#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}

Form-wrapper #submit:active (
მონახაზი: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) ჩასმული;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) ჩასმა;
}

Form-wrapper #submit::-moz-focus-inner (
საზღვარი: 0;
}
ბრაუზერის მხარდაჭერა

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

თანამედროვე ბრაუზერები Chrome, Firefox, Safari, Opera, IE10:

კარგი ამბავი ის არის, რომ IE10 ასევე მხარს უჭერს HTML5 შემავსებელს.

IE-ს ძველი ვერსიები (6/7/8):

Საბოლოოდ

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

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

სტატიაში აღწერილია საიტის საძიებო ფორმის განლაგების მახასიათებლები, მოცემულია სემანტიკური კოდის მარკირების მაგალითი, 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

  დაეხმარეთ პროექტს

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

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; )