უპირობო შესვლის ფორმა html. შესვლა და რეგისტრაციის ფორმა HTML5 და CSS3

HTML ტეგებისაიტზე HTML ფორმების განსაზღვრა

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

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

ნიმუში HTML ფორმა | შედით საიტზე

ტეგები, ატრიბუტები და ღირებულებები

- განსაზღვრეთ ფორმა.
name = "" - განსაზღვრავს ფორმის სახელს.
მეთოდი = "" - განსაზღვრავს ფორმიდან მონაცემების გაგზავნის მეთოდს. მნიშვნელობები: "მიღება" (ნაგულისხმევი) და "პოსტი". ხშირად გამოიყენება "პოსტის" მეთოდი, რადგან ის საშუალებას გაძლევთ გადაიტანოთ დიდი რაოდენობით მონაცემები.
action = "" - განსაზღვრავს url-ს, რომელზეც მონაცემები იგზავნება დასამუშავებლად. ჩვენს შემთხვევაში, enter_data.php ..
- განსაზღვრეთ ფორმის ისეთი ელემენტები, როგორიცაა ღილაკები, რადიო ღილაკები, ტექსტური ველები მონაცემთა შეყვანისთვის.
type = "ტექსტი" - განსაზღვრავს ტექსტურ ველს მონაცემთა შეყვანისთვის.
type = "პაროლი" - განსაზღვრავს ველს პაროლის შესაყვანად, ხოლო ტექსტი ნაჩვენებია ვარსკვლავის ან წრეების სახით.
type = "checkbox" - განსაზღვრავს ჩამრთველ ველს.
type = "დამალული" - განსაზღვრავს ფარული ელემენტიფორმები - გამოიყენება გადასატანად დამატებითი ინფორმაციასერვერზე.
ზომა = "25" - სიგრძე ტექსტური ყუთისიმბოლოებში.
maxlength = "30" - შესაყვანი სიმბოლოების მაქსიმალური რაოდენობა.
value = "" - განსაზღვრავს მნიშვნელობას, რომელიც გაიგზავნება დასამუშავებლად, თუ ეს ეხება რადიოს ღილაკებს ან გადამრთველებს. ამ ატრიბუტის მნიშვნელობა, როგორც ტექსტის ველის ან ღილაკის ნაწილი, ნაჩვენები იქნება, როგორც, მაგალითად, Vasya ან Login ზემოთ მოცემულ მაგალითში.

ნიმუში HTML ფორმა | კომენტარები საიტზე

<a href="https://obanracer.ru/ka/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">მაგალითი HTML</a>ფორმა

ტეგები, ატრიბუტები და ღირებულებები

action = "http: //site/comments.php" - განსაზღვრავს url-ს, რომელზეც გაიგზავნება მონაცემები ფორმიდან.
id = "" - განსაზღვრავს ფორმის ელემენტის სახელს, იდენტიფიკატორს.
name = "" - განსაზღვრავს ფორმის ელემენტის სახელს.
- განსაზღვრეთ ტექსტის ველი, როგორც ფორმის ნაწილი.
cols = "" - განსაზღვრავს სვეტების რაოდენობას ფორმის ტექსტურ ველში.
rows = "" - განსაზღვრავს რიგების რაოდენობას ფორმის ტექსტურ ველში.

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

ნიმუში HTML ფორმა | Ჩამოსაშლელი სია

HTML ფორმები

ტეგები, ატრიბუტები და ღირებულებები

- განსაზღვრეთ სია შერჩევის პოზიციებით.
ზომა = "" - განსაზღვრავს სიის ხილული პოზიციების რაოდენობას. თუ მნიშვნელობა არის 1, საქმე გვაქვს ჩამოსაშლელ სიასთან.
- განსაზღვრეთ სიის პოზიციები (პუნქტები).
value = "" - შეიცავს მნიშვნელობას, რომელიც გაიგზავნება ფორმის მიერ მითითებულ url-ზე დასამუშავებლად.
select = "selected" - მაგალითად ირჩევს სიის პოზიციას.

ნიმუში HTML ფორმა | გადახვევის სია

ზომის = "" ატრიბუტის მნიშვნელობის გაზრდით, ჩვენ ვიღებთ სიას გადახვევის ზოლით:

HTML ფორმები

ამ ვარიანტისთვის ვიყენებთ მრავალჯერადი = "მრავალჯერადი" დროშას, რაც შესაძლებელს ხდის რამდენიმე პოზიციის არჩევას. მისი არყოფნა მხოლოდ ერთი ნივთის არჩევის საშუალებას იძლევა.

