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

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

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

გარდა ამისა, შენარჩუნებულია HTML5 ვალიდაციის შესაძლებლობასტილიზირებადი ელემენტები (რაც შეიძლება არ იყოს JavaScript დანამატების გამოყენების შემთხვევაში). დღევანდელ ბრაუზერებში, ეს მხარდაჭერა დიდი ხანია ნორმაა.

მნიშვნელოვანი თვისებები

როგორც კი ყველაფერი მოგვარდება, პატივისცემით დადექით ფეხზე:

1. კრემი, ვაზნი, ელემენტის ის ნიშანი, რომელიც გვინდა ლამაზად შევქმნათ ( ან კიდევ ), Need tag თუმცა, თქვენ შეგიძლიათ შეცვალოთ ელემენტი ტექსტზე დაწკაპუნებით და არა მხოლოდ თავად ელემენტზე.
2. ტეგი დამნაშავეა ტეგზე გადახტომაში (ამ შემთხვევაში, ფორმის ელემენტის მდგომარეობა გადაფარავს for ატრიბუტს), რადგან დამნაშავე მდებარეობს ტეგის შუაში. (ამ შემთხვევაში, for ატრიბუტი არ არის საჭირო, მაგრამ საჭიროა ტექსტისთვის wrapper tag).

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

სტილი მიმდინარე ბრაუზერებისთვის

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

ჩამრთველი ტეგები და რადიო ღილაკები განთავსებულია ტეგის წინ

HTML კოდშიეს ჰგავს მომავალ შეკვეთას:

მე ვცვლი ჩექმას და მე ვურევ რადიოს ღილაკს

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

CSS კოდი მოსანიშნი ველისთვისიქნება ასეთი:

