HTML ვიდეო
ლექცია 4
HTML ფორმა
-
ლექციაში მოყვანილი მაგალითი
კოპირება<formmethod="get"action="https://www.google.com/"><inputname=login><br><inputtype="submit"value="შესვლა"></form>რა ხდება ამ კოდში:
-
<form>
ტეგი — ქმნის ფორმას. მის ატრიბუტებს აქვს შემდეგი მნიშვნელობა:
- method="get" — მონაცემების გადაგზავნა ხდება URL-ში (ლინკში ჩაშენებული სახით).
- action="https://www.google.com/" — როცა ფორმას დააჭერენ, მონაცემები გადაეგზავნება Google-ის მთავარ გვერდს.
- <input name="login"> — არის ტექსტური ველი, სადაც მომხმარებელი შეიყვანს ინფორმაციას. რადგან type მითითებული არ არის, ავტომატურად არის "text".
- <input type="submit" value="შესვლა"> — ღილაკი, რომლის დაჭერისას ფორმა იგზავნება მითითებულ მისამართზე (action).
რას ეხება ეს საკითხი?
ეს საკითხი ეხება HTML ფორმების და მონაცემთა გადაცემას GET მეთოდით -
<form>
ტეგი — ქმნის ფორმას. მის ატრიბუტებს აქვს შემდეგი მნიშვნელობა:
Input Password გრაფა
-
ლექციაში მოყვანილი მაგალითი
კოპირება<spanmethod="get"action=https://www.google.com/"><inputtype="text"name="login"><br><inputtype="password"><br><inputtype="submit">value="შესვლა"><br></div>ახალი ელემენტები
-
< input type="password" >
- ეს არის ტექსტური ველი, რომელიც გამოჩნდება წერტილები ან ვარსკვლავები (***).
- გამოიყენება პაროლის ან სხვა პირადი ინფორმაციის შესაყვანად.
- type="password" მალავს შეყვანილ ტექსტს ვიზუალურად, მაგრამ ტექნიკურად ისე იგზავნება, როგორც ჩვეულებრივი ტექსტი (თუ არ არის დაცული სხვა საშუალებით)
-
< input type="text" name="login" >
- ამჯერად მითითებულია type="text" (რაც გასაგები და სტანდარტულია),.
- წინა მაგალითში type არ ეწერა და ბრაუზერი თვითონ თვლიდა, რომ იყო "text" - ახლა ეს მკაფიოდ მითითებულია
შენიშვნა
პაროლის ველში name ატრიბუტი არ არის მითითებული, ამიტომ ის არ გადაგზავნება ფორმის გაგზავნისას. რომ გადაგზავნილიყო, უნდა დაემატოს name="password" მაგალითად ასე:
კოპირება<inputtype="password"name="password"> -
< input type="password" >
ღილაკები (button)
-
ლექციაში მოყვანილი მაგალითი
კოპირება<form><p><inputtype="text"name="login"></p><p><inputtype="password"name="password"></p><p><buttontype="submit"formmethod="get"formaction="https://google.com">გაგზავნა</button><buttontype="reset">გასუფთავება</button></p></form>
ახალი ელემენტების გარჩევა
-
კოპირება<buttontype="submit"formmethod="get"formaction="https://google.com">
- ეს ღილაკი აქზავნის ფორმას
- type="submit" - ნიშნავს რომ ეს ღილაკი აგზავნის ფორმას
- formmethod="get" - ფორმის გაგზავნის მეთოდია GET (იგივე რაც < form method="get" > , მაგრამ გამოიყენება მხოლოდ ამ ღილაკისთვის)
- formation="https://google.com" - აღნიშნავს სად უნდა გაიგზავნოს ფორმა ამ ღილაკის დაჭერისას
- ეს ატრიბუტები გადაფარავს ფორმის method და action მახასიათებლებს მხოლოდ ამ ღილაკისთვის
ახალი ელემენტების გარჩევა
-
კოპირება<buttontype="reset">გასუფთავება</button>
- ღილაკი, რომელიც გასუფთავებს (ანუ დააბრუნებს საწყის მნიშვნელობაზე) ფორმის ყველა ველს.
- მაგალითად: ტექსტური ველები გახდება ცარიელი, მონიშნული პარამეტრები მოიხსნება და ა.შ.
-
plaseholder, size, maxlength
-
ლექციაში მოყვანილი მაგალითი:
კოპირება<form><p><inputtype="text"name="username"placeholder="შეიყვანეთ სახელი"size="26"></p><p><inputtype="text"name="userphone"placeholder="შეიყვანეთ ტელეფონის ნომერი"size="26"maxlength="11"></p><p><buttontype="submit">შენახვა</button><buttontype="reset">გაუქმება</button></p></form>
ახალი ატრიბუტები:
-
placeholder
- აჩენს წინასწარ მინიშნებას ველში (რჩევა მომხმარებლისთვის).
- არ ინახება როგორც მნიშვნელობა, უბრალოდ დასაწყისში ჩანს ველში ჩასაწერად.
-
მაგალითად:
კოპირება<inputplaceholder="შეიყვანეთ სახელი">
ველში ჩნდება ტექსტი: "შეიყვანეთ სახელი", სანამ მომხმარებელი რამეს ჩაწერს.
-
size="26"
- განსაზღვრავს ველის სიგანეს სიმბოლოების რაოდენობით.
- ანუ ველი იმდენად გრძელია, რამდენიც 26 სიმბოლოს ჩასაწერად საკმარისია.
- ეს ვიზუალურია და არ ზღუდავს რეალურ შეყვანას (ამისთვის გამოიყენება maxlength ).
-
maxlength="11"
- ზღუდავს, რომ მაქსიმუმ 11 სიმბოლო იყოს შესაძლებელი ამ ველში.
-
მაგალითად ტელეფონის ნომრის ველში:
კოპირება<inputmaxlength="11">
ვერ შეძლებთ 11-ზე მეტი სიმბოლოს შეყვანას.
ღილაკები <button type="submit"> და <button type="reset">
ეს უკვე წინა მაგალითში გავარჩიეთ, აქ უბრალოდ ტექსტი შეიცვალა
- შენახვა - ფორმის გაგზავნა.
- გაუქმება - ფორმის გასუფთავება.
-
placeholder
Data LIst
-
ლექციაში მოყვანილი მაგალითი:
კოპირება<form><inputlist="phonelist"type="text"name="model"plaseholder="აირჩიეთ მოდელი"><buttontype="submit">შენახვა</button><form><datalistid="phonelist"><optionvalue="iphone 11"label="5000"></option><optionvalue="iphone 12"label="6000"></option><optionvalue="iphone 13"label="7000"></option></datalist>ახალი ელემენტი და ატრიბუტი:
-
<datalist>
- ეს HTML ელემენტია, რომელიც ქმნის წინასწარ ვარიანტების სიას ტექსტური ველისთვის ( <input> )
- მომხმარებელს შეუძლია ან თავად ჩაწეროს ტექსტი, ან ამოირჩიოს წინასწარ შეთავაზებული ვარიანტებიდან.
- არ ჰგავს <select> -ს - აქ მომხმარებელს თავისუფლად შეუძლია სხვა ტექსტიც შეიყვანოს.
-
list="phonelist"
(input -ში)
- ეს ატრიბუტი აკავშირებს <input> ველს შესაბამის <datalist< - თან მისი id -ით.
- როცა მომხმარებელი წერს ტექსტს, ავტომატურად ჩნდება შეთავაზებების სია phonelist -დან.
-
<option value="..."> label="..."
- value - არის ის ტექსტი რაც ჩაიწერება ველში არჩევისას
- label - უბრალოდ აღწერაა რომელიც, გამოჩნდება ვიზუალურად (მაგრამ input ველში არ ჩაიწერება)
მაგალითად:
კოპირება<optionvalue="Iphone 11"label="5000">მომხმარებელი ხედავს: Iphone 11 - 5000, მაგრამ თუ ამოირჩევს, input-ში ჩაიწერება მხოლოდ Iphone 11.
შედეგი:
-
<datalist>
საკლასო დავალება
-
შექმენით index.html ფაილი და დაამატეთ მომდევნო მოქმედებები:
- დაამატე ლინკის თეგი რომელიც მომხმარებელს გადაამისამართებს მოცემულ ლინკზე: https://en.wikipedia.org/wiki/Wolf
- დაამატეთ სურათის ელემენტი მოცემული ლინკის მეშვეობით https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Eurasian_wolf_2.jpg/1280px-Eurasian_wolf_2.jpg
- არ დაგავიწყდეთ ინფორმაციის მითითება სურათის alt სექციაში
