HTML button Etiketi: type, formaction ve commandfor Rehberi

type özniteliği: submit, reset, button

MDN'in type açıklamasında önemli bir ayrıntı var: değer hiç yazılmamışsa, boşsa ya da geçersizse ve düğme bir forma bağlıysa düğme submit olur. Bu yüzden MDN, sunucuya veri göndermeyecek her düğmeye type="button" yazmanızı ister; aksi hâlde düğme formu göndermeye ve var olmayan bir yanıtı yüklemeye çalışır, bu da sayfanın o anki durumunu bozabilir. Bir açılır menüyü açan, bir listeye satır ekleyen veya parolayı gösteren düğmeler tipik örneklerdir.

<form action="/sepet" method="post">
  <label for="adet">Adet</label>
  <input type="number" id="adet" name="adet" value="1" min="1" />

  <!-- Formu göndermez, yalnızca betik çalıştırır -->
  <button type="button" id="artir">Bir artır</button>

  <!-- Formu gönderir -->
  <button type="submit">Sepete ekle</button>
</form>

reset konusunda MDN oldukça nettir: sıfırlama düğmeleri nadiren işe yarar ve genellikle gönder düğmesine basmaya çalışırken yanlışlıkla tıklanıp kullanıcının yazdığı her şeyi silerek hayal kırıklığı yaratır. Çok özel bir neden yoksa formlara sıfırlama düğmesi koymayın.

name ve value: hangi düğmeye basıldı?

Bir düğmenin name ve value öznitelikleri, yalnızca formu o düğme gönderdiğinde form verisine eklenir. Böylece aynı formda birden fazla gönder düğmesi kullanıp sunucuda hangisinin seçildiğini ayırt edebilirsiniz:

<form action="/yorum" method="post">
  <label for="metin">Yorum</label>
  <textarea id="metin" name="metin"></textarea>

  <button type="submit" name="islem" value="onizle">Önizle</button>
  <button type="submit" name="islem" value="yayinla">Yayınla</button>
</form>
<!-- "Yayınla" ile gönderimde gövdede: metin=...&islem=yayinla -->

Gönderimi başlatmayan diğer düğmenin çifti veriye girmez. Bu teknik, iki ayrı form yazmak yerine aynı alanlarla farklı işlemler yapmanın en basit yoludur.

formaction, formmethod, formenctype, formtarget, formnovalidate

Gönder düğmeleri, formun gönderim özniteliklerini yalnızca kendileri için ezen beş öznitelik taşıyabilir. Bunlar <button>, <input type="submit"> ve <input type="image"> üzerinde çalışır:

• formaction: gönderimin gideceği URL; formun action değerinin yerine geçer.
• formmethod: get, post veya dialog; formun method değerini ezer.
• formenctype: application/x-www-form-urlencoded, multipart/form-data veya text/plain; formun enctype değerini ezer.
• formtarget: yanıtın açılacağı bağlam; _self, _blank, _parent, _top veya bir pencere ya da iframe adı.
• formnovalidate: mantıksal öznitelik; bu düğmeyle gönderimde doğrulama yapılmaz.

<form action="/makale/yayinla" method="post">
  <label for="baslik">Başlık</label>
  <input type="text" id="baslik" name="baslik" required />

  <button type="submit">Yayınla</button>
  <button type="submit" formaction="/makale/taslak" formnovalidate>
    Taslak olarak kaydet
  </button>
  <button type="submit" formaction="/makale/onizle" formtarget="_blank">
    Yeni sekmede önizle
  </button>
</form>

"Taslak olarak kaydet" düğmesi başlık boşken bile formu /makale/taslak adresine gönderir, çünkü formnovalidate doğrulamayı yalnızca bu düğme için kapatır. MDN bir tuzağı da hatırlatır: forma bağlı olmayan bir düğmede formaction hiçbir şey yapmaz. Düğmeyi formun içine koymalı ya da form özniteliğiyle bağlamalısınız.

form özniteliği ile düğmeyi dışarıdan bağlamak

form özniteliği, düğmeyi değer olarak verilen id değerine sahip forma bağlar. Bu sayede düğme sayfanın başka bir yerinde, örneğin sabit bir alt çubukta durabilir. Öznitelik, düğmeyi içinde bulunduğu formdan koparıp başka bir forma bağlamak için de kullanılabilir. Form özniteliğinin genel kuralları form etiketi yazısında anlatılıyor.

<form id="ayarlar" action="/ayarlar" method="post">
  <label>Görünen ad <input type="text" name="ad" /></label>
</form>

<footer>
  <button form="ayarlar" type="submit">Ayarları kaydet</button>
</footer>

button ile input type="submit" arasındaki fark

Aynı işi yapan iki yazım vardır, fakat aralarında önemli farklar bulunur. <input> boş bir öğedir ve düğmenin metni value özniteliğinden gelir; value yazılmazsa tarayıcı kendi varsayılan metnini ("Gönder" benzeri) kullanır, type="button" türünde ise düğme boş görünür. <button> ise metnini açılış ve kapanış etiketleri arasından alır ve bu içerik HTML olabilir: bir simge, satır sonu ya da görsel ekleyebilirsiniz.

MDN <input type="button"> sayfasında, bu yazımın hâlâ geçerli HTML olduğunu ama düğme oluşturmanın tercih edilen yolunun <button> öğesi olduğunu söyler. <input type="image"> ise bir görseli gönder düğmesine çevirir; src ve zorunlu sayılması gereken alt alır. Bu düğmeyle gönderimde tarayıcı tıklanan noktanın x ve y koordinatlarını da ekler; düğmenin name değeri konum ise veri konum.x=52&konum.y=55 biçiminde gider.

disabled ve autofocus

disabled mantıksal özniteliği düğmeyi basılamaz ve odaklanamaz hâle getirir. Düğmenin kendisinde yazılmamışsa bile, devre dışı bir <fieldset> içindeyse düğme yine devre dışı kalır. JavaScript ile btn.disabled = true veya false atayarak durumu değiştirebilirsiniz. MDN, Firefox'un dinamik olarak verilen disabled durumunu sayfa yeniden yüklendiğinde koruduğunu ve bunun autocomplete özniteliğiyle denetlenebildiğini not eder.

autofocus, sayfa yüklendiğinde düğmeye odak verir ve belgede yalnızca bir öğede bulunmalıdır. Erişilebilirlik açısından otomatik odağın dikkatli kullanılması gerektiği tabindex ve klavye erişimi yazısında anlatılıyor.

commandfor ve command: betiksiz düğme komutları

commandfor, düğmeyi bir komut düğmesine çevirir ve değer olarak denetlenecek öğenin id değerini alır. Yapılacak iş command özniteliğiyle seçilir. MDN, commandfor özniteliğini popovertarget özniteliğinin daha genel bir sürümü olarak tanımlar. Bu öznitelikler yeni olduğu için tarayıcı desteği için MDN uyumluluk tablosuna bakın. command şu değerleri alır:

• show-modal: bir <dialog> öğesini modal olarak açar; showModal() çağrısının bildirimsel karşılığıdır.
• close: iletişim kutusunu kapatır; düğmenin value değeri iletişim kutusunun returnValue özelliğine aktarılır.
• request-close: önce cancel olayını tetikleyerek kapanmayı ister; olay iptal edilirse kutu açık kalır. value burada da returnValue olur.
• show-popover, hide-popover, toggle-popover: bir popover öğesini gösterir, gizler veya durumunu değiştirir.
• İki tireyle başlayan özel değerler (örneğin --yenile): denetlenen öğede bir CommandEvent olayı tetikler; işi kendi betiğiniz yapar.

<button type="button" commandfor="sil-onay" command="show-modal">
  Kaydı sil
</button>

<dialog id="sil-onay">
  <h2>Kayıt silinsin mi?</h2>
  <p>Bu işlem geri alınamaz.</p>
  <button commandfor="sil-onay" command="close" value="iptal">Vazgeç</button>
  <button commandfor="sil-onay" command="close" value="sil">Sil</button>