მოსანიშნი ველი (პოზიცია: აბსოლუტური; z-ინდექსი: -1; გამჭვირვალობა: 0; ზღვარი: 10 პიქსელი 0 0 20 პიქსელი;) : ადრე (შინაარსი: ""; პოზიცია: აბსოლუტური; ზევით: -4 პიქსელი; მარცხნივ: 0; სიგანე: 50 პიქსელი; სიმაღლე: 26 პიქსელი; საზღვრის რადიუსი: 13 პიქსელი; ფონი: #CDD1DA; ყუთი-ჩრდილი: ჩასმული 0 2px 3px rgba ( 0,0,0, .2); გადასვლა: .2s;).მონიშვნის ველი + ეტიკეტი: შემდეგ (შინაარსი: ""; პოზიცია: აბსოლუტური; ზედა: -2px; მარცხნივ: 2px; სიგანე: 22px; სიმაღლე: 22px; კონტური -რადიუსი: 10px; ფონი: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); გარდამავალი: .2s;).მონიშნული ველი: მონიშნული + ლეიბლი: ადრე (ფონი: #9FD468;) .მონიშვნის ველი: მონიშნული + ლეიბლი: შემდეგ (მარცხნივ: 26 პიქსელი;) .მონიშვნის ველი: ფოკუსი + ლეიბლი: ადრე (box-shadow: ჩასმული 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba (255,255 , 0, .7);)

CSS კოდი რადიო ღილაკისთვისიქნება ასეთი:

რადიო (პოზიცია: აბსოლუტური; z-ინდექსი: -1; გამჭვირვალობა: 0; ზღვარი: 10px 0 0 7px;).რადიო + ლეიბლი (პოზიცია: შედარებითი; ბალიშები: 0 0 0 35px; კურსორი: მაჩვენებელი;).რადიო + ლეიბლი :before(შინაარსი: ""; პოზიცია: აბსოლუტური; ზედა: -3 პიქსელი; მარცხნივ: 0; სიგანე: 22 პიქსელი; სიმაღლე: 22 პიქსელი; საზღვარი: 1 პიქსელი მყარი #CDD1DA; საზღვრის რადიუსი: 50%; ფონი: #FFF;). რადიო + ეტიკეტი: შემდეგ (შინაარსი: ""; პოზიცია: აბსოლუტური; ზევით: 1 პიქსელი; მარცხნივ: 4 პიქსელი; სიგანე: 16 პიქსელი; სიმაღლე: 16 პიქსელი; საზღვრის რადიუსი: 50%; ფონი: #9FD468; ყუთი-ჩრდილი: ჩასმული 0 1 პიქსელი 1px rgba (0,0,0, .5); გაუმჭვირვალობა: 0; გარდამავალი: .2s;).რადიო: შემოწმებული + წარწერა: შემდეგ (გაუმჭვირვალობა: 1;).რადიო: ფოკუსი + ლეიბლი: ადრე (box-shadow: 0 0 0 3px rgba (255,255,0, .7);)

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

ჩამრთველი ტეგები და რადიო ღილაკები განთავსებულია ტეგის შუაში

HTML კოდიამ სიტუაციაში ჩვენ ნაბიჯს გადავდგამთ:

წინა ვერსიის ანალოგიისთვის - tag ობოვიაზკოვოდამნაშავე buti roztashovany ადრეტეგები class.checkbox__text i.radio__text.

CSS კოდი მოსანიშნი ველისთვისიქნება ასეთი:

მოსანიშნი ველის შეყვანა (პოზიცია: აბსოლუტური; z-ინდექსი: -1; გამჭვირვალობა: 0; ზღვარი: 10 პიქსელი 0 0 20 პიქს;) შინაარსი: ""; პოზიცია: აბსოლუტური; ზევით: -4 პიქსელი; მარცხნივ: 0; სიგანე: 50 პიქსელი; სიმაღლე: 26 პიქსელი; საზღვრის რადიუსი: 13 პიქსელი; ფონი: #CDD1DA; ყუთი-ჩრდილი: ჩასმული 0 2px 3px rgba (0,0 , 0, .2); გარდამავალი: .2 პ. ფონი: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); გარდამავალი: .2s;).მონიშვნის ველის შეყვანა: მონიშნული + .checkbox__text: ადრე (ფონი: #9FD468;).საკონტროლო ყუთის შეყვანა : მონიშნული + .checkbox__text: შემდეგ (მარცხნივ: 26px;). checkbox შეყვანა: ფოკუსირება + .checkbox__text: ადრე (box-shadow: ჩასმული 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba ( 255,255,0, .7);)

CSS კოდი რადიო ღილაკისთვისიქნება ასეთი:

რადიოს შეყვანა (პოზიცია: აბსოლუტური; z-ინდექსი: -1; გამჭვირვალობა: 0; ზღვარი: 10px 0 0 7px;).radio__text (პოზიცია: შედარებითი; padding: 0 0 0 35px; კურსორი: მაჩვენებელი;).radio__text: ადრე ( შინაარსი: ""; პოზიცია: აბსოლუტური; ზევით: -3 პიქსელი; მარცხნივ: 0; სიგანე: 22 პიქსელი; სიმაღლე: 22 პიქსელი; კონტური: 1 პიქსელი მყარი #CDD1DA; საზღვარი-რადიუსი: 50%; ფონი: #FFF;) .რადიო__ტექსტი: შემდეგ (შინაარსი: ""; პოზიცია: აბსოლუტური; ზევით: 1px; მარცხნივ: 4px; სიგანე: 16px; სიმაღლე: 16px; საზღვრის რადიუსი: 50%; ფონი: #9FD468; box-shadow: ჩასმული 0 1px 1px rgba (0, 0,0, .5); გაუმჭვირვალობა: 0; გარდამავალი: .2 წმ;).რადიო შეყვანა: მონიშნული + .radio__ტექსტი: შემდეგ (გაუმჭვირვალობა: 1;).რადიო შეყვანა: ფოკუსირება + .რადიო__ტექსტი: ადრე (box-shadow: 0 0 0 3px rgba (255,255,0, .7);)

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

სტილი ძველი ბრაუზერებისთვის

CSS კოდი მოსანიშნი ველისთვის. კოდის წინა კომენტარებში მე დავამატე განმარტება ბრაუზერებისთვის:

/ * ჯერ გამოვყოფთ IE8 და უფრო ძველი ვერსიების სტილებს, შემდეგ ოდნავ გავაუმჯობესებთ სტანდარტულ ჩეკ ველს. * / .მონიშვნის ველი (ვერტიკალური გასწორება: ზევით; სიგანე: 17 პიქსელი; სიმაღლე: 17 პიქსელი; ზღვარი: 0 3 პიქსელი 0 0;) / * ეს არის ყველა ბრაუზერისთვის, მათ შორის უფრო ძველი ბრაუზერებისთვის, რომლებსაც არ აქვთ პლიუს სელექტორების მხარდაჭერა. ჩვენ ვაჩვენებთ, რომ ლეიბლი დაწკაპუნებულია. * / .Checkbox + label (კურსორი: მაჩვენებელი;) / * ქვემოთ მოცემულია, თუ როგორ უნდა შეიმუშავოთ ჩამრთველი მიმდინარე ბრაუზერებში, ასევე IE9 და ზემოთ. იმის გამო, რომ ძველი ბრაუზერები არ უჭერენ მხარს სელექტორებს: არა და: შემოწმებულია, ისინი არ ახორციელებენ ქვედა დონის ყველა სტილს. ამ ტიპში მონიშნული შეყვანილია წინ ორმაგი ყუთის გარეშე, ასე რომ, ვფიქრობ, ეს ასეა. * / .საკონტროლო ველი: არ არის (მონიშნული) (პოზიცია: აბსოლუტური; z-ინდექსი: -1; გაუმჭვირვალობა: 0; ზღვარი: 10 პიქსელი 0 0 20 პიქსელი;). ჩამრთველი: არ არის (მონიშნული) + ეტიკეტი (პოზიცია: შედარებითი; ბალიშები: 0 0 0 60 პიქსელი;). მონიშვნის ველი: არ არის (მონიშნული) + ლეიბლი: ადრე (შინაარსი: ""; პოზიცია: აბსოლუტური; ზედა: -4 პიქსელი; მარცხნივ: 0; სიგანე: 50 პიქსელი; სიმაღლე: 26 პიქსელი; საზღვრის რადიუსი: 13 პიქსელი; ფონი : # CDD1DA; box-shadow: ჩასმული 0 2px 3px rgba (0,0,0, .2); გარდამავალი: .2s;).მონიშვნა: არ არის (მონიშნული) + ლეიბლი: შემდეგ (შინაარსი: ""; პოზიცია: აბსოლუტური ; ზევით: -2px; მარცხნივ: 2px; სიგანე: 22px; სიმაღლე: 22px; საზღვრის რადიუსი: 10px; ფონი: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); გარდამავალი: .2s;). checkbox: მონიშნული + ლეიბლი: ადრე (ფონი: #9FD468;). ჩამრთველი: მონიშნული + ლეიბლი: შემდეგ (მარცხნივ: 26 პიქსელი;). ჩამრთველი: ფოკუსირება + ლეიბლი: ადრე (box-shadow: ჩასმული 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba (255,255,0, .7);)

CSS კოდი რადიო ღილაკისთვის:

რადიო (ვერტიკალური გასწორება: ზედა; სიგანე: 17 პიქსელი; სიმაღლე: 17 პიქსელი; ზღვარი: 0 3 პიქსელი 0 0;). რადიო + ლეიბლი (კურსორი: მაჩვენებელი;). რადიო: არ არის (შემოწმებული) (პოზიცია: აბსოლუტური; z-ინდექსი: -1; გაუმჭვირვალობა: 0; ზღვარი: 10px 0 0 7px;).რადიო: არ არის (შემოწმებული) + ლეიბლი (პოზიცია: შედარებითი; padding: 0 0 0 35px;).რადიო: არ არის (შემოწმებული) + ლეიბლი: ადრე (შინაარსი : ""; პოზიცია: აბსოლუტური; ზევით: -3 პიქსელი; მარცხნივ: 0; სიგანე: 22 პიქსელი; სიმაღლე: 22 პიქსელი; კონტური: 1 პიქსელი მყარი #CDD1DA; საზღვრის რადიუსი: 50%; ფონი: #FFF;) .რადიო: არა ( მონიშნულია) + ლეიბლი: შემდეგ (შინაარსი: ""; პოზიცია: აბსოლუტური; ზევით: 1 პიქსელი; მარცხნივ: 4 პიქსელი; სიგანე: 16 პიქსელი; სიმაღლე: 16 პიქსელი; საზღვრის-რადიუსი: 50%; ფონი: #9FD468; ყუთი-ჩრდილი: ჩასმული 0 1px 1px rgba (0,0,0, .5); გაუმჭვირვალობა: 0; გარდამავალი: .2s;).რადიო: მონიშნული + ლეიბლი: შემდეგ (გაუმჭვირვალობა: 1;).რადიო: ფოკუსი + ლეიბლი: ადრე (box-shadow : 0 0 0 3px rgba (255,255,0, .7);)

გამოიყენეთ იგი

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

მშურს თქვენი ჩემს სასარგებლოდ, ძვირფასო მკითხველებო, როგორც საიტი ცნობილია. დღეს მე გაჩვენებთ მაგარ ტექნიკას, რომელიც საშუალებას გაძლევთ შექმნათ მაგარი ჩამრთველი, ბევრი ლამაზი, ისეთები, რომლებიც ხელს უწყობენ html-ს კულისებში. მე გაჩვენებ როგორ უნდა იყო მორცხვი css დიზაინი checkbox-ів. სხვა სიტყვებით რომ ვთქვათ, მე გაჩვენებთ, თუ როგორ უნდა შექმნათ ლამაზი ყუთები CSS-ის გამოყენებით, როგორიცაა ჩამრთველი.

პოჩატკოვას განლაგება

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

აირჩიეთ 1 აირჩიეთ 2 აირჩიეთ 3

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

ჩვენ ვაგროვებთ შეყვანას, ვაპროექტებთ საძინებელს

ახლა ჩვენ უნდა ავიღოთ ორიგინალური ჩამრთველი გვერდიდან.

შეყვანა (
ჩვენება: არცერთი;
}

ახლა თქვენ უნდა შექმნათ ახალი ველები. ჩვენ დაამშვენებს სპანის ელემენტებს, რადგან ისინი განლაგებულია ეტიკეტის შუაში.

შეყვანა + ეტიკეტის დიაპაზონი (
ჩვენება: inline-block;
სიგანე: 40px;
margin-right: 10px;
სიმაღლე: 40px;
ვერტიკალური გასწორება: შუა;
საზღვარი: 5px მყარი მწვანე;
კურსორი: მაჩვენებელი;
საზღვარი-რადიუსი: 5px;
}

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

რობიმო, რომ ყველაფერი მოითხოვოს

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

შეყვანა: შემოწმებული + ეტიკეტის დიაპაზონი (
ფონი: url (btn.png) არ განმეორდეს;
}

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

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

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

ეს სტატია მსგავსია შეყვანის ტიპის ჩამრთველი HTML-ისა და მათი დამუშავების PHP-ში.

ერთი ჩამრთველი

შექმენით მარტივი ფორმა ერთი ჩამრთველით:

PHP სკრიპტი ( checkbox-form.php) შეგვიძლია ავირჩიოთ დაბრუნების ვარიანტი $_POST მასივიდან. თუ $_POST['formWheelchair'] აქვს მნიშვნელობა " დიახ“, ეს არის ინსტალაციის ვარიანტის ნიშანი. თუ ნიშანი არ არის დაყენებული, $_POST['formWheelchair'] არ დაყენდება.

ღერძის კონდახის ფორმირება PHP-ში:

$_POST['formSubmit'] დაყენდა " დიახ", აი, როგორ არის მითითებული ეს მნიშვნელობა საკონტროლო ველის მნიშვნელობის ატრიბუტში:

zamіst" დიახ"შეგიძლიათ დააყენოთ მნიშვნელობები" 1 "აბო" on". გთხოვთ, შეამოწმოთ, რომ დარწმუნდეთ, რომ PHP სკრიპტის დამადასტურებელი კოდი ასევე განახლებულია.

ჩე-ბოქსების ჯგუფი

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

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

გთხოვთ გაითვალისწინოთ, რომ შეყვანის ტიპის ჩამრთველი შეიცავს იგივე სახელებს (formDoor). და რა კანის ეფექტებით დასრულდება. ვიკორისტებს ერთი სახელი აქვთ, ჩვენ მივუთითებთ მათ, რომ ყუთები დაკავშირებულია. გარდა ამისა, ჩვენ აღვნიშნავთ, რომ არჩეული მნიშვნელობები ხელმისაწვდომი იქნება PHP სკრიპტისთვის მასივის სახით. ასე რომ, $_POST ['formDoor'] ტრიალებს ერთზე მეტ მწკრივს, როგორც აწეული კონდახით; ამის ნაცვლად, მასივი ბრუნავს, რომელიც შედგება შერჩეული ველის ყველა მნიშვნელობისგან.

მაგალითად, თუ ყველა ვარიანტს ავირჩევ, $_POST['formDoor'] იქნება მასივი, რომელიც შედგება: (A, B, C, D, E). დაუმიზნეთ კონდახი ქვედა მასივის მნიშვნელობის საჩვენებლად:

თუ ეს მოსალოდნელია არ გამოძახების ოფციიდან, $_POST ['formDoor'] არ იქნება მიწოდებული, შემდეგ ამის გადასამოწმებლად გამოიყენეთ "ცარიელი" ფუნქცია. მნიშვნელობის დაზუსტების შემდეგ, მასივის ციკლს ვახდენთ დამატებითი count() ფუნქციის გამოყენებით, რომელიც აბრუნებს მასივის ზომას და აჩვენებს იმას, რაც ნაპოვნია.

როგორია დებულებების თანმიმდევრობა ვარიანტისთვის ” Acorn Building„მაშინ მასივს ექნება მნიშვნელობა „A“. ანალოგიურად, შედეგად კარნეგის კომპლექსი“, მასივ შურს იძიებს გ.

შეამოწმეთ, აირჩიოთ თუ არა კონკრეტული ვარიანტი

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

ფუნქცია შემოწმებულია ($chkname, $value) (if (! ცარიელი ($_POST [$chkname])) (foreach ($_POST [$chkname] როგორც $chkval) (if ($chkval == $value) (დაბრუნება true; ))) დააბრუნე ყალბი ;)

Vikorist її-სთვის უბრალოდ დააწკაპუნეთ IsChecked ( Checkbox_name, მნიშვნელობა). მაგალითად:

if (IsChecked ("formDoor", "A")) (// დაასრულეთ...) // ან გამოიყენეთ როგორც ვიკი... $ price + = IsChecked ("formDoor", "A")? 100; $Price + = შემოწმებულია ("formDoor", "B")? 20:0;

Enchant კონდახის კოდი

დაამატეთ PHP კოდი ფორმაში PHP შეყვანის ტიპის ჩამრთველით.

ეს პუბლიკაცია ნათარგმნია სტატიიდან " ჩამრთველის დამუშავება PHP ფორმის პროცესორში“, მეგობრული გუნდის მიერ მომზადებული პროექტი

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

შეყვანა: მონიშნული + ლეიბლი: ადრე (შინაარსი: "\2022"; ფერი: #f3f3f3; შრიფტის ზომა: 30 პიქსელი; ტექსტის გასწორება: ცენტრში; ხაზის სიმაღლე: 18 პიქსელი;)

ახლა, როდესაც ვაჭერთ რადიოს ღილაკს, გამოჩნდება პატარა თეთრი წრე.

სტილიზებული ჩამრთველი

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

შეყვანა (ჩვენება: არცერთი;)

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

მოსანიშნი ველის ეტიკეტი: ადრე (საზღვარი-რადიუსი: 3px;)

შემდეგ ჩვენ დავამატებთ "checkmark" სიმბოლოს, რომელიც გამოჩნდება, როდესაც დააწკაპუნებთ ველზე. ეს რადიო წრის მსგავსია. ამჯერად ჩვენ გვჭირდება ხელახლა შექმნა HTML სიმბოლო? ✓.

შეყვანა: მონიშნული + ლეიბლი: ადრე (შინაარსი: "\2713"; ტექსტის ჩრდილი: 1px 1px 1px rgba (0, 0, 0, .2); შრიფტის ზომა: 15px; ფერი: #f3f3f3; ტექსტის გასწორება: ცენტრში ხაზის სიმაღლე: 15 პიქსელი;)

ჩანთაში, ღერძი, რომლის დატოვებაც ჩვენ ვართ დამნაშავე:

ჩანთები

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

მონიშნეთ HTML ფორმები, ან "checkbox" მითითებულია ტეგით შეყვანა, რომელი მნიშვნელობის ტიპი ჩამრთველი.

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

იმის გამო, რომ საჭიროა მოქმედებების ჩამრთველი იყოს, აუცილებელია ტეგს ატრიბუტის დამატება შემოწმდა. გამოიყურებოდეს ასე:

ასე გამოიყურება ჩამრთველი ბრაუზერში:

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

სტატიის თავში მოძრავი ფორმის კოდი ხელმისაწვდომი იქნება:

სახელს რაც შეეხება, პროფესიულ შუა ველში „ჩეკბოქსებს“ ეძახიან.