Перейти к содержанию

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