5 ლექცია - ფორმები

ვებ ტექნოლოგიების
საფუძვლები
საქართველოს ტექნიკური უნივერსიტეტი

კომპიუტერული ინჟინერიის დეპარტამენტი ასოც. პროფ. ეკატერინე ბოჭორიძე
e.bochoridze@gtu.ge
2021 წ.
HTML ფორმები
 ფორმის ელემენტები
 ღილაკები
 ტექსტური ველები
 ნიშნულები და ავტოფოკუსი
 ელემენტები რიცხვების შესაყვანად
 ალმები და გადამრთველები
 ელემენტები ფერის, url-ის, ელექტრონული ფოსტის და ტელეფონის
ნომრისთვის
 ელემენტები თარიღისა და დროის შესაყვანად
 ფაილების გაგზავნა
 ელემენტი select (სია)
 ტექსტური არე (Textarea)
 ფორმების ვალიდაცია
 ელემენტები fieldset და legend
ფორმები მსოფლიო აბლაბუდაში ინტერაქტიული ურთიერთქმედებისთვის ერთ-
ერთ ყველაზე პოპულარული საშუალებაა. ფორმების საშუალებით შესაძლებელია
მომხმარებლისგან ინფორმაციის მიღება.
HTML-ის დახმარებით შესაძლებელია შევქმნათ მარტივი ფორმები, რომლებიც
“დიახ” და “არა” ტიპის პასუხებს ითვალისწინებს. აგრეთვე, შეგვიძლია შევქმნათ
რთული ფორმები შეკვეთებისთვის ან იმისთვის, რომ ჩვენი მკითხველებისაგან რაიმე
კომენტარი ან კეთილი სურვილები მივიღოთ.
ფორმები შედგება რამდენიმე ველისგან, სადაც მომხმარებელს შეუძლია გარკვეული
ინფორმაცია შეიტანოს ან რომელიმე პარამეტრი აირჩიოს.
მას შემდეგ, რაც მომხმარებელი გაგზავნის ინფორმაციას, ის სერვერზე
მოთავსებული პროგრამის (სკრიპტის) მიერ დამუშავდება.
HTML-ის დახმარებით მხოლოდ ფორმის ვიზუალურ მხარეს განვსაზღვრავთ.

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

ფორმაში ფორმის მოთავსება არ შეიძლება, ხოლო HTML ტეგები და ტექსტი
განუსაზღვრელი რაოდენობით შეიძლება იყოს მასში.
როგორც ზემოთ უკვე აღვნიშნეთ, იმისათვის, რომ ფორმამ რეალურად
იმუშაოს და შევსებული ფორმის მონაცემები დამუშავდეს, HTML-ის ცოდნა
საკმარისი არ არის, აქ უკვე სხვა ტექნოლოგიაა საჭირო.
HTML-ს არ შეუძლია მონაცემების დამუშავება, ამისათვის სერვერული
დაპროგრამების სპეციალური ენები არსებობს, მაგალითად, PHP, ამიტომაც
ფორმა ყოველთვის იმ სერვერულ დამმუშავებელთან უნდა იყოს
დაკავშირებული, რომელიც ფორმის მონაცემებს დაამუშავებს. განვიხილოთ
მუშაობის სქემა. მაგალითად, როდესაც ქვემოთ მოცემული ტიპის ფორმის
შევსება ხდება და მომხმარებელი OK ღილაკს აჭერს ხელს, მონაცემები
გადაეგზავნება მონაცემების დამმუშავებელს. ამისათვის, გამოვიყენოთ ფაილი
formdata.php.
<form action = "formdata.php" method=”POST” name =”form1”>
</form>
ფორმები
ფორმა წარმოადგენს მონაცემთა შეყვანისა და გაგზავნის ერთ-ერთ

საშუალებას.
ფორმის ყველა ველი თავსდება <form> და </form> ტეგებს შორის.
შევქმნათ უმარტივესი ფორმა:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ფორმები HTML-ში</title>
</head>
<body>
<form method="post" action="http://localhost:8080/login.php">
<input name="login"/>
<input type="submit" value="შესვლა"/>
</form>
</body>
</html>
ფორმას შეიძლება განესაზღვროს შემდეგი ატრიბურები:

 method: მონაცემების სერვერზე გაგზავნის მეთოდი post და get.
განსაზღვრავს, თუ რომელი "პროტოკოლით" გადაეცეს მონაცემები სკრიპტს.
ამ ატრიბუტს გააჩნია ორი მნიშვნელობა Get და Post. მითითებული არაა,
იგულისხმება METHOD="GET".
action: ვებსერვერის მისამართი.
აუცილებელი ატრიბუტი. მიუთითებს, პროგრამა სკრიპტის მისამართს,
რომელსაც გადაეცემა მონაცემები დასამუშავებლად.
 enctype: გადასაცემი ინფორმაციის ტიპი.
