ფორმის შექმნა HTML-ში. როგორ კეთდება ჩამოსაშლელი სია html-ში? ფორმების ჩამოსაშლელი ელემენტების ჯგუფების შექმნა

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

დღეს ჩვენ ვისწავლით როგორ შევქმნათ ჩამოსაშლელი (ჩასაშლელი) სიები, მათ შორის მრავალჯერადი არჩევანით, არჩევისა და ოფციის გამოყენებით, როგორ ავაშენოთ ტექსტის ველი 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-ში. მაგალითები ასევე აჩვენებს, თუ როგორ უნდა გააკეთოთ სტილი

მნიშვნელობის ატრიბუტის გამოყენებით

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

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

იხილეთ ონლაინ დემო და კოდი

ტეგისთვის

JavaScript-ში არჩეულ ვარიანტზე წვდომის მაგალითი

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

იხილეთ ონლაინ დემო და კოდი

HTML პარამეტრის მნიშვნელობა იყენებს შემდეგ კოდს:

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

აი, როგორ ხდება ამ მნიშვნელობის წვდომა HTML არჩევის პარამეტრი არჩეულია JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

თქვენ ასევე შეგიძლიათ წვდომა მნიშვნელობაზე jQuery $.val() მეთოდის გამოყენებით:

var selectcolor = $("#jqueryselect").val();

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

PHP სკრიპტში მნიშვნელობის მიღების მაგალითი

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

და აი, როგორ გამოიყენება PHP სკრიპტი HTML არჩევის ვარიანტის მნიშვნელობის მისაღებად:

".$_POST["selphp"].""; } ?>

თუ ფორმას აქვს GET მეთოდი, გამოიყენეთ PHP მასივი $_GET[“”].

ჩამოსაშლელი სტილის განსაზღვრა CSS-ით

ახლა მოდით შევხედოთ ჩამოსაშლელ სიას როგორ შევქმნათ სტილი.

ამ მაგალითში ჩვენ ტეგირდით

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

მენიუს ელემენტების დაჯგუფება

განვიხილოთ შემდეგი ტეგი A, რომელიც გამოიყენება ჩამოსაშლელ სიაში დაკავშირებული მონაცემების დასაჯგუფებლად სახელი = "შავი და თეთრი"> label="whitelist">

ამ მაგალითში ჩვენ შევარჩიეთ 2 ჯგუფი ტეგით . ელემენტის ეტიკეტის ატრიბუტი მიუთითებს არჩეული ჯგუფის სახელს თამამად:

შემდეგ მაგალითში, გამორთული ლოგიკური ატრიბუტის გამოყენებით, ჩვენ გავუქმებთ ერთ ჯგუფს (" ჯგუფი B"):

</span> HTML ტეგის გამორთული ატრიბუტის გამოყენების მაგალითი <optgroup><span>

ჩვენი მაგალითის შედეგი:

სიის გამორთვა და მრავალჯერადი შერჩევა

</span>ტეგის გამორთული და მრავალი ატრიბუტი <select><span>

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

მეორე სიისთვის გამოვიყენეთ მრავალჯერადი ატრიბუტი, რაც მიუთითებს იმაზე, რომ ნებადართულია სიაში ერთდროულად რამდენიმე ვარიანტის არჩევა (via ctrl Windows-ზე და მეშვეობით ბრძანება Mac-ზე).

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

ტექსტის არე

ჩვენი მაგალითის შედეგი:

ტექსტის არეალის გამორთვა

ადრე განხილული ელემენტების ანალოგიით, ტეგი


type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}

ამ მაგალითში ჩვენ შევქმენით ორი ტექსტის არე (ელემენტი