type = "submit" - განსაზღვრავს ღილაკს.

type = "reset" - განსაზღვრავს გადატვირთვის ღილაკს.

value = "" - განსაზღვრავს ეტიკეტს ღილაკზე.

Მეტის ნახვა:

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

HTML არის სტრუქტურა და CSS არის დიზაინი. HTML5 და CSS3 არის განახლებული ვერსია დიზაინისთვის. ამ განახლების კოდირებით შექმნილი შესვლის ზოგიერთი ფორმა შეიძლება პირდაპირ გადმოიწეროს. დეველოპერმა ეს ფორმა უფასოდ გააზიარა. ეს შეიძლება გამოყენებულ იქნას ნებისმიერი პირადი საჭიროებისთვის ან ბიზნესისთვის.

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

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

მასალის დიზაინის ფორმა

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

დემო ჩამოტვირთვა

როდესაც გჭირდებათ რაიმე აპლიკაციის შესვლის ფორმის შექმნა, შეგიძლიათ გამოიყენოთ ეს Material Design შესვლის ფორმა. ეს იქნება შესანიშნავი თქვენი განაცხადისთვის.

დემო ჩამოტვირთვა

ანიმაციური SVG ავატარი

ანიმაციური შესვლის შაბლონი დიდი მოთხოვნაა. თუ გსურს გამოიყენო ის შენი პროფესიით. ეს ანიმაციური SVG Avatar შესვლის ფორმა თქვენთვის უკეთესია.

დემო ჩამოტვირთვა

შესვლის ფორმის შერყევის ეფექტი

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

დემო ჩამოტვირთვა

CSS3 Animation Cloud და შესვლის ფორმა

თუ თქვენ გაქვთ ღრუბლოვანი ბიზნესი ან გეგმავთ რაიმე ტიპის ღრუბლოვან ბიზნესს, შეგიძლიათ გამოიყენოთ ეს CSS3 Animation Cloud და შესვლის ფორმა.

დემო ჩამოტვირთვა

გაწმინდეთ შესვლის ფორმა

ეს არის ძალიან სუფთა დიზაინი და დაარქვით იგივე Clean შესვლის ფორმა. გამოიყენეთ ეს ფორმა თქვენი სუფთა ვებსაიტის.

დემო ჩამოტვირთვა

შესვლის ფორმა HTML5-ზე

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

დემო ჩამოტვირთვა

შესვლის ფორმა მხოლოდ CSS დადასტურება

დემო ჩამოტვირთვა

Css შესვლის ფორმა

დემო ჩამოტვირთვა

ბეტმენის შესვლის ფორმა

დემო ჩამოტვირთვა

შესვლის ფორმა Materializecss-ით

დემო ჩამოტვირთვა

კუთხოვანი მასალის შესვლის ფორმა

დემო ჩამოტვირთვა

საპასუხო შესვლის ფორმა

დემო ჩამოტვირთვა

საპასუხო შესვლის ფორმა

დემო ჩამოტვირთვა

მარტივი ბრტყელი ფორმა დაწნული ჩამტვირთველით

დემო ჩამოტვირთვა

შედით Everdwell-ში

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

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

მაგალითი: მარტივი HTML ფორმა

თავად სცადე"

ჩემი პირველი ფორმა:
სახელი:
გვარი:

მარტივი ფორმა

ელემენტი

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

ელემენტი

ფორმის თითქმის ყველა ველი იქმნება ელემენტის გამოყენებით (ინგლისური შეყვანიდან - შეყვანა). გარეგნობაელემენტი იცვლება მისი ატრიბუტის მნიშვნელობიდან გამომდინარე ტიპი:

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

ტექსტის და პაროლის შეყვანა

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

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

პაროლის ველით ფორმის შექმნის მაგალითი:

მაგალითი: პაროლის შეყვანის ველი

თავად სცადე"

თქვენი შესვლა:

პაროლი:

თქვენი შესვლა:

პაროლი:

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

გადამრთველები (რადიო)

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

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

თავად სცადე"

Რამდენი წლის ხარ?

18 წლამდე
18-დან 24-მდე
25-დან 35 წლამდე
35-ზე მეტი

Რამდენი წლის ხარ?

18 წლამდე
18-დან 24-მდე
25-დან 35 წლამდე
35-ზე მეტი

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

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

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

მაგალითი: გადამრთველების გამოყენება

თავად სცადე"

ჯაზი
ბლუზი
როკი
შანსონი
ქვეყანა

რა ჟანრის მუსიკა მოგწონს?

ჯაზი
ბლუზი
როკი
შანსონი
ქვეყანა

