HTML Button Etiketi

Web sayfalarında butonlar, kullanıcıların işlem yapmasını sağlayan temel öğelerden biridir. İster bir formu göndermek, ister bir eylemi başlatmak için olsun, butonlar kullanıcı etkileşiminde önemli bir rol oynar. Bu yazıda, <button> elementinin nasıl çalıştığını, farklı kullanım türlerini ve alternatif yöntemleri öğreneceğiz.

1. <button> Elementi Nedir?

<button>, HTML’de bir buton oluşturmak için kullanılan bir elementtir. Açılış ve kapanış etiketleri arasında yer alan metin, butonun etiketini (label) oluşturur.

Özellikleri:

1. Varsayılan Davranış: Eğer bir buton bir formun içinde bulunuyorsa, varsayılan olarak formu gönderir.
2. Esnek Kullanım: CSS ve JavaScript ile görsel ve işlevsel olarak özelleştirilebilir.
3. Tip (type) Özelliği: Butonun davranışını belirlemek için kullanılır.

2. <button> Kullanımı

En temel buton şu şekilde tanımlanabilir:

<button>Gönder</button>

Bu buton, bir formun içinde bulunursa varsayılan olarak formu gönderir.

Tip Özelliği ile Buton Davranışını Değiştirme

Butonun davranışını belirlemek için type özelliği kullanılır. Aşağıda en yaygın üç türü görebilirsiniz:

1. type="submit" (Varsayılan):

   • Buton, formu gönderir.
   htmlKopyala

   <button type="submit">Gönder</button>

2. type="button":

   • Buton, herhangi bir varsayılan işlem gerçekleştirmez. JavaScript ile işlevsellik eklenebilir.
   htmlKopyala

   <button type="button">Tıklayın</button>

3. type="reset":

   • Formdaki tüm alanları sıfırlar.
   htmlKopyala

   <button type="reset">Sıfırla</button>

3. Alternatif Yöntem: input type="submit"

Bir buton oluşturmanın alternatif bir yolu, <input> elementini kullanmaktır:

<input type="submit" value="Gönder">

Neden Tercih Edilmeyebilir?

• Kısıtlılık: <input> etiketinde kapanış etiketi yoktur ve içerisine HTML eklenemez.
• Esneklik Eksikliği: Butonun metnini değiştirmek için value özelliği kullanılmalıdır. Bu da <button> kadar esnek değildir.

4. Birden Fazla Buton Örneği

Bir form içinde farklı türde butonların nasıl çalıştığını görelim:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Örneği</title>
</head>
<body>
  <h1>Button Kullanımı</h1>
  <form action="/islem">
    <!-- Gönder Butonu -->
    <button type="submit">Gönder</button>

    <!-- Varsayılan Davranışlı Buton -->
    <button>Varsayılan</button>

    <!-- İşlemsiz Buton -->
    <button type="button">Tıklayın</button>

    <!-- Sıfırla Butonu -->
    <button type="reset">Sıfırla</button>

    <!-- Input ile Gönder -->
    <input type="submit" value="Input Gönder">
  </form>

  <!-- Form Dışında Bir Buton -->
  <button type="button">Form Dışında</button>
</body>
</html>

5. Örnek Çıktı ve Davranışlar

Form İçindeki Butonlar:

1. Gönder: Formu /islem URL’sine gönderir.
2. Varsayılan: Formu gönderir (varsayılan davranış).
3. Tıklayın: Herhangi bir işlem yapmaz.
4. Sıfırla: Formdaki tüm alanları temizler.
5. Input Gönder: Formu gönderir.

Form Dışındaki Buton:

• Hiçbir varsayılan işlem yapmaz. JavaScript ile özelleştirilebilir.

6. Özet

<button> elementleri, form gönderiminden kullanıcı eylemlerini başlatmaya kadar çok geniş bir kullanım alanına sahiptir:

• Form Gönderimi: Varsayılan olarak, form içinde bulunan butonlar formu gönderir.
• Esneklik: <button>, görsel ve işlevsel özelleştirme açısından daha fazla olanak sunar.
• Alternatif Yöntemler: <input type="submit">, temel butonlar için kullanılabilir, ancak <button> kadar esnek değildir.

Form tasarımlarınızda butonların doğru şekilde çalışmasını sağlamak için type özelliğini kullanmayı unutmayın.