განსაზღვრავს, თუ როგორ მოხდება სკრიპტისთვის გადასაცემი მონაცემების
კოდირება. თუ მითითებული არაა, თავისთავად იგულისხმება
ENCTYPE="application/x-www-form-urlencoded".
ზემოთ მოყვანილ მაგალითში ფორმას გააჩნია post მეთოდი, ვებსერვისის

მისამართია http://localhost:8080/login.php.
როგორც წესი, მითითებულ მისამართზე მუშაობს ვებსერვისი, რომელიც იყენებს
რომელიმე სერვისის ტექნოლოგიას (PHP, NodeJS, ASP.NET და სხვა).
ახლა ჩვენ არ გავამახვილებთ ყურადღებას სერვერის ტექნოლოგიებზე, არამედ
განვიხილავთ მონაცემების გაგზავნის მეთოდებს.
ავტოშევსება
ხშირად ბრაუზერები იმახსოვრებენ შეყვანილ მონაცემებს და მორიგი
შესვლისას ჩნდება ჩამოსაშლელი დამახსოვრებული მონაცემებით:
საჭიროების შემთხვევაში შესაძლებელია ავტოშევსების გამორთვა,

ამისთვის გამოიყენება ატრიბუტი autocomplete. ღებულობს მნიშვნელობებს on
(ავტოშევსება ჩართულია) და off (ავტოშევსება გამორთულია). ეს ატრიბუტი
შეიძლება მიეთითოს როგორც ფორმას, ასევე მის ცალკეულ ელემენტს.
ფორმაზე მითითებული ატრიბუტი ვრცელდება ყველა მის ელემენტზე, თუ
თვითონ ელემენტს არა აქვს მითითებული იგივე ატრიბუტი განსხვავებული
მნიშვნელობით. მაგალითად:
<body>
<form method="post" autocomplete="off“ action="http://localhost:8080/login.php">
<input name="login" autocomplete="on" />
<input name="password" />
<input type="submit" value="შესვლა"/>
</form>
</body>
მოცემულ მაგალითში ავტოშევსება გამორთულია ყველა ელემენტზე, გარდა პირველისა,
რადგან პურველ ელემენტს თვითონ აქვს მითითებული on.
ფორმის ელემენტები
ფორმა შედგება ერთი ან რამდენიმე მონაცემთა შეყვანის ელემენტისგან. შეყვანის
ყველაზე გავრცელებულ ელემენტს წარმოადგენს ელემენტი input. ელემენტის
რეალურ სახეს განსაზღვრავს ატრიბუტი type. ის ღებულობს შემდეგ მნიშვნელობებს:
 text: ჩვეულებრივი ტექსტური ველი
 password: ასევე ტექსტური ველი, ოღონდ შეყვანილი სიმბოლოების ადგილას
გამოჩნდება ვარსკვლავი. ეს ველი ძირითადად გამოიყენება პაროლების შესაყვანად
 radio: რადიოღილაკი ანუ გადამრთველი. რადიოღილაკების ჯგუფიდან შეიძლება
მხოლოდ ერთის არჩევა
 checkbox: ჩამრთველი ელემენტი (ალამი), რომელიც შეიძლება იყოს ჩართულ ან
გამორთულ მდგომარეობაში
 hidden: დამალული ველი
 submit: ფორმის მონაცემების გაგზავნის ღილაკი
 color: ფერის შესაყვანი ველი
 date: თარიღის შესაყვანი ველი
 datetime: თარიღის და დროის შესაყვანი ველი
 datetime-local: სასაათო სარტყლის გაუთვალისწინებლად თარიღის და დროის
შესაყვანი ველი
 email: ელექტრონული მისამართის შესაყვანი ველი
 month: თვისა და წლის შესაყვანი ველი
 number: რიცხვების შესაყვანი ველი
 range: გარკვეული დიაპაზონიდან რიცხვების ასარჩევი მცოცავი ველი
tel: ტელეფონის ნომრის შესაყვანი ველი
time: დროის შესაყვანი ველი
week: წლისა და კვირის შესაყვანი ველი
url: url მისამართის შესაყვანი ველი
file: გასაგზავნი ფაილის ასარჩევი ველი
image: ქმნის ღილაკს სურათის ფორმით
ელემენტი input-ის გარდა არის კიდევ რამდენიმე ელემენტი, რომლებიც გამოიყენება

ფორმებთან მუშაობისას:
 button: ქმნის ღილაკს
 select: ჩამოსაშლელი სია
 label: ქმნის წარწერას, რომელიც გამოისახება შეყვანის ველის გვერდით
 textarea: მრავალსტრიქონიანი ტექსტური ველი