გაგზავნის და გადატვირთვის ღილაკები

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

მაგალითი: გაგზავნისა და გადატვირთვის გამოყენებით

თავად სცადე"

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

მოქმედების ატრიბუტი.

ელემენტისთვის მთავარია

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

…

დამუშავების ფაილი სერვერზეა mytestserver.comსაქაღალდეში სახელების საქაღალდედა სერვერის სკრიპტის სახელი, რომელიც დაამუშავებს მონაცემებს - obrabotchik.php... სწორედ მას გადაეცემა ვებ გვერდზე თქვენს მიერ შეყვანილი ყველა მონაცემი. .php გაფართოება მიუთითებს, რომ მითითებული ფორმა მუშავდება PHP ენაზე დაწერილი სკრიპტით. თავად დამმუშავებელი შეიძლება დაიწეროს სხვა ენაზე, მაგალითად, ეს შეიძლება იყოს სკრიპტირების ენა Python, Ruby და ა.შ.
მიზანშეწონილია ყოველთვის დააყენოთ ატრიბუტის მნიშვნელობა მოქმედება... თუ ფორმა უნდა გაგზავნოს მნიშვნელობები იმავე გვერდზე, სადაც ის მდებარეობს, მიუთითეთ ცარიელი სტრიქონი, როგორც მოქმედების ატრიბუტის მნიშვნელობა: action = "".

მეთოდის ატრიბუტი

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

POST მეთოდი

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

GET მეთოდი

როგორც უკვე იცით, ბრაუზერის მთავარი ამოცანაა სერვერიდან ვებ გვერდების მიღება. ასე რომ, როდესაც იყენებთ მეთოდს მიიღეთთქვენი ბრაუზერი უბრალოდ იღებს ვებგვერდს, როგორც ყოველთვის. მეთოდი მიიღეთასევე ახვევს ფორმის მონაცემებს, მაგრამ ამატებს მას url-ის ბოლოს, სერვერზე მოთხოვნის გაგზავნამდე. იმის გასაგებად, თუ როგორ მუშაობს მეთოდი მიიღეთ, ვნახოთ მოქმედებაში. გახსენით პირველი მაგალითი ამ გაკვეთილიდან (მაგალითი: მარტივი HTML ფორმა) notepad-ში (მაგალითად Notepad ++) და შეიტანეთ მცირე ცვლილება HTML კოდში:

იმათ. ჩანაცვლება პოსტი on მიიღეთ.
შეინახეთ ფაილი როგორც file_name.htmlდა განაახლეთ თქვენი ბრაუზერის გვერდი (F5), შემდეგ შეავსეთ ფორმა like ვასია პუპკინიდა დააჭირეთ ღილაკს "გაგზავნა". თქვენი ბრაუზერის მისამართის ზოლში ნახავთ მსგავს რაღაცას:

File_name.html? სახელი = ვასია და გვარი = პუპკინი

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

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

მნიშვნელობით დაკავშირებული ფორმის ელემენტები შეიძლება დაჯგუფდეს ტეგებს შორის

და

... ბრაუზერი გამოჩნდება

როგორც ჩარჩო ფორმის ელემენტების ჯგუფის გარშემო. ჩარჩოს გარეგნობა შეიძლება შეიცვალოს Cascading Style Sheets (CSS) გამოყენებით.
თითოეული ჯგუფისთვის სათაურის დასამატებლად საჭიროა ელემენტი , რომელიც განსაზღვრავს ჯგუფის სათაურის ტექსტს ჩარჩოში.

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

შექმნის სინტაქსი ასეთია.

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

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

მაგალითი 1. პაროლის ველი

პაროლის ველი

Შესვლა:

პაროლი:

შედეგად ვიღებთ შემდეგს (ნახ. 1).

ბრინჯი. 1. პაროლის ველის ნახვა

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

მაგალითი 2. სურათის დამატება ტექსტურ ველში

პაროლის ველი

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 2. სურათები ემატება როგორც ფონი, ამიტომ ტექსტი უნდა გადაიტანოს მარჯვნივ padding-left-ის მეშვეობით, წინააღმდეგ შემთხვევაში ის გამოჩნდება სურათზე.

ამ სტატიაში თქვენ შეისწავლით როგორ შევქმნათ რეგისტრაციისა და ავტორიზაციის ფორმა HTML, JavaScript, PHP და MySql გამოყენებით. ასეთი ფორმები გამოიყენება თითქმის ყველა საიტზე, განურჩევლად მისი ტიპისა. ისინი შექმნილია ფორუმისთვის, ონლაინ მაღაზიისთვის და სოციალური ქსელებისთვის (როგორიცაა, მაგალითად, Facebook, Twiter, Odnoklassniki) და მრავალი სხვა ტიპის საიტისთვის.

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

