მახინჯი ფორმა html. ფორმები HTML-ში. I. მონაცემთა ხელით შეყვანა
მონიშნეთ (ინგლისურიდან ფორმა- ფორმა)აყენებს ფორმას ვებ გვერდზე.
ფორმა განკუთვნილია მომხმარებლისა და სერვერის მონაცემთა გაცვლისთვის. ფორმების გამოყენების ფარგლები არ შემოიფარგლება სერვერზე მონაცემების გაგზავნით კლიენტის სკრიპტების გამოყენებით, შეგიძლიათ შეხვიდეთ ფორმის ნებისმიერ ელემენტზე, შეცვალოთ იგი და გამოიყენოთ იგი თქვენი შეხედულებისამებრ.
დოკუმენტი შეიძლება შეიცავდეს ნებისმიერი რაოდენობის ფორმებს, მაგრამ მხოლოდ ერთი ფორმის გაგზავნა შესაძლებელია სერვერზე ერთდროულად. ამ მიზეზით, ფორმის მონაცემები ერთმანეთისგან დამოუკიდებელი უნდა იყოს.
ფორმის სერვერზე გასაგზავნად გამოიყენეთ Submit ღილაკი, იგივე შეიძლება მიღწეული იქნას ფორმაში Enter კლავიშის დაჭერით. თუ ფორმაზე აკლია გაგზავნის ღილაკი, შეიყვანეთ გასაღებიბაძავს მის გამოყენებას.
როდესაც ფორმა გადაეგზავნება სერვერს, მონაცემთა კონტროლი გადაეცემა პროგრამას, რომელიც მითითებულია ელემენტის ქმედების ატრიბუტით.
დახურვის ტეგი საჭიროა.
ვაი არია
როლის ნაგულისხმევი მნიშვნელობა: ფორმა
როლის სწორი მნიშვნელობები:
არცერთი
პრეზენტაცია
ძებნა
ატრიბუტები
Accept-charset - ადგენს კოდირებას, რომელშიც სერვერს შეუძლია მონაცემების მიღება და დამუშავება.
action - პროგრამის ან დოკუმენტის მისამართი, რომელიც ამუშავებს ფორმის მონაცემებს.
autocomplete - ჩართავს ფორმის ველების ავტომატურ შევსებას.
enctype - ფორმის მონაცემების კოდირების გზა.
მეთოდი - HTTP პროტოკოლის მეთოდი.
სახელი - ფორმის დასახელება.
novalidate - აუქმებს ფორმის მონაცემების ჩაშენებულ ვალიდაციას შეყვანის სისწორისთვის.
target - ფანჯრის ან ჩარჩოს სახელი, სადაც დამმუშავებელი ჩატვირთავს დაბრუნებულ შედეგს.
მიღება-ჩარჩოების ნაკრები
ადგენს დაშიფვრას, რომელშიც სერვერს შეუძლია მიიღოს და დაამუშავოს ფორმის მონაცემები.
სინტაქსი
ღირებულებები
კოდირების სახელი, მაგალითად Windows-1251, UTF-8 და ა.შ.
ნაგულისხმევი მნიშვნელობა
გვერდის კოდირების ნაკრები.
მოქმედება
განსაზღვრავს დამმუშავებელს, რომ ფორმის მონაცემებზე წვდომა ხდება სერვერზე გაგზავნისას. შეუძლია იმოქმედოს როგორც დამმუშავებელი სერვერის პროგრამაან HTML დოკუმენტი, რომელიც შეიცავს სერვერის მხარეს სკრიპტებს (მაგ. Parser). მას შემდეგ, რაც დამმუშავებელი ასრულებს მოქმედებებს ფორმის მონაცემებზე, ის აბრუნებს ახალ HTML დოკუმენტს.
თუ ქმედების ატრიბუტი აკლია, მიმდინარე გვერდი ხელახლა იტვირთება, რაც ფორმის ყველა ელემენტს უბრუნებს ნაგულისხმევ მნიშვნელობებს.
სინტაქსი
ღირებულებები
ღირებულება აღებულია როგორც სრული ან შედარებითი გზასერვერის ფაილზე.
ნაგულისხმევი მნიშვნელობა
ავტომატური დასრულება
აკონტროლებს ფორმის ველების ავტომატურ შევსებას. მნიშვნელობა შეიძლება გადაფარდეს ავტომატური შევსების ატრიბუტით კონკრეტული ფორმის ელემენტებზე.
ავტომატური შევსება ხორციელდება ბრაუზერის მიერ, რომელიც იმახსოვრებს მნიშვნელობებს, რომლებიც დაწერილია პირველად შეყვანისას და შემდეგ ცვლის მათ, როდესაც ხელახლა აკრეფთ მას ფორმის ველებში. ამ შემთხვევაში, ავტომატური დასრულება შეიძლება გამორთოთ ბრაუზერის პარამეტრებში და არ შეიძლება შეიცვალოს ამ შემთხვევაში ავტომატური შევსების ატრიბუტის გამოყენებით.
ტექსტის პირველი ასოების შეყვანისას გამოჩნდება ადრე შენახული მნიშვნელობების სია, საიდანაც შეგიძლიათ აირჩიოთ ის, რაც გჭირდებათ.
სინტაქსი
ღირებულებები
ჩართულია - რთავს ფორმის ავტომატურ შევსებას.
გამორთულია - გამორთავს ავტომატურ შევსებას. ეს მნიშვნელობა ჩვეულებრივ გამოიყენება იმისათვის, რომ ბრაუზერმა არ შეინახოს მნიშვნელოვანი მონაცემები (პაროლები, საბანკო ბარათის ნომრები), ასევე იშვიათად შეყვანილი ან უნიკალური მონაცემები (captcha).
ნაგულისხმევი მნიშვნელობა
ენქტიპი
განსაზღვრავს, თუ როგორ ხდება ფორმის მონაცემების კოდირება სერვერზე გაგზავნისას. როგორც წესი, არ არის საჭირო enctype ატრიბუტის დაყენება. თუმცა, თუ იყენებთ ფაილის წარდგენის ველს (შეყვანის ტიპი = "ფაილი"), თქვენ უნდა განსაზღვროთ enctype ატრიბუტი, როგორც multipart/form-data .
სინტაქსი
ღირებულებები
განაცხადი/x-www-form-urlencoded - ინტერვალის ნაცვლად, ჩასვით + , მათ მიერ დაშიფრულია ისეთი სიმბოლოები, როგორიცაა რუსული ასოები თექვსმეტობითი მნიშვნელობები(მაგალითად, %D0%90%D0%BD%D1%8F ანას ნაცვლად).
მრავალნაწილიანი/ფორმა-მონაცემები - მონაცემები არ არის კოდირებული. ეს მნიშვნელობა გამოიყენება ფაილების გაგზავნისას.
ტექსტი/უბრალო - სივრცეები ჩანაცვლებულია + ნიშნით, ასოები და სხვა სიმბოლოები არ არის კოდირებული.
ნაგულისხმევი მნიშვნელობა
განაცხადი/x-www-form-urlencoded
მეთოდი
მეთოდის ატრიბუტი სერვერს ეუბნება მოთხოვნის მეთოდის შესახებ.
სინტაქსი
ღირებულებები
მეთოდის ატრიბუტის მნიშვნელობა არ არის რეგისტრირებული. არსებობს ორი მეთოდი - მიღება და გამოქვეყნება.
get - ეს მეთოდი ერთ-ერთი ყველაზე გავრცელებულია და შექმნილია საჭირო ინფორმაციის მისაღებად და მონაცემების გადასაცემად მისამართის ზოლი. სახელი=მნიშვნელობის წყვილები შემდეგ ემატება მისამართს კითხვის ნიშნის შემდეგ და გამოყოფილია ამპერსანტით (& სიმბოლო). მიღების მეთოდის გამოყენების მოხერხებულობა იმაში მდგომარეობს, რომ მისამართი ყველა პარამეტრით შეიძლება გამოყენებულ იქნას არაერთხელ, შეინახოთ იგი, მაგალითად, თქვენი ბრაუზერის სანიშნეებში, ასევე შეგიძლიათ შეცვალოთ პარამეტრის მნიშვნელობები პირდაპირ მისამართების ზოლში.
პოსტი - პოსტის მეთოდიაგზავნის მონაცემებს სერვერზე ბრაუზერის მოთხოვნით. ეს საშუალებას გაძლევთ გაგზავნოთ მეტიმონაცემები, ვიდრე ხელმისაწვდომია მიიღეთ მეთოდი, რადგან პოსტს არ აქვს 4Kb ლიმიტი. დიდი მოცულობებიმონაცემები გამოიყენება ფორუმებში, საფოსტო მომსახურება, მონაცემთა ბაზის შევსება, ფაილების გაგზავნისას და ა.შ.
ნაგულისხმევი მნიშვნელობა
სახელი
განსაზღვრავს უნიკალური სახელიფორმები. როგორც წესი, ფორმის სახელი გამოიყენება მის ელემენტებზე წვდომისათვის სკრიპტების საშუალებით.
სინტაქსი
ღირებულებები
სახელი არის სიმბოლოების ნაკრები, მათ შორის რიცხვები და ასოები. JavaScript არის რეგისტრის სენსიტიური, ამიტომ სკრიპტების საშუალებით ფორმაზე სახელის წვდომისას გამოიყენეთ იგივე მართლწერა, როგორც სახელის ატრიბუტი.
ნაგულისხმევი მნიშვნელობა
განაახლებს
აუქმებს მომხმარებლის მიერ სისწორისთვის ფორმაში შეყვანილი მონაცემების ჩაშენებულ გადამოწმებას. ეს შემოწმება ხორციელდება ავტომატურად ბრაუზერის მიერ, როდესაც ფორმა იგზავნება სერვერზე და ხდება ველებისთვის , , ასევე თუ არსებობს ნიმუში ან საჭირო ატრიბუტი.
სინტაქსი
ღირებულებები
ნაგულისხმევი მნიშვნელობა
ნაგულისხმევად ეს ატრიბუტი გამორთულია.
სამიზნე
მას შემდეგ, რაც ფორმის დამმუშავებელი მიიღებს მონაცემებს, ის აბრუნებს შედეგს HTML დოკუმენტის სახით. თქვენ შეგიძლიათ განსაზღვროთ ჩარჩო, რომელშიც იტვირთება მიღებული ვებ გვერდი. ამ მიზნით გამოიყენება სამიზნე ატრიბუტი, მისი მნიშვნელობა არის ჩარჩოს სახელი. თუ სამიზნე არ არის დაყენებული, დაბრუნებული შედეგი ნაჩვენებია მიმდინარე ჩანართში.
სინტაქსი
ღირებულებები
მნიშვნელობა არის ჩარჩოს სახელი, რომელიც მითითებულია ელემენტის სახელის ატრიბუტით
_parent - იტვირთება გვერდი მშობლის ჩარჩოში; თუ არ არის ჩარჩოები, მაშინ ეს მნიშვნელობა მუშაობს _self-ის მსგავსად.
_top - აუქმებს ყველა ფრეიმს და იტვირთება გვერდი ბრაუზერის ფანჯარაში; თუ არ არის ჩარჩოები, მაშინ ეს მნიშვნელობა მუშაობს _self-ის მსგავსად.
ნაგულისხმევი მნიშვნელობა
სპეციფიკაციები
მაგალითები
ფორმა
HTML ფორმები რთული ინტერფეისის ელემენტებია. მათ შორისაა სხვადასხვა ფუნქციური ელემენტები: შეყვანის ველები და
ყველაზევებ ფორმის ინფორმაცია გადაეცემა ელემენტის გამოყენებით . ტექსტის ერთი ხაზის შესაყვანად გამოიყენეთ ელემენტი , მრავალი ხაზისთვის - ელემენტი
ელემენტი
გვარიგვარიგვარი
ფორმის ველები შეიძლება დაიყოს ლოგიკურ ბლოკებად ელემენტის გამოყენებით
. ბრაუზერი გამოჩნდება
ფორმის ელემენტების ჯგუფის გარშემო ჩარჩოს სახით. ჩარჩოს გარეგნობა შეიძლება შეიცვალოს Cascading Style Sheets (CSS) გამოყენებით. თითოეული ჯგუფისთვის სათაურის დასამატებლად დაგჭირდებათ ელემენტი , რომელიც განსაზღვრავს ჯგუფის სათაურის ტექსტს, რომელიც უნდა ჩასვა ჩარჩოში.
HTML-ში ფორმები ყველაზე რთული, მაგრამ მეორეს მხრივ, ალბათ ყველაზე საინტერესო თემაა HTML-ში.
ვებ ფორმები საშუალებას აძლევს საიტის ვიზიტორებს შეიყვანონ გარკვეული ინფორმაცია სპეციალურ ველებში და დეველოპერი იღებს მას მისთვის მოსახერხებელი ფორმით.
ფორმის მაგალითი შეიძლება იყოს სტუმრების წიგნი, კითხვარი ან ონლაინ ტესტი. ფორმები ივსება ვებგვერდზე რეგისტრაციისას, ონლაინ მაღაზიაში შეკვეთის განთავსებისას და ა.შ.
HTML-ის გამოყენებით, შეგიძლიათ შექმნათ ფორმის ჩარჩო: ტექსტის ველები, მენიუები, სიები, ღილაკები, საკონტროლო ველები და რადიო ღილაკები. ანუ ის ელემენტები, რომელთა დახმარებითაც გარკვეული ინფორმაცია შედის ფორმაში.
შემდეგ ფორმაში შეტანილი მონაცემები იგზავნება სერვერზე დასამუშავებლად. მაგრამ HTML აქ უძლურია – მასზე მიმაგრებული პროგრამა ან სკრიპტი უკვე მუშაობს ფორმის დამუშავებაზე. ასეთი პროგრამები ჩვეულებრივ იწერება PHP ან JavaScript-ში.
ფორმის ატრიბუტები - ტეგი
.
მოქმედების ატრიბუტი სავალდებულოა ნებისმიერი ფორმისთვის - ის მიუთითებს ფაილის მისამართს, რომელიც ემსახურება ფორმას ( ამუშავებს მასში შეყვანილ მონაცემებს).
მეთოდის ატრიბუტი განსაზღვრავს, თუ როგორ ხდება ფორმის შინაარსის გაგზავნა. არსებობს ორი მეთოდი - GET და POST. ახლა აზრი არ აქვს ამ პარამეტრებში ჩაღრმავებას, რადგან GET და POST მეთოდების გამოყენებით ინფორმაციის გაგზავნის თემა ეხება მონაცემთა დამუშავების ენებს ( მაგალითად PHP). საკმარისია იცოდეთ, რომ ეს არის POST მონაცემთა გადაცემის მეთოდი, რომელიც გამოიყენება უმეტეს შემთხვევაში ფორმებში.
ტეგის სახელის ატრიბუტი
კარდინალური მიმართულება არის ოთხი ძირითადი მიმართულებიდან ერთ-ერთი:
მსოფლიოს 7 საოცრება!
კარდინალური მიმართულება არის ოთხი ძირითადი მიმართულებიდან ერთ-ერთი:
ჩრდილო სამხრეთ-დასავლეთი აღმოსავლეთი
მსოფლიოს 7 საოცრება!
კეოფსის პირამიდა ბაბილონის ჩამოკიდებული ბაღები ზევსის ქანდაკება ოლიმპიაში არტემიდას ტაძარში ეფესოს მავზოლეუმში, ალექსანდრიის როდოსის შუქურა ჰალიკარნასუსის კოლოსში
მრავალხაზოვანი ტექსტის ველი - ტეგი
მონიშნეთ
ტეგის სახელის ატრიბუტი
გამორთული ატრიბუტი გამორთავს ველს - ველის შიგთავსის შეცვლა შეუძლებელია და მიუწვდომელია. readonly ატრიბუტი მიუთითებს, რომ ველი მხოლოდ წაკითხულია - მომხმარებელს არ აქვს კონტენტის რედაქტირების შესაძლებლობა, მაგრამ ის ხელმისაწვდომია - შესაძლებელია მისი შერჩევა და, მაგალითად, კოპირება.
თქვენ შეგიძლიათ დააყენოთ ტექსტის ველის სიგანე სიმბოლოებში და ველის სიმაღლე ხაზებში, შესაბამისად cols და rows ატრიბუტების გამოყენებით.
თუ ველის შინაარსი აღემატება მის ზომას, გამოჩნდება სლაიდერი.
ფორმის გამოყენების მაგალითი
ახლა ვნახოთ, როგორ მუშაობს ფორმა.
საგანმანათლებლო ვიდეო შეკვეთის ფორმა:
შენი სახელი: *
თქვენი შეკვეთა:
აირჩიეთ მედია:
CD
DVD
USB ფლეშ
თქვენი ელფოსტა: *
თქვენი მისამართი: *
ძირითადი HTML ტეგების გათვალისწინებით, ჩვენ არ შეგვიძლია არ შევეხოთ ისეთ მნიშვნელოვან ელემენტს, როგორიცაა ფორმები. უკუკავშირი ხშირად საჭიროა ვებ გვერდებზე. მაგალითად, საიტზე ფორმის შევსება, რეგისტრაცია, ავტორიზაცია, კომენტარები და ა.შ. ყველა ამ შემთხვევაში მომხმარებელი ავსებს სპეციალურ უბნებს (ფორმის ველებს) გვერდზე, რის შემდეგაც მონაცემები იგზავნება სერვერზე. ფორმები გამოიყენება უკუკავშირის შესაქმნელად. ფორმა არის HTML დოკუმენტის ფრაგმენტი, რომელიც განკუთვნილია მომხმარებლის შეყვანისთვის.
სურათზე ნაჩვენებია სტუდენტის რეგისტრაციის ფორმა საგანმანათლებლო დაწესებულების ვებგვერდზე.
ფორმის შესაქმნელად გამოიყენება კონტეინერი
მოქმედების ატრიბუტით, რომელიც განსაზღვრავს სერვერზე გვერდს, რომელიც დაამუშავებს ფორმის მიერ გაგზავნილ მონაცემებს.
სტრუქტურა უმარტივესი ფორმით:
ფორმის ელემენტები...
თითოეულ ფორმას ასევე უნდა ჰქონდეს გაგზავნის ღილაკი ფორმის შევსების შემდეგ მონაცემების გასაგზავნად.
ღილაკის სტრუქტურა:
ასე რომ, ფორმის თითქმის ყველა ელემენტის ჩასაწერად გამოიყენება ტეგი ტიპის ატრიბუტით. ღილაკის შესაქმნელად, რომელიც აღადგენს ყველა მონაცემს ფორმებიდან, გამოიყენეთ შემდეგი სტრუქტურა:
ტექსტური ველის შესაქმნელად, არის ტექსტის პარამეტრი. გამოიყენება შემდეგი პარამეტრები: სახელი – ველის სახელი; ზომა – ველისთვის სიმბოლოებში; maxlength – ველში სიმბოლოების მაქსიმალური შესაძლო რაოდენობა; მნიშვნელობა - ფორმაში ნაგულისხმევად ნაჩვენები ინფორმაცია
ფორმის ჩანაწერის მაგალითი ორი ტექსტური ველით:
შეიყვანეთ სახელი:
შეიყვანეთ გვარი:
ფორმის შედეგი ნაჩვენებია ფიგურაში.
თუ თქვენ გჭირდებათ დიდი რაოდენობით ინფორმაციის შეყვანა ტექსტის ველში, მაგალითად, კომენტარი, გამოიყენეთ ტექსტის არეალის ფორმა, რომელიც იქმნება ტეგის გამოყენებით.
ზემოთ მოცემულ კოდს დავუმატოთ ტექსტის არეალის ველი:
კომენტარი:
ტექსტის ზონასთან მუშაობის კოდის შედეგი ნაჩვენებია სურათზე.
ფორმების შემდეგი ელემენტია სიები, რომლებიც საშუალებას გაძლევთ გააკეთოთ არჩევანი წარმოდგენილი მნიშვნელობების ნაკრებიდან. ტეგები საშუალებას გაძლევთ შექმნათ სიის ფორმა
სიაში შესვლის სტრუქტურა:
იმისთვის, რომ ელემენტი ხაზგასმული იყოს გვერდის ჩატვირთვისას, აუცილებელია ტეგში
შერჩევის მსგავსი მეთოდია ჩამრთველი და რადიოღილაკის ფორმის ელემენტები. განსხვავება ამ ელემენტებს შორის არის ის, რომ ჩამრთველი საშუალებას გაძლევთ გააკეთოთ რამდენიმე არჩევანი, ხოლო რადიო ღილაკი მხოლოდ ერთი არჩევის საშუალებას იძლევა.
მოსანიშნი ველისა და რადიო ღილაკის ჩანაწერის სტრუქტურა:
ტექსტი
რადიო ღილაკი:
ტექსტი
სტრუქტურაში მითითებულ ელემენტებში, მონიშნული ატრიბუტი ნაგულისხმევად გამოიყენება ჩამრთველის ველისა და რადიო ღილაკის ხაზგასასმელად. ჩამრთველის, რადიო ღილაკის და HTML კოდის გამოყენების მაგალითი ნაჩვენებია სურათზე.
ფორმის კიდევ ერთი ელემენტია ღილაკი, რომელიც მითითებულია type tag ატრიბუტის გამოყენებით მნიშვნელობის ღილაკით:
ღილაკის შექმნის მითითებულ კოდში არის onclick პარამეტრი, რომელიც ჩვეულებრივ აკონკრეტებს კოდს პროგრამირების ენაზე კონკრეტული მოქმედების შესასრულებლად ამ ღილაკზე დაწკაპუნებისას:
სპეციალურ ფანჯარაში შეტყობინების სანახავად გამოიყენეთ JavaScript ბრძანება – aler. მაგალითის შედეგი ნაჩვენებია ფიგურაში.
სურათის ღილაკში ჩასართავად გამოიყენეთ კოდი, რომელიც ნაჩვენებია შემდეგ მაგალითში:
ვებსაიტებზე რეგისტრაციისას და შესვლისას გამოიყენება ველი დამალული ტესტით, რომელიც ნაჩვენებია ვარსკვლავებად. ეს არის პაროლის ფორმის ელემენტი:
საიტზე რეგისტრაცია ხშირად იყოფა რამდენიმე გვერდად და ყოველი მომდევნო უნდა შეიცავდეს ინფორმაციას წინადან. გადაცემული ინფორმაციის დასამალად გამოიყენება ფარული ფორმის ელემენტი:
ფარული ფორმის ელემენტი უხილავი იქნება ბრაუზერის ფანჯარაში.
ფაილების სერვერზე ასატვირთად ფორმებს აქვს ფაილის ელემენტი. ფაილების სერვერზე ატვირთვის კოდის მაგალითი წარმოდგენილია ქვემოთ:
ამრიგად, ამ თემაში ჩვენ გადავხედეთ ფორმის ელემენტებს სხვადასხვა HTML გვერდების შესაქმნელად, რომლებიც კომპიუტერზე ან სერვერზე სკრიპტის დამმუშავებლებთან ერთად საშუალებას გაძლევთ შექმნათ სრულფასოვანი ვებ აპლიკაციები.