</dialog>

Hangi düğmeyle kapatıldığını öğrenmek için iletişim kutusunun close olayında returnValue okunur. Bu kısa betik MDN örneğindeki yaklaşımı izler:

const kutu = document.getElementById("sil-onay");
kutu.addEventListener("close", () => {
  if (kutu.returnValue === "sil") {
    // silme isteğini burada gönderin
  }
});

Popover denetimi için eski ama yaygın yol popovertarget ve popovertargetaction (show, hide, varsayılan toggle) öznitelikleridir. MDN bu bağın tarayıcıya örtük aria-details ve aria-expanded ilişkisi kurdurduğunu ve popover açıldığında onu klavye sırasında mantıklı bir yere koyduğunu belirtir. Ayrıntılar popover yazısında, iletişim kutusunun bütün davranışları dialog yazısında anlatılıyor. Üzerine gelince veya odaklanınca bir hedefi gösteren interestfor özniteliği de button sayfasında listeleniyor; tarayıcı desteği için MDN uyumluluk tablosuna bakın.

Düğmeler ve doğrulama

MDN Constraint validation rehberine göre gönder düğmeleri (type="submit" olan <button> ve <input type="submit">) setCustomValidity() yöntemini destekleyen öğeler arasında yer alır; diğer düğme türleri kısıt doğrulamasına hiç katılmaz. input sayfaları ise düğmelerin kısıtlanacak gerçek bir değeri olmadığı için doğrulamaya katılmadığını söyler. Pratik sonuç şudur: bir düğmeye required yazmanın anlamı yoktur, doğrulama her zaman formdaki alanlar üzerinden yapılır ve düğme yalnızca bu doğrulamayı başlatan (ya da formnovalidate ile atlayan) öğedir.

Klavye kısayolu: accesskey

MDN submit ve reset sayfaları, düğmelere accesskey global özniteliğiyle bir klavye kısayolu verilebileceğini gösterir. Kısayolu tetiklemek için gereken değiştirici tuşlar tarayıcıya ve işletim sistemine göre değişir; MDN örneğinde aynı s kısayolu macOS üzerindeki Firefox'ta Control-Option-S, Windows üzerindeki Chrome'da Alt+S ile çalışır.

<button type="submit" accesskey="s" title="Kısayol: s">Kaydet</button>

Asıl sorun, kullanıcının bu kısayolun varlığından haberi olmamasıdır. MDN, kısayolları tasarımı bozmayan bir yerde duyurmanızı ve title ipucunun tek başına yeterli olmadığını belirtir. accesskey sayfası daha da ileri gider: sistem veya yardımcı teknoloji kısayollarıyla çakışma, bazı klavyelerde karakterin bulunmaması gibi sorunlar nedeniyle genel amaçlı sitelerde kullanılmamasını önerir. Klavye erişiminin tamamı tabindex yazısında anlatılıyor.

Uygulamalı örnek: giriş formu

Aşağıdaki küçük giriş formu üç farklı düğme rolünü bir arada gösteriyor. Parolayı gösteren düğme yalnızca betik çalıştırır ve formu göndermez; giriş düğmesi formu doğrulayıp gönderir; "Parolamı unuttum" ise bir işlem değil başka bir sayfaya gitmek olduğu için düğme değil bağlantıdır.

<form action="/giris" method="post">
  <label for="g-kullanici">Kullanıcı adı</label>
  <input type="text" id="g-kullanici" name="kullanici" autocomplete="username" required />

  <label for="g-parola">Parola</label>
  <input type="password" id="g-parola" name="parola" autocomplete="current-password" required />
  <button type="button" id="goster" aria-pressed="false">Parolayı göster</button>

  <button type="submit">Giriş yap</button>
  <a href="/parola-sifirla">Parolamı unuttum</a>
</form>

"Parolayı göster" düğmesinde type="button" yazılmasaydı ilk tıklamada form gönderilirdi. Durum bildiren bir aç kapa düğmesi olduğu için aria-pressed taşır; betik, alanın türünü değiştirirken bu değeri de güncellemelidir. Parola alanının özellikleri autocomplete ve şifre alanı yazısında bulunur.