ცხრილის შექმნა მონაცემთა ბაზაში

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

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

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

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

id- იდენტიფიკატორი. ველი idმონაცემთა ბაზიდან ყველა ცხრილს უნდა ჰქონდეს.
სახელი- სახელის გადასარჩენად.
გვარი- გვარების გადასარჩენად.
ელ- საფოსტო მისამართის შესანახად. ჩვენ გამოვიყენებთ ელ. ფოსტას, როგორც შესვლას, ამიტომ ეს ველი უნდა იყოს უნიკალური, ანუ მას უნდა ჰქონდეს UNIQUE ინდექსი.
ელფოსტის_სტატუსს- ველი მიუთითებს, დადასტურებულია თუ არა წერილი. თუ ფოსტა დადასტურებულია, მაშინ მას ექნება მნიშვნელობა 1, წინააღმდეგ შემთხვევაში მნიშვნელობა 0.
პაროლი- პაროლის შესანახად.

თუ გსურთ, რომ თქვენს სარეგისტრაციო ფორმას კიდევ რამდენიმე ველი ჰქონდეს, შეგიძლიათ აქაც დაამატოთ.

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

მონაცემთა ბაზის კავშირი

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

ჩვენი საიტის საქაღალდეში შექმენით ფაილი სახელად dbconnect.phpდა მასში ვწერთ შემდეგ სკრიპტს:

DB კავშირის შეცდომა... შეცდომის აღწერა: ".mysqli_connect_error ()."

"; გასვლა ();) // დააყენეთ კავშირის კოდირება $ mysqli-> set_charset (" utf8"); // მოხერხებულობისთვის, მოდით აქ დავამატოთ ცვლადი, რომელიც შეიცავს ჩვენი საიტის სახელს $ address_site =" http: // testsite.local ";?>

ეს ფაილი dbconnect.phpდამმუშავებლების ფორმირებისთვის საჭირო იქნება მიმაგრება.

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

საიტის სტრუქტურა

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

ჩვენ გადავიტანთ საიტის სათაურს და ქვედა კოლონტს ცალკე ფაილები, header.phpდა ძირი.php... ჩვენ მათ ყველა გვერდზე შევიტანთ. კერძოდ, მთავარ (ფაილზე index.php), გვერდზე რეგისტრაციის ფორმის (ფაილი form_register.php) და ავტორიზაციის ფორმის მქონე გვერდზე (ფაილი form_auth.php).

დაბლოკეთ ჩვენი ბმულებით, რეგისტრაციადა ავტორიზაცია, დაამატეთ საიტის სათაურს ისე, რომ ისინი ყველა გვერდზე იყოს ნაჩვენები. ერთი ბმული შევა რეგისტრაციის ფორმის გვერდი(ფაილი form_register.php) და მეორე გვერდზე ავტორიზაციის ფორმა(ფაილი form_auth.php).

header.php ფაილის შინაარსი:

ჩვენი საიტის სახელი

შედეგად, მთავარი გვერდი ასე გამოიყურება:

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

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

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

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

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

და კიდევ ერთი რამ, თუ მომხმარებელი უკვე ავტორიზებულია და ინტერესის გამო ის პირდაპირ შედის რეგისტრაციის გვერდზე ბრაუზერის მისამართების ზოლში ჩაწერით. საიტის_მისამართი / form_register.php, მაშინ ამ შემთხვევაში, სარეგისტრაციო ფორმის ნაცვლად გამოვუტანთ სათაურს, რომ ის უკვე დარეგისტრირებულია.

ზოგადად, ფაილის კოდი form_register.phpჩვენ მივიღეთ ეს ასე:

თქვენ უკვე დარეგისტრირებული ხართ

ბრაუზერში რეგისტრაციის ფორმის გვერდი ასე გამოიყურება:

Გამოყენებით საჭირო ატრიბუტი, ჩვენ შევქმენით ყველა ველი საჭირო.

ყურადღება მიაქციეთ რეგისტრაციის ფორმის კოდს, სადაც ნაჩვენებია captcha:

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

მოდით შევხედოთ ფაილის კოდს captcha.php:

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