ატრიბუტები name და value
შეყვანის ყველა ელემენტს გააჩნია ატრიბუტები name და value. name ატრიბუტის
მიხედვით შესაძლებელია ელემენტის იდენტიფიცირება, ხოლო value ანიჭებს ელემენტს
მნიშვნელობას. მაგალითად:
<!DOCTYPE html>
<html>
<head>
<title>ფორმები HTML-ში</title>
</head>
<body>
<form method="get" action="index.html">
<input type="text" name="login" value="Tom"/>
<input type="password" name="password"/>
<input type="submit" value="შესვლა" />
</form>
</body>
</html>
</html>
index.html-ის მერე მისამართს დაემატა კითხვის ნიშანი და
login=Tom&password=qwerty. ასეთი სახით ხდება ფორმის მონაცემების გაგზავნა
სერვერზე, წყვილების "გასაღები"="მნიშვნელობა" სახით, რომლებიც ერთმანეთთან &
სიმბოლოთია გადაბმული. ამ მონაცემების მიღების შემდეგ სერვერი ღებულობს
ფორმაში შეყვანილ მონაცემებს და აბრუნებს შესაბამის პასუხს.
ღილაკები
ღილაკები წარმოდგენილია ელემენტით button. მას გააჩნია კონფიგურაციის ბევრი
შესაძლებლობა. ატრიბუტი type მიხედვით შეგვიძლია შევქმნათ ღილაკის შემდეგი
ტიპები:
 submit: ღილაკი ფორმის მონაცემების გაგზავნისთვის
 reset: ღილაკი ფორმის მნიშვნელობების გასუფთავებისთვის
 button: ღილაკი რამე სპეციალური დანიშნულების გარეშე
თუ ღილაკი განკუთვნილია მონაცემების გაგზავნისთვის, ანუ თუ მინიჭებული აქვს
ატრიბუტი type="submit", შეგვიძლია მივანიჭოთ დამატებითი ატრიბუტები:
form: განსაზღვრავს ფორმას, რომელზედაც არის მიმაგრებული ღილაკი
formaction: განსაზღვრავს მისამართს, რომელზეც იგზავნება ფორმის მონაცემები. თუ
ელემენტს form მინიჭებული აქვს ატრიბუტი action, ხდება მისი ამოცვლა ფორმის
formaction-ის მნიშვნელობით
formenctype: განსაზღვრავს მონაცემების გაგზავნის ფორმატს. თუ ელემენტს form
მინიჭებული აქვს ატრიბუტი enctype, ხდება მისი ამოცვლა ღილაკის formenctype-ის
მნიშვნელობით
formmethod: განსაზღვრავს მონაცემების გაგზავნის მეთოდს (post ან get). თუ
ელემენტს form მინიჭებული აქვს ატრიბუტი method, ხდება მისი ამოცვლა ღილაკის
formmethod-ის მნიშვნელობით
მაგალითად, შევქმნათ ფორმა მონაცემთა გაგზავნის და გასუფთავების ღილაკებით:
ფორმა მონაცემთა გაგზავნის და გასუფთავების ღილაკებით:
<!DOCTYPE html>
<html>
<head>
<title>ფორმები HTML5-ში</title>
</head>
<body>
<form>
<p><input type="text" name="login" /></p>
<p><input type="password" name="password" /></p>
<p>
<button type="submit" formmethod="get“ formaction="index.html">გაგზავნა</button>
<button type="reset">გასუფთავება</button>
</p>
</form>
</body> </html>
გარდა ელემენტისა button ღილაკის შექმნა შეიძლება ასევე ელემენტით input,

რომლის type ატრიბუტის მნიშვნელობა არის submit, reset ან button. მაგალითად:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>
<input type="submit" formmethod="get" formaction="index.html" value="გაგზავნა" />
<input type="reset" value="გასუფთავება" />
</p>
</form>
</body> </html>
ელემენტი input-სგან ატრიბუტის type="image" გამოყენებით ვღებულობთ
სურათს, რომელიც გამოიყენება, როგორც ღილაკი:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>
<input type="text" name="search" />
<input type="image" src="search.png" name="submit" />
</p>
</form>
</body>
</html>
გარდა იმისა, რომ ღილაკს აქვს სურათი, მისი მოქმედება ისეთივეა როგორც
ელემენტის input type="submit" ან button type="submit".
ტექსტური ველები
ერთსტრიქონიანი ტექსტური ველი იქმნება ელემენტით input რომელსაც ატრიბუტი
type-ის მნიშვნელობა აქვს text.
<input type="text" name="login" />
დამატებითი ატრიბუტების მეშვეობით შესაძლებელია დავაკონფიგურიროთ
ტექსტური ველი:
o dirname: ტექსტის მიმართულება
o maxlength: სიმბოლოების მაქსიმალური რაოდენობა
o pattern: შაბლონი, რომელსაც უნდა შეესაბამებოდეს შეყვანილი ტექსტი
o placeholder: ტექსტი, რომელიც ჩანს ცარიელ ტექსტურ ველში
o readonly: ამ ატრიბუტით ტექსტურ ველი ხდება მხოლოდ წაკითხვისთვის
o required: უთითებს, რომ ველი აუცილებლად შესავსებია
o size: ველის სიგანე ხილული სიმბოლოების რაოდენობით
o value: ველის მნიშვნელობა ავტომატურად, სანამ არ შევცვლით
გამოვიყენოთ რამდენიმე ატრიბუტი:

