გამარჯობა, ბლოგის საიტის ძვირფასო მკითხველებო. სირთულეების შესწავლის ფარგლებში, როგორც შემდეგი ამოცანა, ჩვენ გავაგრძელებთ საიტზე ფორმების შექმნის დეტალების ანალიზს შესაბამისი ფორმების გამოყენებით.
დღეს ჩვენ ვისწავლით როგორ შევქმნათ ჩამოსაშლელი (ჩასაშლელი) სიები, მათ შორის მრავალჯერადი არჩევანით, არჩევისა და ოფციის გამოყენებით, როგორ ავაშენოთ ტექსტის ველი textarea-ს მეშვეობით და ასევე ისაუბრეთ ტეგების გამოყენებით ფორმების ფუნქციონირების გაფართოების შესაძლებლობაზე ველების ნაკრები, ლეიბლი და ლეგენდა.
შეგახსენებთ, რომ გვერდზე არსებული ნებისმიერი ფორმა იქმნება გამოყენებით და განკუთვნილია მომხმარებლისგან ნებისმიერი ინფორმაციის შეყვანისთვის და სერვერზე გაგზავნისთვის (მაგალითი -).
სამწუხაროდ, ჰიპერტექსტის მარკირების ენის ინსტრუმენტები არ გვაძლევს ამ ინფორმაციის პირდაპირ დამუშავების საშუალებას, ამიტომ HTML-ით ვქმნით მხოლოდ ფორმის იერსახეს და საჭირო მონაცემები იგზავნება დასამუშავებლად. ამ მიზნით, ვებ სერვერზე მიზანმიმართულად იქმნება სპეციალური ფაილი, რომელიც დაწერილია სერვერის ერთ-ერთ ენაზე (ყველაზე ხშირად, PHP). ვთქვათ, გამოხმაურებისთვის, შეგიძლიათ შექმნათ mail.php ფაილი, რომელიც იქნება დამმუშავებელი.
ამ პუბლიკაციაში მიღებული ინფორმაციის პრაქტიკული გამოყენებისას არ უნდა დაგვავიწყდეს, როგორი უნდა იყოს ის, სადაც გვერდის ყველა ხილული ელემენტის კოდები, ფორმების ჩათვლით, ყოველთვის არის სხეულის ტეგის ფარგლებში.
ეს ინფორმაცია აუცილებელია, რადგან მაშინაც კი, თუ იყენებთ დეველოპერის ყველა თანამედროვე ჩაშენებულ ინსტრუმენტს (შეგახსენებთ, რომ ამ ფუნქციის განხორციელების პირველი ნიშანი იყო), თქვენ ნათლად უნდა გესმოდეთ ძირითადი ტეგების გამოყენების მექანიზმი, შემდეგ კი HTML-ის რედაქტირება. კოდი, რომლის საჭიროებაც დროდადრო ჩნდება, გადაიქცევა სახალისო აქტივობად.
2. მრავალჯერადი- ეს ატრიბუტი, რომელსაც არ აქვს პარამეტრები, იძლევა მრავალჯერადი არჩევის საშუალებას, განსხვავებით ზემოთ მოყვანილი მაგალითისგან, სადაც შეგიძლიათ აირჩიოთ მხოლოდ ერთი ელემენტი (ხაზი). შეეცადეთ აირჩიოთ რამდენიმე ხაზი ამ სიაში მაუსით ერთდროულად (სათითაოდ ნებისმიერ ადგილას, Ctrl კლავიშის დაჭერით, ან Shift-ის საშუალებით, რომელიც მიჰყვება ზედიზედ სათითაოდ):
3. ზომა- ადგენს ჩამოსაშლელი სიის სიმაღლეს, ანუ ნაჩვენები რიგების რაოდენობას. თუ არსებობს მრავალი ატრიბუტი და ზომა არ არის მითითებული (როგორც ზემოთ მოცემულ მაგალითში), მაშინ ნაგულისხმევად ნაჩვენებია ოთხი ხაზიდა, მაგალითად, size="5"-ით ხილული იქნება ხუთი:
Option Textarea Label Fieldset Legend |
4. საჭირო(პარამეტრები არ აქვს) - მიუთითებს, რომ არჩევანი უნდა გაკეთდეს დამმუშავებელზე მონაცემების გაგზავნამდე. თუ სიიდან ელემენტი არ არის არჩეული, მაშინ ფორმის მონაცემები არ გაიგზავნება:
Option Textarea Label Fieldset Legend |
5. ავტომატური ფოკუსი(არ აქვს მნიშვნელობა) აყენებს ფოკუსს სიაზე გვერდის ჩატვირთვისთანავე. გარდა ამისა, თუ მომხმარებელი შეჩვეულია კლავიშებით მოქმედებების უმეტესობის შესრულებას, მაშინ სწორედ ასეთი წინასწარ კონფიგურირებული ფოკუსირება დაგეხმარებათ არჩევანის გაკეთებაში სიიდან კლავიატურაზე არსებული ისრების გამოყენებით მაუსის გამოყენების გარეშე:
6. გამორთულია(პარამეტრების გარეშე) - ბლოკავს სიაზე წვდომას (გამორთავს მას). პრაქტიკაში, ის ჩვეულებრივ გამოიყენება სკრიპტებთან ერთად იმ შემთხვევებში, როდესაც თქვენ გჭირდებათ ჩამოსაშლელი სიის ჩართვა მხოლოდ გარკვეული პირობების დაკმაყოფილების შემთხვევაში:
7. ფორმა- აკავშირებს სიას ერთ ან მეტ ფორმასთან, რომელსაც ის ეკუთვნის, მაგრამ არის კონტეინერის გარეთ
. ამავდროულად, პარამეტრი იწერება ფორმის ატრიბუტის მნიშვნელობის როლში გლობალური id ატრიბუტი, რომელიც ემატება ფორმის ტეგს:
აირჩიეთ სიიდან Option Textarea Label Fieldset Legend |
არ აურიოთ შერჩეული ტეგის ატრიბუტი ფორმის შესაქმნელად მთავარ ტეგთან. ზემოთ მოყვანილ მაგალითში, id="data" ატრიბუტი ემატება ფორმის ტეგს, ხოლო form="data" ატრიბუტი დამატებულია select ტეგს, რამაც შესაძლებელი გახადა ჩამოსაშლელი სიის დაკავშირება კონკრეტულ ფორმასთან.
ვარიანტის ტეგის ატრიბუტები
1. ღირებულება- განსაზღვრავს მნიშვნელობას ჩამოსაშლელი სიიდან, რომელიც გაიგზავნება სერვერზე (ფორმის დამმუშავებელი). სინამდვილეში, სახელი ეგზავნება დამმუშავებელს, რომელიც დაყენებულია რჩეული ტეგის სახელის ატრიბუტით და ღირებულება(ამ მაგალითისთვის - 1, 2, 3, 4, 5), რომელიც შეესაბამება ჩამოსაშლელი სიის არჩეულ ხაზს:
Option Textarea Label Fieldset Legend |
2. გამორთულია— ბლოკავს ჩამოსაშლელი სიის ელემენტს შერჩევისთვის.
Option Textarea Label Fieldset Legend |
როგორც მაგალითიდან ხედავთ, "ოფცია" ხაზი არააქტიურია და მისი არჩევა შეუძლებელია.
3. ეტიკეტი- აჩვენებს სიის ამა თუ იმ ელემენტის ტექსტურ შინაარსს (რაც არის მისი მნიშვნელობა). თუ ლეიბლი არსებობს, მაშინ გამოჩნდება ამ ატრიბუტის მნიშვნელობის იდენტური სტრიქონი და ოფციონის ტეგის შიგნით ტექსტის შინაარსი იგნორირებულია. იგივე ხდება, თუ შინაარსი შორის სრულიად არ არის.
Textarea tag Label tag Fieldset tag Legend tag |
იხ. ზემოთ მოყვანილ მაგალითში კოდის ვარიანტის პირველი ხაზი ცარიელია (ცხრილის მარცხენა მხარეს), მაგრამ მითითებულია label="Option tag" პარამეტრი, რის შედეგადაც ეს ტექსტი გამოჩნდა სიაში ( მარჯვენა მხარე). კოდის მეორე სტრიქონი შეიცავს ტექსტს "Textarea Tag", როგორც ოფციონის ტეგის შინაარსი, მაგრამ ჩამოსაშლელი სია მარჯვნივ აჩვენებს სიტყვას "Textarea", რომელიც ემთხვევა label="Textarea"-ს მნიშვნელობას.
4. შერჩეული- ხაზს უსვამს ჩამოსაშლელი სიის მიმდინარე ელემენტს:
Option Textarea Label Fieldset Legend |
თუ არსებობს მრავალი ატრიბუტი, მაშინ შესაძლებელია ერთზე მეტი ელემენტის არჩევა:
Option Textarea Label Fieldset Legend |
optgroup tag ატრიბუტები
თუ ჩამოსაშლელი სიის დალაგება საჭიროა, მაგალითად, ჯგუფებად დაყოფა, მაშინ თითოეული ამ ჯგუფისთვის გამოიყენება კონტეინერი, რომელიც შედგება გახსნის და დახურვის ოპტჯგუფის ტეგებისგან, რომელიც შეიცავს ჩამოსაშლელი სიის ელემენტების ნაწილს. თუმცა, არსებობს ორი ატრიბუტი ასეთი ჩამოსაშლელი სიის მორგებისთვის.
1. ეტიკეტი- აყენებს თითოეული ჯგუფის სახელს პარამეტრად:
Option Textarea Label Fieldset Legend |
იგივე, ოღონდ შერჩეული ტეგის მრავალჯერადი და ზომის =====«7»:
Option Textarea Label Fieldset Legend |
2. გამორთულია(მნიშვნელობების გარეშე) - ბლოკავს ჯგუფის ელემენტების შერჩევას, რომლებთან მიმართებაშიც ის არის დაყენებული, უფრო მეტიც, არააქტიური ელემენტები ჩვეულებრივ ნაცრისფერია:
Option Textarea Label Fieldset Legend |
მოკლე ვიდეო აქ ძალიან სასარგებლო იქნება:
ტექსტური ველი ფორმაში textarea-ის მეშვეობით
საიტის ფორმის კიდევ ერთი ელემენტი, რომელსაც განვიხილავთ, არის ველი მასში მრავალხაზოვანი ტექსტის შეყვანის შესაძლებლობით. ის შეიძლება შეიქმნას textarea ტეგის გამოყენებით. ნაგულისხმევი ატრიბუტების გარეშე, ამ ტეგის გამოყენება გამოიწვევს შემდეგ შედეგს:
შეიყვანეთ ტექსტი: |
თქვენ შეგიძლიათ განახორციელოთ ხაზის წყვეტა ველში, ხოლო ტექსტი გადაეცემა სერვერზე დამმუშავებელს, განხორციელებული ცვლილებების გათვალისწინებით. ველის დაჭიმვა შესაძლებელია სიგანეში და სიგრძეში, მაუსის საშუალებით დაჭერით ქვედა მარჯვენა კუთხეში, რომელიც მონიშნულია ორი დიაგონალური ზოლით.
ახლა შევეცადოთ ორიგინალ კოდს დავამატოთ რამდენიმე ატრიბუტი პარამეტრებით:
1. სახელი- განსაზღვრავს ტექსტის არეალის სახელს, როგორც მნიშვნელობას, რათა იდენტიფიცირდეს ფორმის მონაცემების გაგზავნის შემდეგ, როდესაც ის დამუშავდება სერვერზე.
2. პოლკოვნიკები— ველის სიგანე, რომელიც პარამეტრად დგინდება გვერდიგვერდ მდგომი იდენტური სიმბოლოების რაოდენობით, ჰორიზონტალურად განლაგებული. ნაგულისხმევი მნიშვნელობა არის 20.
3. რიგები- ტექსტის ველის სიმაღლე, რომელიც განისაზღვრება ხაზების რაოდენობით. თუ მომხმარებლის მიერ შეყვანილი ტექსტის სტრიქონების რაოდენობა აღემატება ამ ატრიბუტით მითითებულ მნიშვნელობას, ვერტიკალური გადახვევის ზოლი გამოჩნდება მარჯვნივ.
4. Მაქსიმალური სიგრძე- განსაზღვრავს სიმბოლოების მაქსიმალურ რაოდენობას, რომელიც შეიძლება განთავსდეს ტექსტის ველში. თუ ლიმიტი გადააჭარბებს, შემდგომი შეყვანა შეუძლებელი იქნება.
ქვემოთ მოცემულია მაგალითი ყველა ზემოთ ჩამოთვლილი ატრიბუტით, რომელთაგან თითოეულის ეფექტი შეგიძლიათ შეამოწმოთ საკუთარ თავს, უბრალოდ ტექსტის ზონაში საჭირო რაოდენობის ასოებისა და ხაზების განთავსებით (შეგიძლიათ უბრალოდ რამდენჯერმე შეიყვანოთ იგივე სიმბოლო):
შეიყვანეთ ტექსტი: |
5. მინა სიგრძის- განსაზღვრავს სიმბოლოების მინიმალურ რაოდენობას, რომელიც უნდა იყოს შეყვანილი ტექსტის ზონაში. თუ მომხმარებელი შეეცდება გაგზავნოს ტექსტი ნაკლები სიმბოლოებით, ბრაუზერი აჩვენებს მოკლე შეტყობინებას ინფორმაციას, რომელიც მიუთითებს ფორმის შინაარსის შევსების აუცილებლობაზე და რამდენი სიმბოლოა უკვე შეყვანილი.
7. Წაიკითხეთ მხოლოდ(პარამეტრების გარეშე) - თუ ეს ატრიბუტი მიმაგრებულია textarea-ზე, მაშინ ტექსტის ველი მიუწვდომელი იქნება მომხმარებლებისთვის შესაცვლელად და იქნება მხოლოდ წაკითხვადი. მაგრამ შეგიძლიათ მასზე ფოკუსირება (გადაიტანეთ კურსორი ველზე და დააწკაპუნეთ მარცხნივ), ასევე აირჩიეთ და დააკოპირეთ (ნაწილობრივ ან მთლიანად) ტექსტი:
კიდევ რამდენიმე ატრიბუტი, რომელიც ახორციელებს დამატებით ფუნქციონირებას ველების შევსებისას:
8. ავტომატური დასრულება- მიუთითებს, უნდა მისცეს თუ არა ბრაუზერმა მინიშნებები, როდესაც მომხმარებელი ავსებს ფორმას ადრე შეყვანილი მონაცემების საფუძველზე და შესაძლებელს ხდის შესაბამისი ტექსტის ავტომატურად ჩასმას.
აქვს სულ ორი პარამეტრი: on(ჩართვა) და გამორთულია(გამორთულია). აქ არის მაგალითი კოდი:
ეს ატრიბუტი, დაყენებულია „on“, მუშაობს მხოლოდ მაშინ, როდესაც ავტომატური შევსების ფორმის ველები ჩართულია მომხმარებლის ვებ ბრაუზერში.
9. შეფუთვა- ადგენს ბრაუზერის ხაზის შეფუთვის წესებს ტექსტის არეში სამი მნიშვნელობის გამოყენებით:
რბილი- სიმბოლოების ნაკრები, რომელიც არ ჯდება ველში სიგანეში, ავტომატურად იკვრება ახალ ხაზში. ამავე დროს, პროცესორი ტექსტი გაიგზავნება როგორც ერთი ხაზი. იმ შემთხვევაში, თუ მომხმარებელი ახვევს ტექსტს ნებისმიერ სასურველ ადგილას "Enter" ღილაკის გამოყენებით, მაშინ ასეთი შეფუთვა ინახება ვებ ფორმის გაგზავნისას.
შეიყვანეთ ტექსტი: |
მძიმე- დეფისი შესრულდება ავტომატურად, თუ ტექსტი არ ჯდება ველში სიგანეში და, როდესაც გადაეგზავნება დამმუშავებელს, შეინახება ასეთი დეფისის ადგილები. ეს პარამეტრი გამოიყენება მხოლოდ cols ატრიბუტთან ერთად:
შეიყვანეთ ტექსტი: |
გამორთულია- გამორთეთ ხაზის წყვეტები. თუ თქვენ დაბეჭდავთ ტექსტის ფრაგმენტს მექანიკური გადაცემის გარეშე "Enter" ღილაკის გამოყენებით, მაშინ მთელი ტექსტი განთავსდება ერთ ხაზზე და გამოჩნდება ჰორიზონტალური გადახვევის ზოლი:
შეიყვანეთ ტექსტი: |
10. ავტომატური ფოკუსი(პარამეტრების გარეშე) - იწყებს ფოკუსირებას ტექსტის ველზე, როდესაც იტვირთება ფორმის მქონე გვერდი.
11. გამორთულია- განსხვავებით readonly ატრიბუტისაგან (რომელიც ასევე კრძალავს ველის შინაარსის რედაქტირებას, მაგრამ შესაძლებელს ხდის მასზე ფოკუსირებას), ის მთლიანად ბლოკავს წვდომას ტექსტის ატრიბუტზე, რომელიც ჩვეულებრივ ნაცრისფერია:
მივესალმები ჩემი ბლოგის ყველა მკითხველს. დღეს მე გეტყვით, როგორ გააკეთოთ ჩამოსაშლელი სია html-ში, რა ტეგები და ატრიბუტები უნდა გამოიყენოთ და ასევე რა მიზნებისთვის შეიძლება დაგჭირდეთ.
აირჩიეთ ტეგი და შექმენით ჩამოსაშლელი სია
ასე რომ, html-ში ჩამოსაშლელი სია იქმნება დაწყვილებული არჩევის ტეგის გამოყენებით, რომელშიც მოთავსებულია დაწყვილებული ოფციონის ტეგები. სწორედ მათშია ჩაწერილი ყველა ის ვარიანტი, რომელიც შემოგთავაზებთ სიაზე დაწკაპუნებისას. მაგალითი:
აირჩიეთ ცხოველი
ამ შემთხვევაში, რაც ნაჩვენებია ოფციის გახსნისა და დახურვის ნაწილებს შორის, იხილავთ ეკრანზე და მნიშვნელობას, რომელიც შეიცავს მნიშვნელობის ატრიბუტს, გადაეგზავნება სერვერს ან დამუშავდება სკრიპტის გამოყენებით.
სია html-ში შეიძლება იყოს ნორმალური და მრავალჯერადი არჩევანით. იმისათვის, რომ შესაძლებელი გახდეს მრავალი ელემენტის არჩევა, თქვენ უნდა დაამატოთ ცარიელი მრავალჯერადი ატრიბუტი არჩევანს. რამდენიმე მნიშვნელობის ასარჩევად ხანგრძლივად დააჭირეთ ctrlდა დააჭირეთ მაუსის მარცხენა ღილაკს.
კიდევ ერთი სასარგებლო ატრიბუტი არის ზომა. ის საშუალებას გაძლევთ აირჩიოთ რამდენი მწკრივი გამოჩნდეს ჩამოსაშლელ სიაში.
სხვა ატრიბუტი გამორთულია. ეს სიას მიუწვდომელს ხდის ნივთების დაწკაპუნებასა და სანახავად, მაგრამ ამავე დროს ის ჩანს გვერდზე.
საჭიროა html5 ატრიბუტი. თუ დაყენებულია, ფორმა არ გაიგზავნება, თუ მნიშვნელობა არ არის არჩეული ჩამოსაშლელი სიიდან. ზოგადად, ეს ხდება აუცილებელი არჩევანი. მიუხედავად იმისა, რომ ატრიბუტი არ მუშაობს ყველა ბრაუზერში.
ვარიანტის ტეგის ატრიბუტები
სინამდვილეში, აირჩიეთ ემსახურება მხოლოდ სიის ელემენტების კონტეინერს, ისინი თავად დაყენებულია ოფციონის ტეგის გამოყენებით. მას აქვს მნიშვნელობის პარამეტრი, როგორც უკვე გავარკვიეთ, მაგრამ ამის გარდა არის სხვებიც. Მაგალითად:
გამორთულია - სიის ელემენტს მიუწვდომელს ხდის შერჩევისთვის. ის გამოჩნდება, მაგრამ თქვენ არ შეგიძლიათ დააწკაპუნოთ მასზე.
არჩეული - ელემენტი შეირჩევა ნაგულისხმევად. ჩვეულებრივ სიაში ეს ატრიბუტი მნიშვნელობის გარეშე შეიძლება დაყენდეს მხოლოდ ერთ ელემენტზე, მრავალ სიაში რამდენიმეზე.
მნიშვნელოვანი განმარტება სწორი მუშაობისთვის
თუ შერჩევის შედეგი უნდა გაიგზავნოს სერვერზე ან დამუშავდეს სკრიპტების საშუალებით, ჩადეთ სელექტი ფორმაში ისე, რომ შეცდომები არ მოხდეს. ფაქტია, რომ ჩამოსაშლელი სია თავდაპირველად შეიქმნა ზუსტად როგორც ფორმის ერთ-ერთი ელემენტი.
რისთვის არის შერჩეული?
როგორც წესი, ეს შეიძლება თქვენთვის სასარგებლო იყოს, თუ დარეგისტრირდებით თქვენს საიტზე, ან გსურთ გამოკითხვის ჩატარება. ელემენტს აქვს ნაკლი - ის კარგად არ ცვლის გარეგნობას css-ის საშუალებით.
ნაგულისხმევად, სიაზე დაწკაპუნებისას ჩნდება ლურჯი ჩარჩო, სიის ელემენტები, რომლებზეც კურსორი ტრიალებს, მონიშნულია იმავე ფერით. ისე, რომ როდესაც დააწკაპუნებთ ჩარჩო არ გამოჩნდება, ან სხვა ფერით არის მონიშნული, შეგიძლიათ დაწეროთ შემდეგი ამომრჩევი:
აირჩიეთ: ფოკუსირება (
მონახაზი: 1px მყარი ნარინჯისფერი;
}
ჩარჩო ახლა ნარინჯისფერი იქნება.
ვარიანტის ასევე შეიძლება სტილიზებული იყოს, მაგრამ როდესაც თქვენ ატარებთ ერთეულს, მისი ფონი ცისფერი ხდება და რატომღაც ეს არ იცვლება სტილის მიხედვით.
ვარიანტი (
ფერი: ყავისფერი
ფონი: აკვა;
}
სხვათა შორის, იქნებ ერთ-ერთმა თქვენგანმა იცოდეს, როგორ შეცვალოს ფონის ფერი, როდესაც ცვივა ერთეულზე css-ის გამოყენებით?
ეს, ფაქტობრივად, ეხება შერჩეულ ტეგს და მის გამოყენებას. html-ში დამატებითი ფუნქციები არ არის გათვალისწინებული. მასთან ყველა სხვა ოპერაციების შესრულება შესაძლებელია Javascript-ის და php-ის გამოყენებით. მაგალითად, თუ თქვენ გჭირდებათ სიის შექმნა დაბადების წლის არჩევისთვის და შეიძლება იყოს 80-100 სხვადასხვა ვარიანტი, დაწერდით თუ არა ხელით?
ამისათვის თქვენ უნდა გამოიყენოთ პროგრამირება, კერძოდ მარყუჟი. კარგი, კარგი, ეს სხვა საუბრის თემაა, მაგრამ დღეისთვის ეს არის მთელი ინფორმაცია, რისი თქმაც მინდოდა თქვენთვის. თქვენ შეგიძლიათ გაეცნოთ სხვა ძირითად ტეგებს html-ში.
HTML ოფციონის ტეგი გამოიყენება ჩამოსაშლელი სიის შესაქმნელად, რომელიც მომხმარებელს საშუალებას აძლევს აირჩიოს ერთი ვარიანტი წინასწარ განსაზღვრული მნიშვნელობებიდან.
მომხმარებლისთვის ხილული ტექსტი შეიძლება განსხვავდებოდეს მნიშვნელობის ატრიბუტში მითითებული ტექსტისგან. აი, როგორ შეგიძლიათ შექმნათ ჩამოსაშლელი სია:
- ჩამოსაშლელი სია იქმნება ტეგის გამოყენებით
- ტეგის შიგნით
- ტეგში
თქვენ ასევე შეგიძლიათ დააყენოთ CSS კლასი ჩამოსაშლელი ჩამოსაშლელი სტილისთვის ID-ის გამოყენების ნაცვლად.
შემდეგ განყოფილებაში მე გაჩვენებთ მაგალითებს, თუ როგორ გამოიყენოთ HTML ჩამოსაშლელი სია JavaScript/JQuery-ში. მაგალითები ასევე აჩვენებს, თუ როგორ უნდა გააკეთოთ სტილი
მარტივი ჩამოსაშლელი სიის შექმნის მაგალითი
ეს HTML შერჩევის ვარიანტის მაგალითი გამოიყენება ჩამოსაშლელი სიის შესაქმნელად სამი ვარიანტით ასარჩევად:
ზემოთ მოცემულ მაგალითში შემდეგი მარკირება გამოიყენება ჩამოსაშლელი სიის შესაქმნელად:
მნიშვნელობის ატრიბუტის გამოყენებით
როგორც უკვე აღვნიშნეთ, ღირებულების ატრიბუტის მნიშვნელობა შეიძლება განსხვავდებოდეს გვერდზე ნაჩვენები ტექსტისგან. მაგალითად, შეგიძლიათ აჩვენოთ ქვეყნების ან ფერების სახელები მომხმარებლებისთვის და გამოიყენოთ მოკლე კოდები მნიშვნელობის ატრიბუტში.
შემდეგ მაგალითში ჩვენ შევქმნით ჩამოსაშლელ სიას მნიშვნელობის ატრიბუტით:
იხილეთ ონლაინ დემო და კოდი
ტეგისთვის
JavaScript-ში არჩეულ ვარიანტზე წვდომის მაგალითი
ახლა შევქმნათ არჩეული ვარიანტის მნიშვნელობის წვდომისა და ზოგიერთი მოქმედების შესრულების მაგალითი. იგივე სიას, როგორც ზემოთ მოცემულ მაგალითში, ჩვენ ვქმნით ფერის არჩევანით. არჩევის შემდეგ დააწკაპუნეთ ღილაკზე ამ ფერის დოკუმენტზე გამოსაყენებლად:
იხილეთ ონლაინ დემო და კოდი
HTML პარამეტრის მნიშვნელობა იყენებს შემდეგ კოდს:
კოდის შემდეგი ხაზი გამოიყენება JavaScript-ში ოფციონის მნიშვნელობის ატრიბუტის მნიშვნელობაზე წვდომისთვის
var seltheme = document.getElementById(“selcolor”).მნიშვნელობა;
ღილაკზე დაწკაპუნებისას იძახება JS ფუნქცია, რომელიც ცვლადს ანიჭებს ჩამოსაშლელ სიაში შერჩეულ მნიშვნელობას. ეს მნიშვნელობა გამოიყენება მიმდინარე დოკუმენტზე ფერის გამოსაყენებლად.
ხილულ ტექსტზე წვდომა jQuery-ში
ამჯერად JQuery-ს გამოვიყენებ არჩეული ვარიანტის მნიშვნელობაზე წვდომისთვის: ტექსტსაც და მნიშვნელობასაც. ამ დემო ვერსიაში, მე შევწვდები ხილულ ტექსტს HTML-ში ოფციონის ტეგში:
იხილეთ ონლაინ დემო და კოდი
ტეგის თითოეული ვარიანტის კოდში
აი, როგორ ხდება ამ მნიშვნელობის წვდომა HTML არჩევის პარამეტრი არჩეულია JavaScript:
var selectedcolor = $("#jqueryselect option:selected").text();
თქვენ ასევე შეგიძლიათ წვდომა მნიშვნელობაზე jQuery $.val() მეთოდის გამოყენებით:
var selectcolor = $("#jqueryselect").val();
შეცვალეთ ეს ხაზი ზემოთ მოცემულ მაგალითში და კოდი ხილული ტექსტის ნაცვლად აჩვენებს მნიშვნელობის ატრიბუტში მოკლე კოდის/ფერის მნიშვნელობას.
PHP სკრიპტში მნიშვნელობის მიღების მაგალითი
ჩამოსაშლელი სიიდან არჩეული ვარიანტის მნიშვნელობის მიღების ამ მაგალითში ფორმა იქმნება ტეგის გამოყენებით
იხილეთ ონლაინ დემო და კოდი
მაგალითში გამოყენებული ფორმის მეთოდი არის POST, ასე რომ თქვენ შეგიძლიათ მიიღოთ ფორმის მნიშვნელობები $_POST[“”] PHP მასივის გამოყენებით. ეს არის მაგალითში გამოყენებული ფორმის კოდი:
და აი, როგორ გამოიყენება PHP სკრიპტი HTML არჩევის ვარიანტის მნიშვნელობის მისაღებად:
".$_POST["selphp"].""; } ?>
თუ ფორმას აქვს GET მეთოდი, გამოიყენეთ PHP მასივი $_GET[“”].
ჩამოსაშლელი სტილის განსაზღვრა CSS-ით
ახლა მოდით შევხედოთ ჩამოსაშლელ სიას როგორ შევქმნათ სტილი.
იხილეთ ონლაინ დემო და კოდი
box-shadow თვისება აქ გამოიყენება ხაზოვან-გრადიენტთან ერთად. სრული CSS კოდი ასე გამოიყურება:
Selcls ( padding: 3px; კონტური: მყარი 1px #517B97; მონახაზი: 0; ფონი: -webkit-gradient(წრფივი, მარცხენა ზედა, მარცხენა 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to (#FFFFFF)); ფონი: -moz-წრფივი-გრადიენტი(ზემო, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); ყუთი-ჩრდილი: rgba(0,0,0, 0.1) 0px 0px 8px; -moz- box-shadow: rgba(0,0,0, 0,1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0,1) 0px 0px 8px; სიგანე:150px; )
მომრგვალებული კუთხეები საზღვრის რადიუსის თვისებით
HTML არჩევის ოფციისთვის ჩვენ დავაყენებთ CSS3 საზღვრის რადიუს თვისებას, რათა კუთხეები დამრგვალდეს. იცვლება ფერის სქემაც. თქვენ შეგიძლიათ ექსპერიმენტი გააკეთოთ საზღვრებით, სიგანეებით, მინდვრებით და სხვა თვისებებით, როგორც გსურთ:
იხილეთ ონლაინ დემო და კოდი
მრავალი CSS ატრიბუტისა და სტილის გამოყენება
იმისათვის, რომ მომხმარებლებს საშუალება მისცეთ აირჩიონ მრავალი ვარიანტი სიიდან, გამოიყენეთ მრავალჯერადი ატრიბუტი. ზემოთ მოყვანილ მაგალითში შესაძლებელია მხოლოდ ერთი ვარიანტის არჩევა. მრავალჯერადი გამოყენებისას შეგიძლიათ აირჩიოთ რამდენიმე ვარიანტი CTRL კლავიშის დაჭერით:
იხილეთ ონლაინ დემო და კოდი
ამ სტატიაში განვიხილავთ ელემენტებს, რომლებიც საშუალებას მოგცემთ შექმნათ ჩამოსაშლელი სიები, ვისწავლოთ როგორ შექმნათ ჯგუფები ამ სიებში, განვიხილოთ როგორ გამორთოთ ელემენტები და სიების ჯგუფებიც კი, გაეცნოთ ელემენტს, რომელიც საშუალებას გაძლევთ შექმნათ მულტი -ხაზის ტექსტის ველი, შეგიძლიათ გამოიყენოთ იგი მოგვიანებით HTML ფორმებში (ელემენტი
გარდა ამისა, ფორმის შიგნით მოვათავსეთ ღილაკი, რომელიც ემსახურება ფორმის (ელემენტ ღილაკის ტიპით "submit form": type = "submit" ).
ჩვენი მაგალითის შედეგი:
ტექსტის არეალის ინსტრუმენტების მინიშნება
ასე რომ, ჩვენ განვიხილავთ საბოლოო მაგალითს და გადავალთ სტატიის პრაქტიკულ ამოცანაზე ამ სახელმძღვანელოში.
ატრიბუტის წყალობით (HTML tag
მითითების ტექსტი იმალება, როდესაც მომხმარებელი შეაქვს მნიშვნელობას (ნებისმიერი სიმბოლო) ტექსტის ველში, თუ ის წაიშლება, ინსტრუმენტთა რჩევა კვლავ გამოჩნდება.
განვიხილოთ გამოყენების მაგალითი:
type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}
ამ მაგალითში ჩვენ შევქმენით ორი ტექსტის არე (ელემენტი
გაითვალისწინეთ, რომ თუ ტექსტის ველი არის მხოლოდ წაკითხვადი, მაშინ კონტენტის შეცვლა შეუძლებელია, მაგრამ მომხმარებელს მაინც შეუძლია კონტენტზე ნავიგაცია, არჩევა და კოპირება.
გარდა ამისა, ფორმის შიგნით მოვათავსეთ ღილაკი, რომელიც ემსახურება ფორმის (ელემენტ ღილაკის ტიპით "submit form": type = "submit" ).
ჩვენი მაგალითის შედეგი:
კითხვები და დავალებები თემაზე
სანამ შემდეგ თემაზე გადახვალთ, შეასრულეთ პრაქტიკული დავალება:
- მიღებული ცოდნის გამოყენებით შეადგინეთ ვაკანსიის გამოქვეყნების შემდეგი ფორმა:
დავალების შესრულებამდე გახსენით მაგალითი ახალ ფანჯარაში და ყურადღებით შეისწავლეთ ფორმა, რათა გაიმეოროთ მისი ყველა პუნქტი. დავალების შესასრულებლად დაგჭირდებათ ცოდნა სტატიიდან. თუ გამოგრჩათ, მაშინ დაბრუნდით მის შესასწავლად.
სავარჯიშოს დასრულების შემდეგ, შეამოწმეთ გვერდის კოდი ცალკე ფანჯარაში მაგალითის გახსნით, რათა დარწმუნდეთ, რომ ყველაფერი სწორად გააკეთეთ.
თქვენ შეგიძლიათ შექმნათ ჩამოსაშლელი სია HTML-ში ტეგის გამოყენებით აირჩიეთ. ჩამოსაშლელი (ან "ჩამოშლილი") სიის გარდა, ტეგი აირჩიეთსაშუალებას გაძლევთ შექმნათ სიის ელემენტი მრავალჯერადი შერჩევით. სინტაქსი ტეგის გამოყენებისთვის აირჩიეთ HTML ასე გამოიყურება:
აქ ტეგით ვარიანტიმოცემულია სიის ელემენტები.
განაცხადის შედეგი:
ელექტრონიკა სიროეჟკინი ჩიჟიკოვი კუკუშკინა
აირჩიეთ ტეგის ატრიბუტები
განვიხილოთ ტეგის ატრიბუტები აირჩიეთ:
- სახელი
- ზომა- სიაში ნაჩვენები ხაზების რაოდენობა (ნომერი);
- მრავალჯერადი- მოიცავს ჩამოსაშლელი სიის ელემენტების მრავალჯერადი შერჩევის ფუნქციას;
- ინვალიდი- ბლოკავს ელემენტზე წვდომას;
- ფორმა- საშუალებას გაძლევთ დააკავშიროთ ჩამოსაშლელი სია ფორმასთან (შეიძლება დაგჭირდეთ, თუ სია თავად არის ფორმის მიღმა, რომელსაც უნდა დაერთოს). ფორმის id გადაეცემა არგუმენტად.
შესაძლოა, ეს არის ტეგის ყველა მთავარი ატრიბუტი აირჩიეთრომლებიც ყველაზე ხშირად გამოიყენება. ახლა ვნახოთ, როგორ შევქმნათ ჩამოსაშლელი სია HTML-ში მითითებული ატრიბუტების გამოყენებით:
OPTION ტეგის ატრიბუტები
მონიშნეთ ვარიანტი, როგორც უკვე აღვნიშნეთ, საშუალებას გაძლევთ განსაზღვროთ ჩამოსაშლელი სიის ბავშვები აირჩიეთ, რომელიც თავის მხრივ მოქმედებს როგორც კონტეინერი. მონიშნეთ ვარიანტიაქვს თავისი ატრიბუტები:
- ინვალიდი- ადგენს აკრძალვას სიის ამ ელემენტის შერჩევაზე;
- ეტიკეტი- საშუალებას გაძლევთ დააყენოთ ლეიბლი სიის მიმდინარე ელემენტზე (ტეგში მითითებული ტექსტის ნაცვლად ნაჩვენებია ლეიბლის მნიშვნელობა, რაც საშუალებას გაძლევთ აჩვენოთ შემოკლებული მნიშვნელობა); ყურადღება: ატრიბუტი არ არის მხარდაჭერილი Firefox ბრაუზერში
- შერჩეული- სიის მიმდინარე ელემენტი შეირჩევა ნაგულისხმევად;
- ღირებულება- მნიშვნელობა, რომელიც გადაეცემა სერვერს;
მოდით შევხედოთ ტეგის მოწინავე გამოყენების შემთხვევას ვარიანტი:
ამ მაგალითის შედეგი ასე გამოიყურება:
ბატონი ელექტრონული სიროეჟკინი ჩიჟიკოვი კუკუშკინა
Nubex ვებსაიტის შემქმნელს აქვს შესაძლებლობა შექმნას მორგებული ფორმები ფორმის შემქმნელი მოდულის გამოყენებით. "Nubex"-ში ჩამოსაშლელი სიების მუშაობა აღწერილია სტატიაში: