ღილაკები

რას ისწავლი

• <button> ელემენტის სამი ტიპი და როდის გამოიყენო თითოეული
• რატომ აგზავნის ღილაკი ფორმას, თუნდაც ეს არ გინდოდეს
• როგორ დაწერო ღილაკის ტექსტი და როდის გამორთო ღილაკი

button ელემენტი

ღილაკი <button> ელემენტით იქმნება. <input>-ისგან განსხვავებით, მას დამხურავი ტეგი აქვს, ამიტომ შიგნით შეიძლება იყოს ტექსტი, ხატულა ან სურათი:

<button type="submit">გაგზავნა</button>

type ატრიბუტი ღილაკის ქცევას განსაზღვრავს:

• submit: აგზავნის ფორმას, რომლის შიგნითაც დგას. ბრაუზერი ჯერ ამოწმებს required და სხვა წესებს, და მხოლოდ მერე აგზავნის.
• reset: ფორმის ყველა ველს საწყის მდგომარეობაში აბრუნებს.
• button: არაფერს აკეთებს! ის JavaScript-ისთვისაა: როცა ღილაკზე დაჭერამ რაღაც უნდა გააკეთოს გვერდზე, მაგალითად ფანჯარა გახსნას ან თამაში დაიწყოს, ფორმის გაგზავნის გარეშე.

ხაფანგი: ნაგულისხმევი ტიპი

თუ type არ დაწერე, ფორმის შიგნით ღილაკი ნაგულისხმევად submit-ია. ეს ბევრ დამწყებს აბნევს: ფორმაში დამატებული ღილაკი „პაროლის ჩვენება“, რომელიც JavaScript-ით უნდა მუშაობდეს, ფორმას მოულოდნელად აგზავნის და გვერდი თავიდან იტვირთება. ამიტომ წესი: ყოველ ღილაკს ყოველთვის დაუწერე type.

reset-ზე ფრთხილად

reset ღილაკი თითქოს მოსახერხებელია, მაგრამ პრაქტიკაში იშვიათად გამოიყენება. წარმოიდგინე: გრძელი ფორმა შეავსე და შემთხვევით „გასუფთავებას“ დააჭირე „გაგზავნის“ ნაცვლად. ყველაფერი დაიკარგა. თუ reset გჭირდება, ის გაგზავნის ღილაკისგან მოშორებით და განსხვავებული სახით მოათავსე.

ღილაკის ტექსტი

კარგი ღილაკი ამბობს, რა მოხდება მასზე დაჭერისას:

• „გაგზავნა“ ზოგადია. „შეკვეთის გაფორმება“, „რეგისტრაცია“, „ძებნა“ უფრო ზუსტია.
• „OK“ და „დიახ“ კონტექსტის გარეშე არაფერს ამბობს.
• ტექსტი მოკლე იყოს: ერთი-სამი სიტყვა, ზმნით დაწყებული.

თუ ღილაკზე მხოლოდ ხატულაა, მაგალითად 🔍, ეკრანის წამკითხველისთვის ტექსტი მაინც საჭიროა: <button type="submit" aria-label="ძებნა">🔍</button>. aria-label ელემენტს უხილავ სახელს აძლევს.

disabled: გამორთული ღილაკი

ლოგიკური ატრიბუტი disabled ღილაკს გამორთავს: ის ნაცრისფრად ჩანს და დაჭერაზე არ რეაგირებს. ეს გამოიყენება, მაგალითად, სანამ ფორმა არ არის შევსებული ან სანამ შეკვეთა იგზავნება, რომ ორჯერ არ გაიგზავნოს. JavaScript-ით მოგვიანებით ისწავლი, როგორ ჩართო და გამორთო ის საჭიროებისამებრ.

input type="submit"

ძველ კოდში შეიძლება შეხვდე ჩანაწერს <input type="submit" value="გაგზავნა">. ის <button type="submit">-ის მსგავსად მუშაობს, მაგრამ ტექსტის გარდა შიგნით ვერაფერს ჩასვამ. თანამედროვე კოდში <button> ჯობს.

სცადე თავად

ჩაწერე ველებში ტექსტი და დააჭირე „გასუფთავებას“. მესამე ღილაკი type="button"-ია და არაფერს აკეთებს: მას JavaScript დასჭირდება. ბოლო ღილაკი გამორთულია.

ხშირი შეცდომები

• type-ის გარეშე ღილაკი ფორმაში. ის ფორმას გააგზავნის. ყოველთვის მიუთითე ტიპი.
• ბმული, რომელიც ღილაკად გამოიყურება, და პირიქით. ბმული სხვა გვერდზე გადადის (<a>), ღილაკი მოქმედებას ასრულებს (<button>). ეკრანის წამკითხველი მათ სხვადასხვანაირად აცხადებს.
• ხატულიანი ღილაკი სახელის გარეშე. დაამატე aria-label.

<form action="/comments" method="post">
  <p>
    <label for="comment">კომენტარი</label><br>
    <textarea id="comment" name="comment" rows="3" required></textarea>
  </p>
  <button type="button" aria-label="ემოჯის არჩევა">🙂</button>
  <button type="submit">კომენტარის დამატება</button>
</form>

მინი-ქვიზი

შეჯამება

• <button>-ს სამი ტიპი აქვს: submit აგზავნის, reset ასუფთავებს, button JavaScript-ისთვისაა.
• ფორმაში ტიპის გარეშე ღილაკი submit-ია: ყოველთვის დაწერე type.
• ღილაკის ტექსტი ამბობს, რა მოხდება. ხატულიან ღილაკს aria-label სჭირდება.
• disabled ღილაკს გამორთავს.