ფუნქციის შიგნით imageTtfText (), მითითებულია შრიფტისკენ მიმავალი გზა ვერდანა.ტტფ... ასე რომ, რომ captcha-მ სწორად იმუშაოს, ჩვენ უნდა შევქმნათ საქაღალდე შრიფტებიდა ჩადეთ შრიფტის ფაილი იქ ვერდანა.ტტფ... შეგიძლიათ იპოვოთ და გადმოწეროთ ინტერნეტიდან, ან წაიღოთ არქივიდან ამ სტატიის მასალებით.

ჩვენ დავასრულეთ HTML სტრუქტურა, დროა გადავიდეთ.

ელფოსტის მოქმედების შემოწმება jQuery-ით

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

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

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

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

jQuery ბიბლიოთეკის დასაკავშირებლად, ფაილში header.phpტეგებს შორის , დახურვის ტეგამდე , დაამატეთ ეს ხაზი:

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

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

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

Მომხმარებლის რეგისტრაცია

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

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

სანამ გავაგრძელებთ, უნდა შევამოწმოთ იყო ფორმა წარმოდგენილი საერთოდ... თავდამსხმელს შეუძლია შეხედოს ატრიბუტის მნიშვნელობას მოქმედებაფორმიდან და გაარკვიეთ რომელი ფაილი ამუშავებს ამ ფორმას. და მან შეიძლება იფიქროს პირდაპირ ამ ფაილზე გადასვლაზე, ბრაუზერის მისამართების ზოლში შემდეგი მისამართის აკრეფით: http://arees_site/register.php

ამიტომ, ჩვენ უნდა შევამოწმოთ უჯრედის არსებობა გლობალურ POST მასივში, რომლის სახელი ემთხვევა ფორმიდან ჩვენი "რეგისტრაციის" ღილაკის სახელს. ამრიგად, ვამოწმებთ, დააწკაპუნეთ თუ არა ღილაკზე „რეგისტრაცია“.

თუ თავდამსხმელი შეეცდება პირდაპირ ამ ფაილზე ნავიგაციას, ის მიიღებს შეცდომის შეტყობინებას. შეგახსენებთ, რომ $ address_site ცვლადი შეიცავს საიტის სახელს და ის დეკლარირებული იყო ფაილში dbconnect.php.

შეცდომა!მთავარი გვერდი.

"); } ?>

სესიაში captcha-ს მნიშვნელობა დაემატა ფაილში მისი გენერირებისას captcha.php... შეგახსენებთ, მე გაჩვენებთ კოდის ამ ნაწილს ფაილიდან. captcha.phpსადაც captcha მნიშვნელობა ემატება სესიას:

ახლა მოდით გადავიდეთ თავად გადამოწმებაზე. ფაილში რეგისტრაცია.php, if ბლოკის შიგნით, სადაც ვამოწმებთ დააწკაპუნეთ თუ არა ღილაკზე "რეგისტრაცია", უფრო სწორად, სად არის მითითებული კომენტარი " // (1) ადგილი კოდის შემდეგი ნაწილისთვის"ჩვენ ვწერთ:

// შეამოწმეთ მიღებული captcha // სტრიქონის დასაწყისიდან და ბოლოდან ამოკვეთა $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! ცარიელი ($ captcha)) (// შეადარეთ მიღებული მნიშვნელობა სესიის მნიშვნელობასთან. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// თუ captcha არ არის სწორი, მაშინ ჩვენ ვაბრუნებთ მომხმარებელს რეგისტრაციის გვერდზე და იქ გამოვაჩენთ შეცდომის შეტყობინებას, რომ მან არასწორი captcha შეიყვანა $error_message = "

შეცდომა!თქვენ შეიყვანეთ არასწორი captcha

"; // შეინახეთ შეცდომის შესახებ შეტყობინება სესიაზე. $ _SESSION [" error_messages "] = $ error_message; // დააბრუნეთ მომხმარებელი რეგისტრაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: " $ Address_site . "/ form_register.php"); // შეაჩერე სკრიპტის გასვლა ();) // (2) მოათავსეთ კოდის შემდეგი ნაწილი) სხვა (// თუ captcha არ არის გადაცემული ან ცარიელია, გასასვლელი "

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

"); }

შემდეგი, ჩვენ უნდა დავამუშაოთ მიღებული მონაცემები POST მასივიდან. უპირველეს ყოვლისა, ჩვენ უნდა შევამოწმოთ გლობალური POST მასივის შინაარსი, ანუ არის თუ არა უჯრედები ჩვენი ფორმიდან შეყვანის ველების სახელების შესაბამისი სახელებით.

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

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

ჩასვით ეს კოდი მითითებულ ადგილას " // (2) ადგილი კოდის შემდეგი ნაწილისთვის".

