Button & Submit

Button & Submit 🔘

Button adalah elemen interaktif yang memicu aksi saat diklik — mengirim form, mereset data, atau menjalankan fungsi JavaScript. Meski terlihat sederhana, ada banyak detail penting yang perlu dipahami agar tombol bekerja dengan benar.

Dua Cara Membuat Tombol

HTML menyediakan dua cara untuk membuat tombol:

<!-- Cara 1 — tag <button> -->
<button type="submit">Kirim Data</button>

<!-- Cara 2 — input type button -->
<input type="submit" value="Kirim Data">
<input type="reset" value="Reset">
<input type="button" value="Klik Saya">

Perbedaan utamanya:

Tiga Jenis type pada <button>

Atribut type menentukan perilaku tombol saat diklik:

<!-- Submit — mengirim data form ke server -->
<button type="submit">Kirim Form</button>

<!-- Reset — mengembalikan semua input ke nilai awal -->
<button type="reset">Reset Form</button>

<!-- Button — tidak melakukan apapun tanpa JavaScript -->
<button type="button">Tombol Biasa</button>

type="submit" — Tombol Kirim Form

Tombol paling umum — mengumpulkan semua data input dalam form dan mengirimkannya ke action yang ditentukan:

<form action="/login" method="POST">
  <input type="email" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">

  <button type="submit">Masuk</button>
</form>

⚠️ Jika <button> berada di dalam <form> tanpa atribut type, browser otomatis menganggapnya sebagai type="submit" — ini sering menyebabkan form terkirim tanpa sengaja.

<!-- HATI-HATI — ini dianggap submit secara default -->
<button>Klik Saya</button>

<!-- AMAN — selalu cantumkan type secara eksplisit -->
<button type="button">Klik Saya</button>

type="reset" — Tombol Reset Form

Mengembalikan semua input ke nilai awalnya saat halaman pertama dimuat:

<form action="/daftar" method="POST">
  <input type="text" name="nama" placeholder="Nama" value="Budi">
  <input type="email" name="email" placeholder="Email">

  <button type="submit">Daftar</button>
  <button type="reset">Ulangi dari Awal</button>
</form>

Setelah reset:

• Input dengan value="Budi" → kembali ke "Budi"
• Input yang kosong → kembali kosong

Gunakan type="reset" dengan bijak — pengguna yang tidak sengaja mengkliknya akan kehilangan semua data yang sudah diisi.

type="button" — Tombol Aksi JavaScript

Tombol ini tidak melakukan apapun secara default — hanya merespons event JavaScript:

<!-- Tanpa JavaScript — tidak terjadi apapun saat diklik -->
<button type="button">Klik Saya</button>

<!-- Dengan JavaScript — menjalankan fungsi -->
<button type="button" onclick="alert('Halo!')">Tampilkan Alert</button>

<button type="button" onclick="toggleMenu()">Buka Menu</button>

<button type="button" id="btn-muat-lebih">Muat Lebih Banyak</button>
<script>
  document.getElementById('btn-muat-lebih').addEventListener('click', function() {
    console.log('Memuat data...');
  });
</script>

Konten di Dalam <button>

Keunggulan utama <button> dibanding <input type="submit"> adalah bisa berisi HTML apa saja:

<!-- Hanya teks -->
<button type="submit">Kirim</button>

<!-- Teks dengan emoji -->
<button type="submit">🚀 Mulai Sekarang</button>

<!-- Teks dengan ikon SVG -->
<button type="submit">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
    <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
  </svg>
  Kirim Pesan
</button>

<!-- Gambar sebagai tombol -->
<button type="button">
  <img src="ikon-cari.png" alt="Cari" width="20">
</button>

Atribut Penting pada <button>

disabled — Menonaktifkan tombol:

<!-- Tombol tidak bisa diklik, tampil abu-abu -->
<button type="submit" disabled>Kirim (Nonaktif)</button>

<!-- Contoh nyata — tombol aktif setelah checkbox dicentang -->
<input type="checkbox" id="setuju" onchange="
  document.getElementById('btn-daftar').disabled = !this.checked;
">
<label for="setuju">Saya setuju dengan syarat dan ketentuan</label>

<button type="submit" id="btn-daftar" disabled>
  Daftar Sekarang
</button>

form — Menghubungkan tombol ke form tertentu:

Tombol bisa berada di luar tag <form> dan tetap berfungsi menggunakan atribut form:

<form id="form-kontak" action="/kirim" method="POST">
  <input type="text" name="nama" placeholder="Nama Anda">
  <input type="email" name="email" placeholder="Email Anda">
</form>

<!-- Tombol di luar form, tapi tetap submit form-kontak -->
<button type="submit" form="form-kontak">
  Kirim Pesan Kontak
</button>

formaction — Override action form khusus tombol ini:

<form action="/simpan" method="POST">
  <input type="text" name="judul" placeholder="Judul artikel">
  <textarea name="isi" placeholder="Isi artikel..."></textarea>

  <!-- Tombol simpan — kirim ke /simpan -->
  <button type="submit">Simpan Draft</button>

  <!-- Tombol publish — override action ke /publish -->
  <button type="submit" formaction="/publish">Publish Sekarang</button>
</form>

formmethod — Override method form khusus tombol ini:

<form action="/artikel/1" method="POST">
  <button type="submit">Update Artikel</button>

  <!-- Tombol hapus — kirim dengan method DELETE -->
  <button type="submit" formmethod="DELETE" formaction="/artikel/1/hapus">
    Hapus Artikel
  </button>
</form>

name dan value — Tombol sebagai data:

Tombol juga bisa mengirim data ke server — berguna untuk mengetahui tombol mana yang diklik:

