<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>

მნიშვნელობა

ნებისმიერი ტექსტური სტრიქონი.

ნაგულისხმევი მნიშვნელობა

არა.

სპეციფიკაციები¶

• WHATWG HTML Living Standard
• HTML5
• HTML 4.01 Specification

აღწერა და მაგალითები¶

<!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 (ქართ.)}