</> HTML5 📊 Orta ⏱ 20 dk 📋 1 Kod Örneği

Button Türleri ve Özellikleri

Button etiketinin tüm türleri, özellikleri ve doğru kullanım şekilleri.

HTML'de buton oluşturmanın birden fazla yolu vardır. Ancak button etiketi en esnek ve modern yöntemdir.

Button Türleri

type="submit" formu gönderir, type="button" sadece JavaScript ile çalışır, type="reset" formu sıfırlar.

input type="button" ile Farkı

input etiketi içine HTML yazılamaz. Button etiketi içine ikon, resim, span gibi her şey eklenebilir.

Erişilebilirlik

Butona aria-label eklemek ekran okuyucular için önemlidir. Özellikle sadece ikon olan butonlarda zorunludur.

HTML ButonTürleri

<!-- Submit: formu gönderir -->
<button type="submit">Gönder</button>

<!-- Button: sadece JS ile çalışır -->
<button type="button" onclick="alert('Tıklandı!')">
  Tıkla
</button>

<!-- Reset: formu sıfırlar -->
<button type="reset">Temizle</button>

<!-- Disabled: devre dışı -->
<button type="button" disabled>Devre Dışı</button>

<!-- İkon + metin -->
<button type="button">
  ❤ Beğen
</button>

<!-- Aria label (erişilebilirlik) -->
<button type="button" aria-label="Menüyü aç">☰</button>

CANLI ÖNİZLEME

type belirtilmezse varsayılan submittir. Form içindeyse formu gönderir!

← Önceki Ders

Semantik HTML5 Etiketleri

Sonraki Ders →

Form Elemanları