<form action="/aksi" method="POST">
  <input type="text" name="catatan" placeholder="Isi catatan">

  <!-- Server menerima: aksi=simpan -->
  <button type="submit" name="aksi" value="simpan">Simpan</button>

  <!-- Server menerima: aksi=hapus -->
  <button type="submit" name="aksi" value="hapus">Hapus</button>
</form>

Styling Tombol dengan CSS

Reset style default browser terlebih dahulu:

button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

Variasi tombol yang umum digunakan:

<style>
  /* Base tombol */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    text-decoration: none;
  }

  /* Primary — aksi utama */
  .btn-primary {
    background-color: #4a9eed;
    color: white;
  }
  .btn-primary:hover {
    background-color: #2563eb;
  }

  /* Secondary — aksi sekunder */
  .btn-secondary {
    background-color: #f3f4f6;
    color: #374151;
  }
  .btn-secondary:hover {
    background-color: #e5e7eb;
  }

  /* Outline — tampilan tepi */
  .btn-outline {
    background-color: transparent;
    border-color: #4a9eed;
    color: #4a9eed;
  }
  .btn-outline:hover {
    background-color: #4a9eed;
    color: white;
  }

  /* Danger — aksi berbahaya */
  .btn-danger {
    background-color: #ef4444;
    color: white;
  }
  .btn-danger:hover {
    background-color: #dc2626;
  }

  /* Ghost — transparan */
  .btn-ghost {
    background-color: transparent;
    color: #4a9eed;
  }
  .btn-ghost:hover {
    background-color: #f0f7ff;
  }

  /* Ukuran kecil */
  .btn-sm {
    padding: 6px 16px;
    font-size: 13px;
  }

  /* Ukuran besar */
  .btn-lg {
    padding: 14px 32px;
    font-size: 17px;
    border-radius: 10px;
  }

  /* Penuh lebar */
  .btn-block {
    width: 100%;
  }

  /* Disabled state */
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Loading state */
  .btn-loading {
    opacity: 0.75;
    cursor: wait;
    pointer-events: none;
  }
</style>

<!-- Contoh penggunaan -->
<button type="submit" class="btn btn-primary">Simpan Data</button>
<button type="button" class="btn btn-secondary">Batal</button>
<button type="button" class="btn btn-outline">Lihat Detail</button>
<button type="button" class="btn btn-danger">Hapus Akun</button>
<button type="button" class="btn btn-ghost">Pelajari Lebih Lanjut</button>

<!-- Ukuran berbeda -->
<button type="button" class="btn btn-primary btn-sm">Kecil</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-lg">Besar</button>

<!-- Penuh lebar -->
<button type="submit" class="btn btn-primary btn-block">Daftar Sekarang</button>

Tombol dengan Loading State

Mencegah submit berulang saat form sedang diproses:

<style>
  .btn-submit {
    padding: 12px 28px;
    background: #4a9eed;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
  }

  .btn-submit:disabled {
    background: #93c5fd;
    cursor: not-allowed;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
  }

  .btn-submit.loading .spinner {
    display: block;
  }

  .btn-submit.loading .btn-text {
    display: none;
  }
</style>

<form id="form-kirim" action="/submit" method="POST">
  <input type="text" name="pesan" placeholder="Tulis pesan...">

  <button type="submit" class="btn-submit" id="tombol-kirim">
    <div class="spinner"></div>
    <span class="btn-text">Kirim Pesan</span>
  </button>
</form>

<script>
  document.getElementById('form-kirim').addEventListener('submit', function() {
    const tombol = document.getElementById('tombol-kirim');
    tombol.disabled = true;
    tombol.classList.add('loading');
  });
</script>

Contoh Grup Tombol di Form Lengkap

<style>
  .form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    margin-top: 24px;
  }

  .btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
  }

  .btn-cancel {
    background: #f3f4f6;
    color: #6b7280;
  }
  .btn-cancel:hover { background: #e5e7eb; }

  .btn-reset {
    background: transparent;
    color: #ef4444;
    border: 1.5px solid #ef4444;
  }
  .btn-reset:hover {
    background: #ef4444;
    color: white;
  }

  .btn-save {
    background: #4a9eed;
    color: white;
  }
  .btn-save:hover { background: #2563eb; }
</style>

<form action="/profil/simpan" method="POST">

  <div class="form-group">
    <label for="p-nama">Nama Lengkap</label>
    <input type="text" id="p-nama" name="nama" value="Budi Santoso">
  </div>

  <div class="form-group">
    <label for="p-email">Email</label>
    <input type="email" id="p-email" name="email" value="[email protected]">
  </div>

  <div class="form-group">
    <label for="p-bio">Bio</label>
    <textarea id="p-bio" name="bio" rows="3" placeholder="Ceritakan tentang diri Anda..."></textarea>
  </div>

  <!-- Grup tombol di bagian bawah form -->
  <div class="form-actions">
    <!-- Tombol batal — kembali ke halaman sebelumnya -->
    <button type="button" class="btn btn-cancel"
      onclick="history.back()">
      Batal
    </button>

    <!-- Tombol reset — kembalikan semua input ke semula -->
    <button type="reset" class="btn btn-reset">
      Reset
    </button>

    <!-- Tombol simpan — submit form -->
    <button type="submit" class="btn btn-save">
      Simpan Perubahan
    </button>
  </div>

</form>

Ringkasan

Atribut tambahan penting:

💡 Tips: Selalu cantumkan atribut type secara eksplisit pada setiap <button> — terutama yang berada di dalam <form>. Tanpa type, browser menganggapnya sebagai type="submit" yang bisa menyebabkan form terkirim secara tidak sengaja. Kebiasaan kecil ini mencegah bug yang membingungkan. 🎯