/ * ჩვენ ვამოწმებთ არის თუ არა ფორმიდან გაგზავნილი მონაცემები გლობალურ მასივში $ _POST და წარდგენილ მონაცემებს ვამაგრებთ ჩვეულებრივ ცვლადებში. სტრიქონის დასაწყისი და ბოლოდან $ first_name = trim ($ _ POST ["first_name"]); // შეამოწმეთ ცვლადი სიცარიელისთვის, თუ (! ცარიელი ($ first_name)) (// უსაფრთხოების მიზნით, გადააკეთეთ სპეციალური სიმბოლოები HTML ერთეულები $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES) ;) სხვა (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages"]. = "

შეიყვანეთ თქვენი სახელი

სახელის ველი აკლია

"; // დააბრუნეთ მომხმარებელი რეგისტრაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ მისამართი_საიტი." / Form_register.php "); // სკრიპტის გასვლის შეჩერება (); ) if ( isset ($ _ POST ["last_name"])) (// ამოჭრა სივრცეები სტრიქონის დასაწყისიდან და ბოლოდან $ last_name = მორთვა ($ _ POST ["last_name"]); if (! ცარიელი ($ last_name )) (// უსაფრთხოების მიზნით, გადააკეთეთ სპეციალური სიმბოლოები HTML ერთეულებად $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) სხვა (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages"]. = "

შეიყვანეთ თქვენი გვარი

გვარის ველი აკლია

"; // დააბრუნეთ მომხმარებელი რეგისტრაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ მისამართი_საიტი." / Form_register.php "); // სკრიპტის გასვლის შეჩერება (); ) if ( isset ($ _ POST ["ელფოსტა"])) (// სტრიქონის დასაწყისიდან და ბოლოდან შუალედების ამოჭრა $ email = მორთვა ($ _ POST ["ელფოსტა"]); if (! ცარიელი ($ ელფოსტა )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) კოდის ადგილი ელექტრონული ფოსტის მისამართის ფორმატისა და მისი უნიკალურობის შესამოწმებლად) სხვა (// შეცდომის შეტყობინების შენახვა სესიაზე. $ _SESSION [ "error_messages"]. = "

Შეიყვანეთ თქვენი ელექტრონული ფოსტა

"; // დააბრუნეთ მომხმარებელი რეგისტრაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ მისამართი_საიტი." / Form_register.php "); // სკრიპტის გასვლის შეჩერება (); ) if ( isset ($ _ POST ["პაროლი"])) (// სტრიქონის დასაწყისიდან და ბოლოდან ამოკვეთეთ სივრცეები $ password = trim ($ _ POST ["პაროლი"]); if (! ცარიელი ($ პაროლი)) ($ პაროლი = htmlspecialchars ($ პაროლი, ENT_QUOTES); // დაშიფრეთ paprol $ პაროლი = md5 ($ პაროლი. "top_secret");) სხვა (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION [" error_messages"]. = "

Შეიყვანეთ თქვენი პაროლი

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

მითითებულ ადგილას" // (3) კოდის ადგილი საფოსტო მისამართის ფორმატის და მისი უნიკალურობის შესამოწმებლად"დაამატეთ შემდეგი კოდი:

// შეამოწმეთ მიღებული ელექტრონული ფოსტის მისამართის ფორმატი ჩვეულებრივი გამოთქმის გამოყენებით $ reg_email = "/^**@(+(*+)*\.)++/i"; // თუ მიღებული ელფოსტის მისამართის ფორმატი არ ემთხვევა ჩვეულებრივ გამონათქვამს if (! Preg_match ($ reg_email, $ email)) (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages"]. = "

თქვენ შეიტანეთ არასწორი ელფოსტა

"; // დააბრუნეთ მომხმარებელი რეგისტრაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ მისამართი_საიტი." / Form_register.php "); // სკრიპტის გასვლის შეჩერება (); ) // ვამოწმებთ არის თუ არა ასეთი მისამართი მონაცემთა ბაზაში $ Result_query = $ mysqli-> query ("SELECT` email` FROM `users` WHERE` email` = "". $ Email. "" "); // თუ მიღებული სტრიქონების რაოდენობა ზუსტად ერთია, ასე რომ მომხმარებელი ამ ელფოსტის მისამართით უკვე დარეგისტრირებულია, თუ ($ result_query-> num_rows == 1) (// თუ შედეგი არ არის მცდარი, თუ (($ row = $ result_query -> fetch_assoc ())! = false) (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages"]. = "

ამ საფოსტო მისამართის მომხმარებელი უკვე რეგისტრირებულია

