<button>¶
ტეგი <button>
(ინგ. button — ღილაკი) ქმნის ღილაკებს
ვებ - გვერდზე და მისი მოქმედებით ძალიან ჰგავს შედეგს, რომელსაც ვღებულობთ
<input>
-ის დახმარებით (ატრიბუტით type="button | reset | submit"
).
ამ ელემენტისგან განსხვავებით, <button>
გთავაზობს გაფართოებულ შესაძლებლობებს ღილაკების შესაქმნელად.
მაგალითად, მსგავს ღილაკზე შეგიძლიათ განათავსოთ ნებისმიერი HTML ელემენტები, მათ შორის სურათებიც. სტილის გამოყენებით შეგიძლიათ
განსაზღვროთ ღილაკის ტიპი, შრიფტის, ფონის ფერის, ზომის და სხვა პარამეტრების შეცვლის გზით.
ფორმები
სინტაქსი¶
<button>...</button>
დამხურავი ტეგი აუცილებელია.
ატრიბუტები¶
-
autofocus
- იგი ადგენს, რომ ღილაკი იღებს ფოკუსსგვერდის ჩატვირთვის შემდეგ.
-
disabled
- ბლოკავს ელემენტში წვდომასა და შეცვლას.
-
form
- აკავშირებს ფორმასა და ღილაკს ერთმანეთთან.
-
formaction
- ადგენს მისამართს, რომელზეც იგზავნება ეს ფორმები ღილაკზე დაჭერისას.
-
formenctype
- ფორმის მონაცემების კოდირების მეთოდი.
-
formmethod
- ამ ფორმის მონაცემების გაგზავნის მეთოდს მიუთითებს.
-
formnovalidate
- აუქმებს ფორმის გადამოწმებას სისწორეში.
-
formtarget
- ხსნის ფორმის გაგზავნის შედეგს ახალ ფანჯარაში ან ფრეიმში.
-
name
- განსაზღვრავს ღილაკის უნიკალურ სახელს.
-
type
- ადგენს ღილაკის ტიპს: ჩვეულებრივი; სერვერზე ფორმის მონაცემების გაგზავნისთვის; ფორმის დასუფთავებისთვის.
-
value
- ღილაკის მნიშვნელობა, რომელიც გაიგზავნება სერვერზე ან წაიკითხული იქნება სკრიპტების გამოყენებით.
ასევე ამ ტეგისტვისაც ხელმისაწვდომია უნივერსალური ატრიბუტები.
autofocus¶
ატრიბუტი autofocus
ადგენს, რომ ღილაკი იღებს ფოკუსს გვერდის დატვირთვის შემდეგ. ასეთ ღილაკზე
შეგიძლიათ დაუყოვნებლივ დაკლიკება მასზე ფოკუსის გადაცემის გარეშე, მაგალითად, კლავიშის გამოყენებით
სინტაქსი
<button autofocus>...</button>
მნიშვნელობა
არა.
ნაგულისხმევი მნიშვნელობა
სტანდარტულად, ეს მნიშვნელობა გამორთულია.
disabled¶
ბლოკავს ღილაკზე წვდომას და მის ცვლილებას. ამ შემთხვევაში, იგი გამოისახება ნაცრისფერში და არ არის ხელმისაწვდომი მომხმარებლის მიერ გააქტიურებისთვის.
გარდა ამისა, ასეთი ღილაკი ვერ მიიღებს ფოკუსს Tab
ღილაკზე დაჭერით, მაუსი ან სხვა გზებით.
ამასთან, ღილაკის ეს მდგომარეობა შეიძლება შეიცვალოს სკრიპტების საშუალებით. დაბლოკილი ღილაკის მნიშვნელობა არ გადაეცემა სერვერზე.
სინტაქსი
<button disabled>...</button>
მნიშვნელობა
არა.
ნაგულისხმევი მნიშვნელობა
სტანდარტულად, ეს მნიშვნელობა გამორთულია.
form¶
აკავშირებს ღილაკს ფორმით მისი იდენტიფიკატორის მიხედვით. ასეთი კავშირი აუცილებელია, როდესაც ღილაკი არ არის განთავსებული
<form>
ელემენტის შიგნით, მაგალითად, პროგრამულად შექმნისას.
სინტაქსი
<button form="<იდენტიფიკატორი>">...</button>
მნიშვნელობა
ფორმის იდენტიფიკატორი (<form>
ელემენტის id
ატრიბუტის მნიშვნელობა).
ნაგულისხმევი მნიშვნელობა
არა.
formaction¶
განსაზღვრავს ფორმის დამმუშავებლის მისამართს - ეს არის პროგრამა, რომელიც იღებს ფორმის მონაცემებს და ასრულებს სასურველ მოქმედებებს მათთან.
ატრიბუტი formaction
მისი მოქმედებით ანალოგიურია <form>
ელემენტის action
ატრიბუტისა. თუ ერთდროულად მივუთითებთ action
და formaction
,
ხოლო ღილაკზე დაკლიკებისას ატრიბუტი action
იგნორირებული იქნება და მონაცემები იგზავნება მისამართზე, რომელიოც მითითებულია formaction
-ში.
სინტაქსი
<button formaction="<მისამართი>">...</button>
მნიშვნელობა
არა.
formenctype¶
ადგენს ფორმის მონაცემების კოდირების გზას მათი სერვერზე გაგზავნისას. ჩვეულებრივ, პირდაპირ არის მითითებული, იმ შემთხვევაში, როდესაც ველი გამოიყენება
ფაილის გასაგზავნად (input type="file"
). ეს ატრიბუტი მის მოქმედებაში <form>
ელემენტის enctype
ატრიბუტის მსგავსია.
სინტაქსი
<button
formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
>
...
</button>
მნიშვნელობა
application/x-www-form-urlencoded
-
სივრცეების ნაცვლად უნდა ჩაისვას
+
, ინგლისური ასოების მსგავსი სიმბოლოები კოდირდება მათი თექვსმეტობითი მნიშვნელობებით (მაგალითად,%D0%9F%D0%B5%D1%82%D1%8F
david-ის ნაცვლად). multipart/form-data
- მონაცემები არ კოდირდება. ეს მნიშვნელობა გამოიყენება ფაილების გაგზავნისას.
text/plain
-
სივრცეები ჩანაცვლდება
+
ნიშნით, ასოები და სხვა სიმბოლოები არ კოდირდება.
ნაგულისხმევი მნიშვნელობა
application/x-www-form-urlencoded
formmethod¶
ატრიბუტი ბრაუზერს ეუბნება, რა მეთოდით უნდა გადასცეს ფორმის მონაცემები სერვერზე.
სინტაქსი
<button formmethod="get | post">...</button>
მნიშვნელობა
არსებობს ორი მეთოდი — GET და POST.
GET
-
ეს მეთოდი შექმნილია ფორმის მონაცემების პირდაპირ გადასაცემად მისამართის ველში წყვილის სახით «
სახელი=მნიშვნელობა
», რომლებიც დაემატა გვერდის მისამართს კითხვის ნიშნის შემდეგ და გამოყოფილია ერთმანეთისგან ამპერსანდით (სიმბოლო&
). მაგალითად, სრული მისამართი იქნებაhttp://site.ge/doc/?name=David&password=pup
. მეთოდში მონაცემების მოცულობა შემოიფარგლება 4 კბ-ით. POST
- აგზავნის მონაცემებს სერვერზე ბრაუზერის მოთხოვნით, გაგზავნილი მონაცემების მოცულობა შეზღუდულია მხოლოდ სერვერის პარამეტრებით.
formnovalidate¶
ღილაკზე დაჭერისას აუქმებს ჩაშენებულ მონაცემთა გადამოწმებას სისწორეზე რომელიც შეტანილია მომხმარებლის მიერ ფორმაში. ასეთი შემოწმება
ხდება ბრაუზერის მიერ ავტომატურად სერვერზე ფორმის გაგზავნისას <input type="email">
,
<input type="url">
ველებისთვის, ასევე pattern
ან required
ატრიბუტის არსებობისას
<input>
ელემენტზე.
სინტაქსი
<button formnovalidate>...</button>
მნიშვნელობა
არა.
ნაგულისხმევი მნიშვნელობა
სტანდარტულად, ეს ატრიბუტი გამორთულია.
formtarget¶
განსაზღვრავს იმ ფრეიმის სახელს, რომელშიც შედეგი იქნება ჩატვირთული, ფორმის დამმუშავებლის მიერ დაბრუნებული, HTML დოკუმენტის სახით.
სინტაქსი
<button
formtarget="<ფრეიმის სახელი> | _blank | _self | _parent | _top"
>
...
</button>
მნიშვნელობა
როგორც მნიშვნელობა, ფრეიმის სახელი გამოიყენება, <iframe>
ელემენტის name
ატრიბუტის მიერ მითითებული. თუ მითითებულია არარსებული სახელი, შედეგად ახალი ჩანართი გაიხსნება.
როგორც დარეზერვირებული მნიშვნელობები, შეიძლება მივუთითოთ შემდეგი.
_blank
- ჩატვირთავს გვერდს ბრაუზერის ახალ ჩანართში.
_self
- ჩატვირთავს გვერდს მიმდინარე ჩანართში.
_parent
-
ჩატვირთავს გვერდს ფრეიმ-მშობელშ; თუ ფრეიმები არ არის, მაშინ ეს მნიშვნელობა მუშაობს როგორც
_self
. _top
-
გააუქმებს ყველა ფრეიმს და ჩატვირთავს გვერდს ბრაუზერის სრულ ფანჯარაში; თუ ფრეიმები არ არის, მაშინ ეს მნიშვნელობა მუშაობს როგორც
_self
.
name¶
განსაზღვრავს ღილაკის უნიკალურ სახელს. როგორც წესი, ეს სახელი გამოიყენება სერვერზე ღილაკის მნიშვნელობის გაგზავნისას ან ღილაკზე წვდომა სკრიპტების საშუალებით.
სინტაქსი
<button name="<სახელი>">...</button>
მნიშვნელობა
როგორც სახელი, გამოიყენება სიმბოლოების ნაკრები, მათ შორის ციფრები და ასოები. JavaScript მგრძნობიარეა რეგისტრის მიმართ, ამიტომ,
როდესაც ელემენტს სახელით დაუკავშირდით, დააკვირდით მართლწერის იგივე ფორმას, როგორც ატრიბუტში name
.
ნაგულისხმევი მნიშვნელობა
არა.
type¶
განსაზღვრავს ღილაკის ტიპს, რომელიც განსაზღვრავს მის ქცევას ფორმაში. გარეგნულად, სხვადასხვა ტიპის ღილაკები არავითარ შემთხვევაში არ განსხვავდება, მაგრამ თითოეულ ასეთ ღილაკს აქვს საკუთარი ფუნქციები.
სინტაქსი
<button type="button | reset | submit">...</button>
მნიშვნელობა
button
- ჩვეულებრივი ღილაკი.
reset
- ღილაკი ფორმაში შეყვანილი მონაცემების დასუფთავებისთვის და მნიშვნელობის თავდაპირველ მდგომარეობაში დაბრუნებისათვის.
submit
- ღილაკი სერვერზე ფორმის მონაცემების გაგზავნისთვის.
menu
-
ხსნის
<menu>
ელემენტის გამოყენებით შექმნილ მენიუს.
ნაგულისხმევი მნიშვნელობა
submit
value¶
განსაზღვრავს ღილაკის მნიშვნელობას, რომელიც გაიგზავნება სერვერზე. სერვერზე იგზავნება ქყვილი «სახელი=მნიშვნელობა
»,
სადაც სახელი მითიტებულია <button>
ელემენტის name ატრიბუტით, და მნიშვნელობა — ატრიბუტით value
.
მნიშვნელობას შეუძლია შეესაბამებოდეს როგორც ტექსტს ღილაკზე, ასევე შუძლია იყოს დამოუკიდებელი.
ასევე ატრიბუტი value
გამოიყენება მონაცემების წვდომისთვის სკრიპტების საშუალებით.
სინტაქსი
<button value="<ტექსტი>">...</button>
მნიშვნელობა
ნებისმიერი ტექსტური სტრიქონი.
ნაგულისხმევი მნიშვნელობა
არა.
სპეციფიკაციები¶
აღწერა და მაგალითები¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BUTTON</title>
</head>
<body>
<p style="text-align: center">
<button>ღილაკი ტექსტით</button>
<button>
<img
src="image/umbrella.gif"
alt="ქოლგა"
style="vertical-align: middle"
/>
ღილაკი სურათით
</button>
</p>
</body>
</html>
ბმულები¶
-
ტეგი
<button>
MDN (ქართ.)