შესვლა

HTML › დამწყები › ფორმების საფუძვლები

ფორმის ელემენტი

მარტივი⏱ 7 წთ+20 XP👑 Pro#HTML#form#action#method#name

რას ისწავლი

  • რისთვისაა ფორმა და რა ხდება, როცა მას აგზავნი
  • რას ნიშნავს action და method
  • რატომ სჭირდება ყოველ ველს name ატრიბუტი

ფორმა: ვებგვერდის ყური

აქამდე ჩვენი გვერდები მხოლოდ „ლაპარაკობდნენ“: აჩვენებდნენ ტექსტს, სურათებს, ბმულებს. ფორმა (form) გვერდს „სმენის“ საშუალებას აძლევს: მომხმარებელი წერს, ირჩევს, აჭერს, და მონაცემები სერვერს მიდის. ფორმაა ძებნის ველი, რეგისტრაცია, შესვლა, კომენტარი, გამოკითხვა, ონლაინ შეკვეთა. ფორმების გარეშე ინტერნეტი ჟურნალის მსგავსი იქნებოდა: მხოლოდ წასაკითხი.

ფორმა <form> ელემენტით იწყება. მის შიგნით ველები და გაგზავნის ღილაკია:

HTML
<form action="/search" method="get">
  <input type="text" name="q">
  <button type="submit">ძებნა</button>
</form>

action და method

  • action ამბობს, სად გაიგზავნება მონაცემები: სერვერის მისამართი, რომელიც მათ მიიღებს და დაამუშავებს. თუ action არ წერია, ფორმა იმავე გვერდზე იგზავნება.
  • method ამბობს, როგორ გაიგზავნება. ორი მთავარი გზაა:
  • get: მონაცემები მისამართს ემატება, ?-ის შემდეგ. ძებნის ფორმა ასე მუშაობს: /search?q=html. ასეთი მისამართი სანიშნეში შეიძლება შეინახო ან მეგობარს გაუგზავნო.
  • post: მონაცემები მისამართში არ ჩანს, მოთხოვნის „სხეულში“ მიდის. ასე იგზავნება რეგისტრაცია, შესვლა, შეკვეთა, კომენტარი: ყველაფერი, რაც სერვერზე რამეს ცვლის ან პირად ინფორმაციას შეიცავს.

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

name: მონაცემის სახელი

სერვერმა რომ გაიგოს, რომელი მნიშვნელობა რას ნიშნავს, ყოველ ველს name ატრიბუტი სჭირდება. გაგზავნისას ბრაუზერი აგზავნის წყვილებს „სახელი = მნიშვნელობა“:

HTML
<form action="/register" method="post">
  <input type="text" name="username">
  <input type="email" name="email">
  <button type="submit">რეგისტრაცია</button>
</form>

თუ მომხმარებელმა ჩაწერა „nino“ და „nino@example.com“, სერვერი მიიღებს: username=nino და email=nino@example.com. ველი name-ის გარეშე საერთოდ არ იგზავნება, თუნდაც ის ეკრანზე ჩანდეს და მასში რამე ეწეროს. ეს დამწყებების ერთ-ერთი ყველაზე ხშირი, თან ძნელად შესამჩნევი შეცდომაა.

ვინ ამუშავებს მონაცემებს

HTML ფორმა მხოლოდ აგროვებს და აგზავნის მონაცემებს. მათ შენახვას, შემოწმებას და პასუხის გაცემას სერვერზე სხვა პროგრამა აკეთებს, მაგალითად Node.js-ზე ან Python-ზე დაწერილი. ამას მოგვიანებით, backend-ის კურსებში ისწავლი. ასევე შესაძლებელია, ფორმის მონაცემები JavaScript-მა გვერდზევე დაამუშაოს. ჯერჯერობით კი ფორმის HTML ნაწილზე, ველებზე, წარწერებსა და ღილაკებზე გავამახვილოთ ყურადღება.

სცადე თავად

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

HTML · სცადე თავად

ხშირი შეცდომები

  • name-ის გარეშე ველი. ის არ იგზავნება. ყოველ ველს, რომლის მნიშვნელობაც გჭირდება, name მიეცი.
  • პაროლი get-ით. ის მისამართში გამოჩნდება. პირადი მონაცემებისთვის post.
  • ფორმა ფორმაში. <form> სხვა <form>-ის შიგნით არ იწერება.

სავარჯიშო

ააწყე ბიბლიოთეკის ძებნის ფორმა: action="/library/search", method="get", ერთი ტექსტური ველი name="book" და ღილაკი მოძებნე. ფორმის ზემოთ დაწერე სათაური წიგნის ძებნა.

HTML · სცადე თავად
💡 მინიშნება

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

✅ ამოხსნის ნახვა
HTML
<h2>წიგნის ძებნა</h2>
<form action="/library/search" method="get">
  <input type="text" name="book">
  <button type="submit">მოძებნე</button>
</form>

მინი-ქვიზი

1რას ამბობს action ატრიბუტი?

2რომელი method გამოიყენო პაროლიანი შესვლის ფორმისთვის?

3ველში ტექსტი წერია, მაგრამ სერვერმა ის ვერ მიიღო. რა არის სავარაუდო მიზეზი?

შეჯამება

  • <form> მომხმარებლის მონაცემებს აგროვებს და აგზავნის.
  • action ამბობს სად, method როგორ: get მისამართში, post დამალულად.
  • ყოველ ველს name სჭირდება: სერვერი იღებს წყვილებს „სახელი = მნიშვნელობა“.
  • პირადი მონაცემები და პაროლი მხოლოდ post-ით.
📝 ჩემი შენიშვნა