<!DOCTYPE html>
<html>
<head>
<title>ტექსტური ველი HTML5-ში</title>
</head>
<body>
<form>
<p><input type="text" name="userName" placeholder="შეიყვანეთ სახელი" size="26" /></p>
<p><input type="text" name="userPhone" placeholder="შეიყვანეთ ტელეფონის ნომერი"
size="26" maxlength="11" /></p>
<p>
<button type="submit">შენახვა</button>
<button type="reset">გაუქმება</button>
</p>
</form>
</body>
</html>
მოცემულ მაგალითში ტექსტურ ველს ერთდროულად 2 ატრიბუტი აქვს maxlength
და size. ამასთან size ანუ ზომა უფრო მეტია, ვიდრე maxlength ანუ დასაშვები
სიმბოლოების რაოდენობა. მიუხედავად ამისა ჩვენ ვერ შევიყვანთ maxlength-ზე მეტ
სიმბოლოს ამ ტექსტურ ველში.
ასევე მნიშვნელოვანია განვასხვავოთ ატრიბუტები value და placeholder. ორივე

მათგანი ტექსტურ ველს ანიჭებს ხილულ ტექსტს, მაგრამ placeholder წარმოადგენს
მხოლოდ მინიშნებას და ამიტომ იგი იწერება მკრთალად, მაშინ როდესაც value
წარმოადგენს ველის მნიშვნელობას:
<p><input type="text" name="userName" value="Tom" size="26" /></p>
<p><input type="text" name="userPhone" placeholder="შეიყვანეთ ტელეფონის ნომერი"
size="26" maxlength="11" /></p>
ატრიბუტები readonly და disabled ორივე ზღუდავს ტექსტური ველის

რედაქტირებას, მაგრამ მათ განსხვავებული ვიზუალური ეფექტი ახლავს. თუ readonly
ველს გარეგნულად არ ცვლის, disabled ველს ხდის ნაცრისფერს:
<p><input type="text" name="userName" value="Tom" readonly /></p>
<p><input type="text" name="userPhone" value="123456789" disabled /></p>
ატრიბუტი list
ტექსტური ველის ატრიბუტებს შორის აღსანიშნავია ატრიბუტი list, რომელიც
მიმართავს ელემენტს datalist. ეს უკანასკნელი შეიცავს ტექსტების ნაკრებს, რომელიც
ტექსტურ ველზე გამოდის სიის სახით მინიშნებებისთვის:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input list="phonesList" type="text" name="model" placeholder="აირჩიეთ მოდელი" />
</form>
<datalist id="phonesList">
<option value="iPhone 6S" label="54000"/>
<option value="Lumia 950">35000</option>
<option value="Nexus 5X"/>
</datalist>
</body>
</html>
ტექსტური ველის ატრიბუტს list ენიჭება datalist-ის იდენტიფიკატორის (id)
მნიშვნელობა. თვითონ datalist შეიცავს ელემენტებს option, რომლებიც
წარმოადგენენ სიის ელემენტებს.
ძებნის ველი ატრიბუტი search
ძებნის ველის შესაქმნელად გამოიყენება ელემენტი input ატრიბუტით type="search".
ფორმით ის წარმოადგენს ჩვეულებრივ ტექსტურ ველს:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="search" name="term" />
<input type="submit" value="ძებნა" />
</form>
</body>
</html>
პაროლის ველი
პაროლის ველის შესაქმნელად გამოიყენება ელემენტი input ატრიბუტით
type="password". მისი განმასხვავებელი ნიშანია ის, რომ შეყვანილი სიმბოლოების
ნაცვლად მასში გამჩნდება წერტილები:
<form>
<input type="submit" value="ავტორიზაცია" />
</form>
ნიშნულები და ავტოფოკუსი
შეყვანის ტექსტურ ველებთან ერთად ხშირად გამოიყენება ნიშნულები, რომლებიც
იქმნება ელემენტის label მეშვეობით. ნიშნულები წარმოადგენენ ტექსტური ველის
ანოტაციას ან სათაურს და უთითებენ, თუ რისთვისაა ეს ველი განკუთვნილი:
<!DOCTYPE html>
<html>
<head>
<title>ნიშნულები HTML5-ში</title>
</head>
<body>
<form>
<p>
<label for="login">მომხმარებელი: </label> ტექსტურ ველს აქვს ატრიბუტი
<input type="text" id="login" name="login" /> id="login", ამიტომ მის შესაბამის ნიშნულს
</p> აქვს ატრიბუტი for="login". ნიშნულზე
<p> მაუსის დაჭერით მისი შესაბამისი ველი
იღებს ფოკუსს.
<label for="password">პაროლი: </label>
<input type="password" id="password" name="password" />
</p>
<p>
<button type="submit">შესვლა</button>
</p>
</form>
</body>
</html>
ნიშნულების როლი ამით ამოიწურება. ასევე შეგვიძლია რომელიმე ველს