"; // დააბრუნეთ მომხმარებელი სარეგისტრაციო გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ Address_site." / Form_register.php ");) else (// შეინახეთ შეცდომის შეტყობინება სესიაზე $ _SESSION ["error_messages"]. = "

შეცდომა მონაცემთა ბაზის მოთხოვნაში

"; // დააბრუნეთ მომხმარებელი სარეგისტრაციო გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ Address_site." / Form_register.php ");) / * დახურეთ არჩევანი * / $ result_query-> close (); // შეაჩერე სკრიპტის გასვლა ();) / * შერჩევის დახურვა * / $ result_query-> დახურვა ();

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

// მომხმარებლის მონაცემთა ბაზაში დამატების მოთხოვნა $ result_query_insert = $ mysqli-> შეკითხვა ("INSERT INTO` users" (first_name, გვარი, ელფოსტა, პაროლი) VALUES ("". $ First_name. "", "". $ Last_name " "," ". $ ელფოსტა." "," ". $ პაროლი." ")"); if (! $ result_query_insert) (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages"]. = "

შეცდომის მოთხოვნა მონაცემთა ბაზაში მომხმარებლის დამატების შესახებ

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

"; // მომხმარებლის გაგზავნა ავტორიზაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ Address_site." / Form_auth.php ");) / * მოთხოვნის შევსება * / $ result_query_insert-> close (); // მონაცემთა ბაზის კავშირის დახურვა $ mysqli-> close ();

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

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

ელ.ფოსტის მისამართის ფორმატის და პაროლის სიგრძის შემოწმების სკრიპტი არის ფაილში header.php, ასე რომ ის იმოქმედებს ამ ფორმის ველებზეც.

სხდომა ასევე იწყება ფაილში header.php, ასე რომ ფაილში form_auth.phpთქვენ არ გჭირდებათ სესიის დაწყება, რადგან ჩვენ მივიღებთ შეცდომას.

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

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

მომხმარებლის ავტორიზაცია

მნიშვნელობის ატრიბუტისთვის მოქმედებაავტორიზაციის უნარს აქვს ფაილი auth.php, ეს ნიშნავს, რომ ფორმა დამუშავდება ამ ფაილში.

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

// გამოაცხადეთ უჯრედი იმ შეცდომების დასამატებლად, რომლებიც შეიძლება მოხდეს ფორმის დამუშავებისას. $ _SESSION ["error_messages"] = ""; // გამოაცხადეთ უჯრედი წარმატებული შეტყობინებების დასამატებლად $ _SESSION ["success_messages"] = "";

/ * შეამოწმეთ არის თუ არა ფორმა გაგზავნილი, ანუ დააწკაპუნეთ თუ არა ღილაკზე შესვლა. თუ კი, მაშინ განაგრძეთ, თუ არა, მაშინ უჩვენეთ შეცდომის შეტყობინება მომხმარებელს, რომელშიც ნათქვამია, რომ ის პირდაპირ გადავიდა ამ გვერდზე. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! ცარიელი ($ _ POST ["btn_submit_auth"])) (// (1) ადგილი კოდის შემდეგი ნაწილისთვის) სხვა (გასვლა ("

შეცდომა!თქვენ პირდაპირ შეხვედით ამ გვერდზე, ასე რომ არ არის დასამუშავებელი მონაცემები. შეგიძლიათ გადახვიდეთ მთავარ გვერდზე.

"); }

// შეამოწმეთ მიღებული captcha if (isset ($ _ POST ["captcha"])) (// შეასწორეთ სივრცეები სტრიქონის დასაწყისიდან და ბოლოდან $ captcha = trim ($ _ POST ["captcha"]); თუ (! ცარიელი ($ captcha )) (// შეადარეთ მიღებული მნიშვნელობა სესიის მნიშვნელობასთან. თუ (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// თუ captcha არ არის სწორი, მაშინ ჩვენ ვაბრუნებთ მომხმარებელს ავტორიზაციის გვერდზე და იქ გამოვაჩენთ შეცდომის შეტყობინებას, რომ მან არასწორი captcha შეიყვანა. $ error_message = "

შეცდომა!თქვენ შეიყვანეთ არასწორი captcha

შეცდომა! captcha შეყვანის ველი არ უნდა იყოს ცარიელი.

"; // შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION [" error_messages "] = $ error_message; // დააბრუნეთ მომხმარებელი ავტორიზაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: " $ Address_site . "/ form_auth.php"); // შეაჩერე სკრიპტის გასვლა ();) // (2) ადგილი ფოსტის მისამართის დასამუშავებლად // (3) ადგილი პაროლის დასამუშავებლად // (4) ადგილი შეკითხვის გაკეთება მონაცემთა ბაზაში) else (// თუ captcha არ არის გადასული, გადით ("

