როგორ შევქმნათ HTML ფორმა (მაგალითები ახსნილია)

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

HTML ფორმის სტრუქტურა

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

შეყვანის ელემენტები აქ

შეყვანის ელემენტები

ტექსტის ველები

ტექსტური ველები იქმნება ტეგის გამოყენებით ატრიბუტით ტიპი ჩაუყარა ტექსტი. Მაგალითად:

სახელი:




ტელეფონი

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

ტელეფონი:


თარიღი

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

Დაბადების თარიღი:


პაროლი

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

პაროლი:


არქივი

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

Ატვირთე ფაილი:


მონიშნეთ ყუთი

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

ვეთანხმები წესებსა და პირობებს

რადიო

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

სქესი:

კაცი

ქალები

ნომერი

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

თანხა:


Დიაპაზონი

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

მოცულობა:




ღილაკები

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

სახელი:




ფორმის შეყვანის დამუშავება

გაგზავნის ღილაკზე დაჭერისას, ფორმის მონაცემები იგზავნება დასამუშავებლად. ეს კეთდება ორიდან ერთი მეთოდით: GET ან POST, რომლებიც მითითებულია ატრიბუტის გამოყენებით მეთოდი ეტიკეტში .

GET მეთოდი

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

შეყვანის ელემენტები აქ

POST მეთოდი

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

შეყვანის ელემენტები აქ

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

HTML ფორმის მაგალითი ყველა ელემენტით 

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

Სარეგისტრაციო ფორმა

სახელი:



Გვარი:



ელფოსტა:



ტელეფონი:



Დაბადების თარიღი:



პაროლი:



Ატვირთე ფაილი:



ვეთანხმები წესებსა და პირობებს


სქესი:

კაცი

ქალები

თანხა:



მოცულობა:




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

ღილაკი "გაგზავნა" ბოლოს არის ის, რომელიც პასუხისმგებელია ფორმის გაგზავნაზე ატრიბუტში მითითებულ URL-ზე. მოქმედება ეტიკეტის ფორმა (ამ შემთხვევაში, "/submit_form"). იმისათვის, რომ ამ ფორმამ იმუშაოს რეალურ ვებსაიტზე, თქვენ უნდა გქონდეთ კონფიგურირებული სერვერი, რომ მიიღოთ და დაამუშავოთ ინფორმაცია ამ ფორმიდან "/submit_form" გზაზე.