მივანიჭოთ ავტოფოკუსი და გვერდზე შესვლისას ფოკუსი იქნება ამ ველზე. ამისთვის
გამოიყენება ატრიბუტი autofocus:
<!DOCTYPE html>
<html>
<head>
<title>ნიშნულები HTML5-ში</title>
</head>
<body>
<form>
<p>
<label for="login">მომხმარებელი: </label>
<input type="text" id="login" name="login" autofocus />
</p>
<p>
<label for="password">პაროლი: </label>
<input type="password" id="password" name="password" />
</p>
<p>
<button type="submit">შესვლა</button>
</p>
</form>
</body>
</html>
ელემენტები რიცხვების შესაყვანად
რიცხვების შესაყვანად გამოიყენება ელემენტი input ატრიბუტით type="number". მისი
კონფიგურაცია შესაძლებელია შემდეგი დამატებითი ატრიბუტების გამოყენებით:
o min: მინიმალური დასაშვები მნიშვნელობა
o max: მაქსიმალური დასაშვები მნიშვნელობა
o readonly: მხოლოდ წაკითხვისთვის
o required: მიუთითებს, რომ ველის შევსება აუცილებელია
o step: მნიშვნელობა, რომლითაც ხდება ველის ზრდა (ბიჯი)
o value: თავდაპირველი მნიშვნელობა
გამოვიყენოთ რიცხვითი ველი:
<form>
<p>
<label for="age">ასაკი: </label>
<input type="number" step="1" min="1" max="100" value="10" id="age" name="age"/>
</p>
<p>
Google Chrome-ში
</p>
</form>
მოცემულ მაგალითში რიცხვითი ველის თავდაპირველი
მნიშვნელობაა 10, მინიმალური მნიშვნელობა 1, მაქსიმალური
100. ბიჯი ტოლია 1-ის.
სხვადასხვა ბრაუზერში ეს ელემენტი გამოჩნდება
Microsoft Edge-ში
სხვადასხვანაირად. მაგალითად:
ალმები და გადამრთველები
ალამი
ალამი წარმოადგენს ელემენტს, რომელსაც გააჩნია ორი მდგომარეობა: ჩართული და
გამორთული. მის შესაქმნელად გამოიყენება ელემენტი input ატრიბუტით
type="checkbox":
<body>
<h2>ტექნოლოგიები</h2>
<form>
<p>
<input type="checkbox" checked name="html5" />HTML5
</p>
<p>
<input type="checkbox" name="dotnet" />.NET
</p>
<p>
<input type="checkbox" name="java" />Java
</p>
<p>
</p>
</form>
</body>
ალმები და გადამრთველები
გადამრთველები
გადამრთველები ანუ რადიოღილაკები ჰგავს ალმებს და მათაც გააჩნიათ ორი
მდგომარეობა: ჩართული და გამორთული. მაგრამ გადამრთველები ერთიანდებიან
ჯგუფებში და ერთ ჯგუფში მხოლოდ ერთი რადიოღილაკი შეიძლება იყოს ჩართული:
<form>
<h2>მიუთითეთ სქესი</h2>
<p> მნიშვნელოვან ატრიბუტს წარმოადგენს
<input type="radio" value="man" checked name="gender" />კაცი value. იგი საშუალებას აძლევს სერვერს
</p> გაიგოს, თუ რომელი გადამრთველი იყო
<p>
მონიშნული.
<input type="radio" value="woman" name="gender" />ქალი
</p>
<h2>აირჩიეთ ტექნოლოგია</h2>
<p>
<input type="radio" value="html5" checked name="tech" />HTML5
</p>
<p>
<input type="radio" value="net" name="tech" />.NET
</p>
<p>
<input type="radio" value="java" name="tech" />Java
</p>
<p>
</p>
</form>
შენახვაზე დაჭერის შემდეგ სერვერს გადაეცემა ინფორმაცია gender=man და
tech=html5 იმის მიხედვით, თუ რომელი გადამრთველები იყო ჩართული.
ელემენტი select (სია)
ელემენტ select-ის შიგნით მოთავსებულია ელემენტები option - სიის ელემენტები.
თითოეულ სიის ელემენტს აქვს ატრიბუტი value. ამასთან, არაა აუცილებელი, რომ value-
ს მნიშვნელობა ემთხვეოდეს ტექსტს.
ატრიბუტის selected მეშვეობით შეგვიძლია მივუთითოთ არჩეული ელემენტი.
მაგალითად:
<select id="phone" name="phone">
<option value="iphone 6s">iPhone 6S</option>
<option value="lumia 950">Lumia 950</option>
<option value="nexus 5x">Nexus 5X</option>
<option value="galaxy s7">Galaxy S7</option>
</select>
ატრიბუტის disabled მეშვეობით შეგვიძლია სიის რომელიმე ელემენტის არჩევა