"); }

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

საფოსტო მისამართის შემოწმება

// სტრიქონის დასაწყისიდან და ბოლოდან შუალედების ამოჭრა $ email = trim ($ _ POST ["email"]); if (isset ($ _ POST ["email"])) (if (! ცარიელი ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // შეამოწმეთ მიღებული ელფოსტის მისამართის ფორმატი რეგულარული გამოხატვის გამოყენებით $ reg_email = " /^**@(+(*+)*\.)++/i "; // თუ მიღებული ელფოსტის მისამართის ფორმატი არ ემთხვევა ჩვეულებრივ გამოთქმას, if (! preg_match ($ reg_email, $ ფოსტა)) (// შენახვა სესიის შეცდომის შეტყობინებაში. $ _SESSION ["error_messages"]. = "

თქვენ შეიყვანეთ არასწორი ელფოსტა

"; // დააბრუნეთ მომხმარებელი ავტორიზაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ მისამართი_საიტი." / Form_auth.php "); // შეაჩერე სკრიპტის გამოსვლა (); )) else (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages"]. = "

საფოსტო მისამართის (ელ. ფოსტის) შეყვანის ველი არ უნდა იყოს ცარიელი.

ელფოსტის ველი აკლია

"; // დააბრუნეთ მომხმარებელი ავტორიზაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ მისამართი_საიტი." / Form_auth.php "); // შეაჩერე სკრიპტის გამოსვლა (); ) // (3) ფართი პაროლის დასამუშავებლად

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

პაროლის შემოწმება

შემდეგი ველი, რომელიც უნდა დამუშავდეს, არის პაროლის ველი. მითითებულ ადგილას" // (3) ადგილი პაროლის დასამუშავებლად", ჩვენ ვწერთ:

If (isset ($ _ POST ["პაროლი"])) (// ამოაჭრეთ სივრცეები სტრიქონის დასაწყისიდან და ბოლოდან $ password = trim ($ _ POST ["პაროლი"]); if (! ცარიელი ($ პაროლი )) ($ პაროლი = htmlspecialchars ($ პაროლი, ENT_QUOTES); // დაშიფრეთ პაროლი $ password = md5 ($ პაროლი. "top_secret");) სხვა (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages "]. = "

Შეიყვანეთ თქვენი პაროლი

პაროლის შეყვანის ველი არ არის

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

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

// მოთხოვნა მონაცემთა ბაზაში მომხმარებლის შერჩევის შესახებ. $ result_query_select = $ mysqli-> შეკითხვა ("SELECT * FROM` users` WHERE email = "". $ email. "" AND პაროლი = "". $ პაროლი. "" "); if (! $ result_query_select) (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages"]. = "

მოითხოვეთ შეცდომა მომხმარებლის მონაცემთა ბაზიდან ამოღებისას

"; // დააბრუნეთ მომხმარებელი რეგისტრაციის გვერდის სათაურში (" HTTP / 1.1 301 Moved Permanently "); header (" მდებარეობა: ". $ მისამართი_საიტი." / Form_auth.php "); // შეაჩერე სკრიპტის გამოსვლა (); ) else ( // შეამოწმეთ თუ არ არის ასეთი მონაცემების მომხმარებელი მონაცემთა ბაზაში, შემდეგ აჩვენეთ შეცდომის შეტყობინება, თუ ($ result_query_select-> num_rows == 1) (// თუ შეყვანილი მონაცემები ემთხვევა მონაცემთა ბაზიდან, შემდეგ შეინახეთ შესვლა და პაროლი სესიის მასივში. $ _SESSION ["email"] = $ ელფოსტა; $ _SESSION ["პაროლი"] = $ პაროლი; // დააბრუნეთ მომხმარებელი მთავარი გვერდისათაური ("HTTP / 1.1 301 გადაადგილებულია მუდმივად"); header ("Location:". $ address_site. "/ index.php"); ) else (// შეინახეთ შეცდომის შეტყობინება სესიაზე. $ _SESSION ["error_messages"]. = "

არასწორი მომხმარებლის სახელი და/ან პაროლი

გამოდით საიტიდან

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

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

შეცვლილია კოდის ნაწილი ფაილიდან header.php:

რეგისტრაცია

გამომავალი

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

ფაილის კოდი logout.php:

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

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

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

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

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

გაკვეთილის გეგმა (ნაწილი 5):