Çalıştırılabilir HTML Dokümanları: HTML button

Q: HTML'de buton nasıl yapılır?

Click me yaz. Etiketlerin arasındaki metin butonun yazısıdır. Bir şey yapması için JavaScript'te bir click dinleyicisi ekle ya da formu göndermesi için onu type="submit" ile bir içine koy.

Q: Bir HTML butonunun varsayılan türü nedir?

submit. Bir form içinde type özelliği olmayan bir , tıklandığında o formu gönderir; formdaki sıradan bir butonun sayfayı yeniden yükleyebilmesinin nedeni budur. Onun yerine JavaScript çalıştıran her buton için type="button" yaz.

Q: button ile input type=submit arasındaki fark nedir?

İkisi de formu gönderir. etiketlerinin arasında HTML (bir ikon, kalın metin) barındırabilir; ise yazısını value özelliğinden alır ve yalnızca düz metin tutabilir. Modern kodların çoğu kullanır.

Q: HTML'de bir buton nasıl devre dışı bırakılır?

disabled özelliğini ekle: Save . Devre dışı bir buton tıklanamaz ya da odaklanamaz ve adı ile değeri formla birlikte gönderilmez. Yeniden etkinleştirmek için özelliği kaldır (JavaScript'te btn.disabled = false).

Q: Bir HTML butonunun başka bir sayfaya gitmesini nasıl sağlarım?

Buton gibi stil verilmiş bir link kullan: See pricing . Bir geçerli sayfadaki eylemler içindir. Bir butonu ile sarmak geçersiz HTML'dir.

Q: Butonum neden sayfayı yeniden yüklüyor?

Bir içinde ve type değeri yok, yani bir gönder butonu; tarayıcı da formu gönderip yanıtı yüklüyor. Ona type="button" ekle ya da formu JavaScript ile işliyorsan bir submit dinleyicisinde event.preventDefault() çağır.

HTML'de buton nasıl yapılır

Buton, <button> elementidir. Etiketlerin arasındaki içerik kullanıcının gördüğü şeydir, type="button" de butonun bir form göndermek yerine senin script'ini çalıştırdığını söyler. Önizlemede ona tıkla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

Çalışan bir butonun ihtiyacı olan her şey bu: bir yazı, bir type ve click olayını dinleyen bir şey. Tarayıcı onu klavyeyle odaklanabilir yapar ve Enter ya da Space ile etkinleştirir, yani klavye kullananlar bunu hiçbir ek iş olmadan alır. Tıklama işleyicisi olan bir <div> bunların hiçbirini almaz.

Doğrudan etikete yazılmış onclick="..." da görebilirsin. Çalışır, ama addEventListener script'i işaretlemenin dışında tutar ve birkaç dinleyicinin tek bir butonu paylaşmasına izin verir.

Üç buton türü

type özelliği, butona basıldığında ne yapacağına karar verir.

`type`	Ne yapar	Ne için kullanılır
`submit`	Ait olduğu formu gönderir. Varsayılan budur.	Bir formun ana eylemi
`button`	Kendi başına hiçbir şey; karar senin JavaScript'indir	Aç kapa düğmeleri, diyaloglar, sayaçlar, script ile yapılan her şey
`reset`	Formun her alanını başlangıç değerine döndürür	Nadiren; kullanıcılar ona yanlışlıkla basar

Bir şey yaz, sonra her butonu dene. Önizleme form gönderildiğinde sayfadan ayrılmaz; formun göndereceği veriyi gösterir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset boş bir alanı değil, HTML'de yazılı olan değeri (Ada) geri getirir. Uppercase butonundan type="button" değerini silersen o bir gönder butonu olur: adı büyük harfe çevirir ve sonra formu gönderir.

HTML submit butonu: bir ad ve değer göndermek

Bir gönder butonu kendi name ve value değerlerini taşıyabilir. Bunlar yalnızca formu gönderen buton o olduğunda formla birlikte gönderilir; böylece iki buton tek bir formu paylaşabilir ve sunucuya hangi eylemin seçildiğini söyleyebilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

Publish'e bas, form title=My first post ve action=publish gönderir. Başlığı temizle ve herhangi bir butona bas: required gönderimi durdurur ve tarayıcı kendi mesajını gösterir. Metin alanının içinde Enter'a basmak da formu gönderir ve tarayıcı bunu ilk gönder butonuna basılmış gibi ele alır, yani action=draft gönderir.

Gönder butonları, formun ayarlarını yalnızca o buton için geçersiz kılan özellikleri de kabul eder: formaction (farklı bir URL), formmethod, formtarget ve doğrulamayı atlayan formnovalidate. Zorunlu alanlar hâlâ boşken çalışması gereken bir "Taslak kaydet" butonu için olağan seçim formnovalidate olur.

Formunun dışına konmuş bir buton da, formun id değerini alan form özelliğiyle onu yine gönderebilir: <button type="submit" form="signup">Sign up</button>.

Devre dışı butonlar

disabled özelliği bir butonu kapatır. Devre dışı bir buton tıklamaları yok sayar, Tab onu atlar ve formla birlikte gönderilmez. Tarayıcılar onu grileştirir de. Yaygın bir kalıp, bir koşul sağlanana kadar gönder butonunu devre dışı tutmaktır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

JavaScript'te button.disabled boolean bir özelliktir: onu true ya da false yap. HTML'de önemli olan özelliğin var olmasıdır, bu yüzden disabled="false" butonu yine de devre dışı bırakır.

Devre dışı bir buton neden devre dışı olduğunu söylemez ve Tab ile ilerleyen klavye ve ekran okuyucu kullananlar ona hiç ulaşmaz. Neden açık değilse, bunu butonun yanında bir metinle söyle ya da butonu etkin bırakıp basıldığında bir hata mesajı göster.

CSS ile butona stil vermek

Tarayıcılar butonları kendi yazı tipi, kenarlığı ve arka planıyla çizer. Birkaç özellik ayarlamak bunların hepsini değiştirir. Görünür bir odak stili bırak: klavye kullananlar nerede olduklarını böyle görür.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

Her kural ne işe yarar:

font: inherit butonun sayfanın yazı tipini kullanmasını sağlar. O olmadan butonlar tarayıcının kendi, daha küçük form yazı tipini kullanır (Chrome ve Firefox'ta 13.33px).
cursor: pointer el imlecini gösterir. Butonlar varsayılan olarak normal oku gösterir.
:hover, :active ve :focus-visible işaretçi, basılma ve klavye durumlarına stil verir. :focus-visible klavye odağında halkayı gösterir ama fare tıklamasından sonra göstermez, bu yüzden ondan kaçınmak için outline kaldırman gerekmez.
:disabled, disabled özelliği olan butonları hedefler.

Kehribar rengi odak halkasının ilk iki buton arasında gezindiğini görmek için önizlemede Tab'a bas. Devre dışı olan atlanır. (Mac'te Safari ve Firefox, butonlara yalnızca sistem ayarlarında klavye gezinmesi açıksa Tab ile gider; Safari'de Option+Tab bu ayar olmadan da çalışır.) Durumların tam listesi için CSS hover sayfasına bak.

İkonlu butonlar

<button> HTML barındırabildiği için bir ikon metnin yanına, butonun içine girer. Yalnızca ikonu olan bir butonun ekran okuyucuların duyuracağı bir metni yoktur, bu yüzden ona bir aria-label ver:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

SVG üzerindeki aria-hidden="true" onu erişilebilirlik ağacının dışında tutar, böylece ilk buton "Add item, button", ikincisi "Delete, button" olarak duyurulur.

button ve input type="submit"

<input type="submit"> bir gönder butonu yazmanın eski yoludur. İkisi de formu aynı şekilde gönderir; fark neleri içerebildikleridir.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
Yazı	Etiketlerin arasındaki içerik	`value` özelliği
İkon ya da işaretleme içerebilir	Evet	Hayır
Kapanış etiketi	Gerekli	Yok (boş element)
Varsayılan tür	`submit`	Her zaman submit

<button> kullan. <input type="submit"> tutmak için tek neden, onu seçen mevcut CSS ya da JavaScript'tir. Diğer iki tür için aynı fikirde <input type="button"> ve <input type="reset"> da vardır.

Buton mu, link mi?

Bir buton geçerli sayfada bir şey yapar: gönderir, açar, değiştirir, siler. Bir link başka bir URL'ye gider. Ona tıklamak adres çubuğunu değiştiriyorsa, tasarım gerektiriyorsa buton gibi stil verilmiş bir <a href> olmalı. Bu kalıp ve link içindeki bir butonun neden geçersiz olduğu HTML buton link sayfasında anlatılıyor.

Erişilebilirlik

Gerçek bir <button> kullan. Odaklanabilir, Enter ve Space ile çalışır ve buton olarak duyurulur. Bunu bir <div> üzerinde yeniden kurmak role, tabindex ve tuş işleyicileri gerektirir ve genellikle yine de eksik kalır.
Her butonun bir adı olmalı: metni ya da yalnızca ikonu varsa aria-label.
Görünür bir odak stili bırak. Yerine bir şey koymadan outline: none yazmak klavye kullananları kaybolmuş bırakır.
Hedefi tıklanacak kadar büyük yap. WCAG 2.2 en az 24'e 24 CSS pikseli ister; yukarıdaki stilli örnekteki gibi bir padding yaklaşık 40 piksel yükseklik verir.
Bir aç kapa düğmesi için aria-pressed="true" ya da "false" ekle ve durum değiştiğinde güncelle.

Sık yapılan hatalar

Bir formda type değeri olmayan bir buton. Formu gönderir. Gönderme amaçlı olmayan her butona type="button" yaz.
Bir butonu link ile sarmak, <a href="/x"><button>Go</button></a>. Geçersiz HTML'dir ve tarayıcılar arasında farklı davranır. Tek bir element kullan: buton gibi stil verilmiş bir link.
Buton olarak <div onclick> kullanmak. Ona klavyeyle ulaşılamaz.
Odak çerçevesini kaldırıp bir :focus-visible stili eklememek.
disabled="false" yazıp etkin bir buton beklemek. Onun yerine özelliği kaldır.
font: inherit değerini unutmak ve butonların neden sayfanın geri kalanından farklı bir yazı tipi kullandığını merak etmek.

Sıkça Sorulan Sorular

HTML'de buton nasıl yapılır?

<button type="button">Click me</button> yaz. Etiketlerin arasındaki metin butonun yazısıdır. Bir şey yapması için JavaScript'te bir click dinleyicisi ekle ya da formu göndermesi için onu type="submit" ile bir <form> içine koy.

Bir HTML butonunun varsayılan türü nedir?

submit. Bir form içinde type özelliği olmayan bir <button>, tıklandığında o formu gönderir; formdaki sıradan bir butonun sayfayı yeniden yükleyebilmesinin nedeni budur. Onun yerine JavaScript çalıştıran her buton için type="button" yaz.

button ile input type=submit arasındaki fark nedir?

İkisi de formu gönderir. <button> etiketlerinin arasında HTML (bir ikon, kalın metin) barındırabilir; <input type="submit"> ise yazısını value özelliğinden alır ve yalnızca düz metin tutabilir. Modern kodların çoğu <button> kullanır.

HTML'de bir buton nasıl devre dışı bırakılır?

disabled özelliğini ekle: <button disabled>Save</button>. Devre dışı bir buton tıklanamaz ya da odaklanamaz ve adı ile değeri formla birlikte gönderilmez. Yeniden etkinleştirmek için özelliği kaldır (JavaScript'te btn.disabled = false).

Bir HTML butonunun başka bir sayfaya gitmesini nasıl sağlarım?

Buton gibi stil verilmiş bir link kullan: <a href="/pricing" class="btn">See pricing</a>. Bir <button> geçerli sayfadaki eylemler içindir. Bir butonu <a> ile sarmak geçersiz HTML'dir.

Butonum neden sayfayı yeniden yüklüyor?

Bir <form> içinde ve type değeri yok, yani bir gönder butonu; tarayıcı da formu gönderip yanıtı yüklüyor. Ona type="button" ekle ya da formu JavaScript ile işliyorsan bir submit dinleyicisinde event.preventDefault() çağır.

İlgili kavramlar