შევზღუდოთ. იგი ძირითადად გამოიყენება სათურების შესაქმნელად:
<option disabled selected>აირჩიეთ მოდელი</option>
</select>
ბევრი ელემენტის ასარჩევი სიის შესაქმნელად გამოიყენება ატრიბუტი multiple:
<form method="get">
<p>
<label for="phone">აირჩიეთ მოდელი:</label> <br/>
<select multiple id="phone" name="phone">
</select>
</p>
<p>
<input type="submit" value="გაგზავნა" />
</p>
</form>
Ctrl კლავიშზე დაჭერით და მაუსის მეშვეობით შესაძლებელია რემდენიმე

ელემენტის ერთდროულად მონიშვნა:
ბევრი ელემენტის ასარჩევი სიის შესაქმნელად გამოიყენება ატრიბუტი multiple:
<form method="get">
<p>
<label for="phone">აირჩიეთ მოდელი:</label>
<optgroup label="Apple">
<option value="iphone 6s plus">iPhone 6S Plus</option>
<option value="iphone 5se">iPhone 5SE</option>
</optgroup>
<optgroup label="Microsoft">
<option value="lumia 950 xl">Lumia 950 XL</option>
</optgroup>
</select>
</p>
<p>
</p>
</form>
ტექსტური არე (Textarea)
მრავალსტრიქონიანი ტექსტური ველისთვის გამოიყენება ელემენტი textarea:
<form method="get">
<p>
<label for="comment">თქვენი კომენტარი:</label><br/>
<textarea name="comment" id="comment" placeholder="არაუმეტეს 200 სიმბოლოსი"
maxlength="200"></textarea>
</p>
<p>
<input type="submit" value="დამატება" />
</p>
</form>
დამატებითი პარამეტრების cols და rows მეშვეობით შესაძლებელია სვეტების და
სტრიქონების რაოდენობის განსაზღვრა:
<form method="get">
<p>
<label for="comment">თქვენი კომენტარი:</label><br/>
<textarea name="comment" id="comment" placeholder="შეიყვანეთ კომენტარი“ cols="30"
rows="7"></textarea>
</p>
<p>
<input type="submit" value="დამატება" />
</p>
</form>
ელემენტები fieldset და legend

ფორმის ელემენტების დაჯგუფებისთვის ხშირად გამოიყენება ელემენტი fieldset.
ის ავლებს საზღვრებს მასში მოქცეული ელემენტების გარეთ და ქმნის მათგან ჯგუფს.
მასთან ერთად გამოიყენება ელემენტი legend, რომელიც ქმნის სათაურს ჯგუფისთვის:
<h2>საიტზე შესვლა</h2>
<form>
<fieldset>
<legend>შეიყვანეთ მონაცემები:</legend>
<label for="login">მომხმარებელი:</label><br>
<input type="text" name="login" id="login" /><br>
<label for="password">პაროლი:</label><br>
<input type="password" name="password" id="password" /><br>
<input type="submit" value="ავტორიზაცია">
</fieldset>
</form>
ფაილების გაგზავნა
ფაილების გასაგზავნად გამოიყენება ელემენტი input ატრიბუტით type="file:"
<form enctype="multipart/form-data" method="post" action="http://localhost:8080/postfile.php">
<p>
<input type="file" name="file" />
</p>
<p>
</p>
</form>
"Choose File" ღილაკზე დაჭერისას იხსნება ფაილის არჩევის ფანჯარა, ხოლო
ფაილის არჩევის შემდეგ ღილაკის გვერდით გაჩნდება არჩეული ფაილის სახელი.
მნიშვნელოვანია აღინიშნოს, რომ ფაილის სერვერზე გაგზავნის ფორმას უნდა
ჰქონდეს ატრიბუტი enctype="multipart/form-data".
ფაილების გაგზავნის მაგალითი

<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" action="http://localhost:8080/postfile.php">
<p>
<input type="file" name="file" multiple />
</p>
<p>
</p>
</form>
</body>
</html>
ამ შემთხვევაში ფაილის არჩევის ფანჯარაში შესაძლებელი იქნება რამდენიმე
ფაილის არჩევა, ხოლო არჩევის მერე ღილაკის გვერდით გაჩნდება წარწერა არჩეული
ფაილების რაოდენობით.
ფორმების ვალიდაცია
ხშირად საჭირო ხდება ფორმებში მონაცემების შეტანის დროს შეიზღუდოს
გარკვეული მნიშვნელობების შეტანა, რადგან მომხმარებელს ხშირად შეჰყავს არასწორი
მონაცემები, მაგალითად, ველში, სადაც მხოლოდ ციფრები უნდა შეჰყავდეს, შეჰყავს
ასოები და ა. შ. ამის თავიდან ასაცილებლად HTML5-ში არსებობს ვალიდაციის
მექანიზმი.
ვალიდაციის უპირატესობა მდგომარეობს იმაში, რომ მომხმარებელი დროულად
იგებს შეცდომის შესახებ და ასწორებს შეტანილ მონაცემებს.
ვალიდაციისთვის გამოიყენება შემდეგი ატრიბუტები:

o required: მოითხოვს მნიშვნელობის აუცილებლად შეყვანას. გამოიყენება
ელემენტებისთვის textarea, select, input (ტიპით text, password, checkbox, radio, file,
datetime-local, date, month, time, week, number, email, url, search, tel)
o min და max: მინიმალური და მაქსიმალური მნიშვნელობა. გამოიყენება
ელემენტისთვის input ტიპით datetime-local, date, month, time, week, number, range
o pattern: შაბლონი, რომელსაც უნდა შეესაბამებოდეს შეყვანილი მნიშვნელობა.
გამოიყენება ელემენტისთვის input ტიპით text, password, email, url, search, tel
ატრიბუტი required
ატრიბუტი required გულისხმობს, რომ ელემენტს აუცილებლად უნდა ჰქონდეს
მნიშვნელობა:
<form method="get">
<p>
<label for="login">მომხმარებელი:</label>
<input type="text" required id="login" name="login" />
</p>
<p>
<label for="password">პაროლი:</label>
<input type="password" required id="password" name="password" />
</p>
<p>
<input type="submit" value="შესვლა" />
</p>
</form>
თუ ველებს არ შევავსებთ და დავაჭერთ შესვლას, გამოვა გაფრთხილება, რომ
აუცილებელი ველები არაა შევსებული.
ბრაუზერების მიხედვით შეუვსებელი აუცილებელი ველები სხვადასხვანაირად გამოისახება,
მაგალითად Firefox-ში და Microsoft Edge-ში ასეთ ველებს უკეთდება წითელი ჩარჩო:
ელემენტები რიცხვების შესაყვანად

როგორც ტექსტურ ველებში, რიცხვით ველებშიც შეგვიძლია გამოვიყენოთ სიები
შესაძლო მნიშვნელობებით:
<form>
<p>
<label for="price">ფასი: </label>
<input type="number" list="priceList“ step="1" min="3" max="100" value="10" id="price"
name="price"/>
</p>
<p>
</p>
</form>
<datalist id="priceList">
<option value="15" />
</datalist>
ატრიბუტები min და max
შესაყვანი მნიშვნელობების დიაპაზონის შესაზღუდავად გამოიყენება ატრიბუტები
min და max:
<form method="get">
<p>
<label for="age">ასაკი:</label>
<input type="number" min="1" max="100" value="18" id="age" name="age"/>
</p>
<p>
</p>
</form>
მცოცავი ველი
მცოცავი წარმოადგენს სკალას, სადაც შეიძლება მნიშვნელობების არჩევა. მის
შესაქმნელად გამოიყენება ელემენტი input ატრიბუტით type="range". როგორც რიცხვით
ველს, მასაც გააჩნია ატრიბუტები min, max, step და value:
<form>
<p>
<label for="price">ფასი:</label>
<input type="range" step="1" min="0" max="100" value="10" id="price" name="price"/>100
</p>
<p>
</p>
</form>
ელემენტები ფერის, url-ის, ელექტრონული ფოსტის და
ტელეფონის ნომრისთვის
ფერის შეყვანის ველი
ფერის შეყვანის ველის მისაღებად ელემეტ input-ს უნდა მივანიჭოთ ატრიბუტი
type="color":
<label for="favcolor">აირჩიეთ ფერი</label>
<input type="color" id="favcolor" name="favcolor" />
ამ ელემენტის მნიშვნელობა იქნება თექვსმეტობითი რიცხვით გამოსახული

არჩეული ფერის კოდი.
datalist-ის მეშვეობით ელემენტს შეიძლება დაემატოს სია, საიდანაც შესაძლებელი
იქნება რეკომენდირებული ფერის არჩევა:
<label for="favcolor">აირჩიეთ ფერი</label>
<input type="color" list="colors" id="favcolor" name="favcolor" />
<datalist id="colors">
<option value="#0000FF" label="blue"> datalist-ის თითოეული ელემენტ option-ს
<option value="#008000" label="green"> მნიშვნელობად უნდა ჰქონდეს თექვსმეტობითი
<option value="#ff0000" label="red"> სახით წარმოდგენილი რიცხვი, მაგალითად
</datalist> "#0000FF". არჩევის შემთხვევაში ფერის შეყვანის ველი
მიიღებს შესაბამის მნიშვნელობას.
url-ის, email-ის და ტელეფონის შესაყვანი ველები