İçerik kuralları

Teknik özete göre <button> ifade içeriği alır ama içinde etkileşimli içerik bulunamaz: düğmenin içine bağlantı, başka bir düğme veya bir form alanı koymak geçersizdir. Tek istisna özelleştirilebilir select yapısıdır; select öğesinin ilk alt öğesi olan button, bir <selectedcontent> barındırabilir (select yazısı). Örtük rolü button olur; checkbox, switch, tab, menuitem, link gibi roller izinlidir.

Erişilebilirlik

• Simge düğmelerinin adı olmalı: yalnızca simge içeren düğmenin erişilebilir adı yoktur. Düğmenin içine işlevini anlatan kısa bir metin koyun; MDN görünür metnin, simgeyi tanımayan kullanıcılara da yardım ettiğini hatırlatır.
• Boyut ve aralık: MDN en az 44x44 CSS pikseli bir etkileşim alanı önerir ve yan yana düğmeler arasında boşluk bırakılmasını ister.
• Durum bildirmek: aç kapa düğmelerinde doğru ARIA özniteliği aria-pressed olur; aria-checked veya aria-selected değil.
• Odak halkasını silmeyin: düğme stilleri değiştirilse bile odak durumu yeterli kontrastla görünür kalmalıdır.
• Tıklama ve odak: bir düğmeye tıklamanın ona odak verip vermediği tarayıcıya ve işletim sistemine göre değişir; MDN Safari'nin bunu tasarım gereği yapmadığını belirtir.

<button type="button" aria-pressed="false">
  <img src="/simge/sessiz.svg" alt="" width="16" height="16" />
  Sesi kapat
</button>

Sık yapılan hatalar

• Formdaki yardımcı düğmeye type yazmamak: düğme formu gönderir; type="button" ekleyin.
• Sıfırlama düğmesi koymak: kullanıcı verisini yanlışlıkla siler.
• Düğme yerine tıklanabilir div kullanmak: klavye erişimi, odak ve rol elle kurulmak zorunda kalır; yerleşik <button> bunları hazır verir.
• Formsuz düğmeye formaction yazmak: forma bağlı olmadıkça hiçbir etkisi olmaz.
• Düğmenin içine bağlantı koymak: etkileşimli içerik iç içe geçemez; bir sayfaya gidiliyorsa <a> kullanın (a etiketi yazısı).
• Yalnızca simgeli düğmeye metin vermemek: ekran okuyucu "düğme" demekle yetinir.

Sık Sorulan Sorular

Formdaki button neden sayfayı yeniliyor?

Çünkü forma bağlı bir düğmenin varsayılan türü submit olur. Gönderim yapmayacak düğmelere type="button" yazın.

Bağlantı mı düğme mi kullanmalıyım?

Başka bir adrese gidiliyorsa bağlantı, sayfada bir işlem yapılıyorsa (form gönderme, iletişim kutusu açma, bir şeyi gösterip gizleme) düğme kullanın.

commandfor için JavaScript gerekir mi?

Yerleşik komutlar (show-modal, close, popover komutları) için gerekmez. Özel -- değerlerinde ise CommandEvent olayını kendiniz dinlemelisiniz.

Düğmeye ayrıca label bağlamalı mıyım?

Gerek yoktur. MDN label sayfasına göre geçerli bir value taşıyan <input type="button"> ile metni olan <button> adını kendi içeriğinden alır; ek bir etiket yardımcı teknolojilerin düğmeyi yorumlamasını bozabilir. Yalnızca simge içeren düğmelere ise görünür ya da görsel olarak gizlenmiş bir metin ekleyin.

input type="submit" artık kullanılmamalı mı?

Geçerli HTML olmaya devam eder. İçine HTML koymanız gerekmiyorsa sorun yoktur; esneklik ve kolay biçimleme için MDN <button> öğesini tercih eder.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · form etiketi · dialog etiketi · popover özniteliği · form doğrulama · tabindex ve klavye erişimi · JavaScript öğrenme rehberi