input ელემენტზე სხვადასხვა type ატრიბუტის მინიჭებით შეიძლება მივიღოთ url-ის,
email-ის და ტელეფონის შესაყვანი ველები.
ამისათვის type-ს უნდა მივცეთ შესაბამისად შემდეგი მნიშვნელობები: url, email, tel.
მათი კონფიგურაციისთვის გამოიყენება იგივე ატრიბუტები, რაც ჩვეულებრივი
ტექსტური ველებისთვის:
o dirname: ტექსტის მიმართულება
o maxlength: სიმბოლოების მაქსიმალური რაოდენობა
o pattern: შაბლონი, რომელსაც უნდა შეესაბამებოდეს შეყვანილი ტექსტი
o placeholder: ტექსტი, რომელიც ჩანს ცარიელ ტექსტურ ველში
o readonly: ამ ატრიბუტით ტექსტურ ველი ხდება მხოლოდ წაკითხვისთვის
o required: უთითებს, რომ ველი აუცილებლად შესავსებია
o size: ველის სიგანე ხილული სიმბოლოების რაოდენობით
o value: ველის მნიშვნელობა ავტომატურად, სანამ არ შევცვლით
o list: ველზე ებმება შესაბამისი datalist
<form> url-ის, email-ის და ტელეფონის შესაყვანი ველები
<p>
<label for="email">Email: </label>
<input type="email" placeholder="user@gmail.com" id="email" name="email"/>
</p>
<p>
<label for="url">URL: </label>
<input type="url" id="url" name="url"/>
</p>
<p>
<label for="phone">ტელეფონი: </label>
<input type="tel" placeholder="(XXX)-XXX-XX XX XX" id="phone" name="phone"/>
</p>
<p>
</p>
</form>
ასეთი ველების ძირითადი უპირატესობა მდგომარეობს იმაში, რომ თუ ჩვენ შევიყვანთ
არასწორ მნიშვნელობას და შევეცდებით მის სერვერზე გაგზავნას, ბრაუზერი შეგვატყობინებს
შეცდომის შესახებ და მონაცემებს არ გააგზავნის:
ელემენტები თარიღისა და დროის შესაყვანად
თარიღისა და დროის შესაყვანად HTML5-ში განსაზღვრულია input ელემენტის
შემდეგი ტიპები:
o datetime-local: თარიღი და დრო
o date: თარიღი
o month: თვე
o time: დრო თრიღის შესაყვანად შეიძლება
o week: კვირა ჩამოვშალოთ კალენდარი:
<form>
<p>
<label for="firstname">სახელი: </label>
<input type="text" id="firstname" name="firstname"/>
</p>
<p>
<label for="date">დაბადების თარიღი: </label>
<input type="date" id="date" name="date" value="1995-05-12"/>
</p>
<p>
</p>
</form>
უნდა აღინიშნოს, რომ ამ ელემენტის მოქმედება დამოკიდებულია ბრაუზერზე.
IE 11-ს და Firefox-ს საერთოდ არა აქვს ამ ელემენტის მხარდაჭერა.
თარიღისა და დროის სხვა ელემენტების გამოყენებისთვის
<!DOCTYPE html> ვნახოთ მაგალითი:
<html>
<head>
<title>HTML5</title>
</head>
<body>
<form>
<p>
<label for="week">კვირა: </label>
<input type="week" name="week" id="week" />
</p>
<p>
<label for="localdate">თარიღი და დრო: </label>
<input type="datetime-local" id="localdate" name="date"/>
</p>
<p>
<label for="month">თვე: </label>
<input type="month" id="month" name="month"/>
</p>
<p>
<label for="time">დრო: </label>
<input type="time" id="time" name="time"/>
</p>
<p>
</p>
</form>
</body>
</html>
მადლობთ
ყურადღებისათვის!
ეკატერინე ბოჭორიძე
e.bochoridze@gtu.ge

5 ლექცია - ფორმები

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

5 ლექცია - ფორმები

Uploaded by

Copyright:

Available Formats

ვებ ტექნოლოგიების

საქართველოს ტექნიკური უნივერსიტეტი

HTML-ის დახმარებით მხოლოდ ფორმის ვიზუალურ მხარეს განვსაზღვრავთ.

ფორმა იწყება ტეგით <FORM> და იხურება </FORM> ტეგით.

HTML დოკუმენტი შეიძლება შეიცავდეს რამოდენიმე ფორმას, მაგრამ

ფორმა წარმოადგენს მონაცემთა შეყვანისა და გაგზავნის ერთ-ერთ

ფორმას შეიძლება განესაზღვროს შემდეგი ატრიბურები:

ზემოთ მოყვანილ მაგალითში ფორმას გააჩნია post მეთოდი, ვებსერვისის

საჭიროების შემთხვევაში შესაძლებელია ავტოშევსების გამორთვა,

ელემენტი input-ის გარდა არის კიდევ რამდენიმე ელემენტი, რომლებიც გამოიყენება

გარდა ელემენტისა button ღილაკის შექმნა შეიძლება ასევე ელემენტით input,

გამოვიყენოთ რამდენიმე ატრიბუტი:

ასევე მნიშვნელოვანია განვასხვავოთ ატრიბუტები value და placeholder. ორივე

ატრიბუტები readonly და disabled ორივე ზღუდავს ტექსტური ველის

ნიშნულების როლი ამით ამოიწურება. ასევე შეგვიძლია რომელიმე ველს

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

Ctrl კლავიშზე დაჭერით და მაუსის მეშვეობით შესაძლებელია რემდენიმე

ელემენტები fieldset და legend

ფაილების გაგზავნის მაგალითი

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

ელემენტები რიცხვების შესაყვანად

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

url-ის, email-ის და ტელეფონის შესაყვანი ველები

You might also like