Dokumentasi HTML interaktif: Button

Q: Bagaimana cara membuat tombol di HTML?

Tulis Click me . Teks di antara tag-nya adalah labelnya. Tambahkan listener click di JavaScript supaya tombol melakukan sesuatu, atau taruh di dalam dengan type="submit" untuk mengirim form.

Q: Apa type default dari tombol HTML?

submit. tanpa atribut type di dalam form akan mengirim form itu saat diklik, itulah kenapa tombol biasa di dalam form bisa memuat ulang halaman. Tulis type="button" untuk setiap tombol yang menjalankan JavaScript.

Q: Apa perbedaan button dan input type=submit?

Keduanya mengirim form. bisa berisi HTML (ikon, teks tebal) di antara tag-nya, sedangkan mengambil labelnya dari atribut value dan hanya bisa berisi teks biasa. Kebanyakan kode modern memakai .

Q: Bagaimana cara menonaktifkan tombol di HTML?

Tambahkan atribut disabled: Save . Tombol disabled tidak bisa diklik atau difokus, dan name serta value-nya tidak dikirim bersama form. Hapus atributnya (btn.disabled = false di JavaScript) untuk mengaktifkannya lagi.

Q: Bagaimana cara membuat tombol HTML yang menuju halaman lain?

Pakai link yang diberi gaya seperti tombol: See pricing . dipakai untuk aksi di halaman yang sedang dibuka. Membungkus tombol dengan adalah HTML yang tidak valid.

Q: Kenapa tombolku memuat ulang halaman?

Tombol itu ada di dalam dan tidak punya type, jadi ia adalah tombol submit dan browser mengirim form lalu memuat responsnya. Tambahkan type="button", atau panggil event.preventDefault() di listener submit kalau kamu menangani form dengan JavaScript.

Cara membuat tombol di HTML

Tombol adalah elemen <button>. Konten di antara tag-nya adalah yang dilihat pengguna, dan type="button" menyatakan bahwa tombol ini menjalankan script-mu, bukan mengirim form. Klik tombolnya di pratinjau:

<!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>

Hanya itu yang dibutuhkan tombol yang berfungsi: label, type, dan sesuatu yang mendengarkan click. Browser membuatnya bisa difokus dengan keyboard dan mengaktifkannya dengan Enter atau Space, jadi pengguna keyboard mendapatkannya secara gratis. <div> dengan handler klik tidak mendapat semua itu.

Kamu mungkin juga melihat onclick="..." ditulis langsung di tag. Cara itu berhasil, tapi addEventListener menjauhkan script dari markup dan membuat beberapa listener bisa berbagi satu tombol.

Tiga type tombol

Atribut type menentukan apa yang dilakukan tombol saat ditekan.

`type`	Fungsinya	Dipakai untuk
`submit`	Mengirim form tempat tombol itu berada. Ini nilai default-nya.	Aksi utama sebuah form
`button`	Tidak melakukan apa pun dengan sendirinya; JavaScript-mu yang menentukan	Toggle, dialog, penghitung, apa pun yang memakai script
`reset`	Mengembalikan setiap field form ke nilai awalnya	Jarang; pengguna sering tidak sengaja menekannya

Ketik sesuatu, lalu coba setiap tombol. Pratinjau tidak meninggalkan halaman saat form dikirim; pratinjau menampilkan data yang akan dikirim form.

<!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 mengembalikan nilai yang ditulis di HTML (Ada), bukan field kosong. Dan kalau kamu menghapus type="button" dari Uppercase, tombol itu menjadi tombol submit: ia mengubah nama menjadi huruf kapital lalu mengirim form.

Tombol submit HTML: mengirim name dan value

Tombol submit bisa membawa name dan value sendiri. Keduanya hanya dikirim bersama form saat tombol itulah yang mengirim form, jadi dua tombol bisa berbagi satu form dan memberi tahu server aksi mana yang dipilih:

<!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>

Tekan Publish dan form mengirim title=My first post dan action=publish. Kosongkan judulnya lalu tekan salah satu tombol: required menghentikan pengiriman dan browser menampilkan pesannya sendiri. Menekan Enter di dalam field teks juga mengirim form, dan browser menganggapnya sebagai tekanan pada tombol submit pertama, jadi yang dikirim adalah action=draft.

Tombol submit juga menerima atribut yang menimpa pengaturan form khusus untuk tombol itu: formaction (URL yang berbeda), formmethod, formtarget, dan formnovalidate, yang melewati validasi. formnovalidate adalah pilihan yang biasa untuk tombol "Save draft" yang harus tetap berfungsi saat field wajib masih kosong.

Tombol yang ditaruh di luar form-nya tetap bisa mengirim form itu dengan atribut form, yang menerima id form: <button type="submit" form="signup">Sign up</button>.

Tombol disabled

Atribut disabled mematikan tombol. Tombol disabled mengabaikan klik, dilewati oleh Tab, dan tidak dikirim bersama form. Browser juga membuatnya berwarna abu-abu. Pola yang umum adalah membiarkan tombol submit disabled sampai sebuah syarat terpenuhi:

<!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>

Di JavaScript, button.disabled adalah property boolean: atur menjadi true atau false. Di HTML, yang dihitung adalah keberadaan atributnya, jadi disabled="false" tetap menonaktifkan tombol.

Tombol disabled tidak memberi alasan kenapa ia nonaktif, dan pengguna keyboard serta screen reader yang bergerak dengan Tab tidak pernah mendarat di sana. Kalau alasannya tidak jelas, tuliskan di teks di samping tombol, atau biarkan tombol tetap aktif dan tampilkan pesan error saat ditekan.

Memberi gaya tombol dengan CSS

Browser menggambar tombol dengan font, border dan background-nya sendiri. Mengatur beberapa property sudah cukup untuk menggantikan semuanya. Pertahankan gaya fokus yang terlihat: dari situlah pengguna keyboard tahu di mana posisi mereka.

<!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>

Fungsi setiap aturan:

font: inherit membuat tombol memakai font halaman. Tanpa itu, tombol memakai font form bawaan browser yang lebih kecil (13.33px di Chrome dan Firefox).
cursor: pointer menampilkan kursor tangan. Secara default, tombol menampilkan kursor panah biasa.
:hover, :active dan :focus-visible memberi gaya untuk keadaan kursor di atas, ditekan, dan fokus keyboard. :focus-visible menampilkan cincin untuk fokus keyboard tapi tidak setelah klik mouse, jadi kamu tidak perlu menghapus outline untuk menghindarinya.
:disabled menargetkan tombol yang punya atribut disabled.

Tekan Tab di pratinjau untuk melihat cincin fokus kuning berpindah di antara dua tombol pertama. Tombol disabled dilewati. (Di Mac, Safari dan Firefox hanya berpindah ke tombol dengan Tab kalau navigasi keyboard diaktifkan di pengaturan sistem; di Safari, Option+Tab berfungsi tanpa pengaturan itu.) Untuk daftar lengkap keadaan tombol, lihat CSS hover.

Tombol dengan ikon

Karena <button> bisa berisi HTML, ikon ditaruh di dalamnya di samping teks. Tombol yang hanya berisi ikon tidak punya teks untuk diumumkan screen reader, jadi beri aria-label:

<!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>

aria-hidden="true" di SVG mengeluarkannya dari pohon aksesibilitas, jadi tombol pertama diumumkan sebagai "Add item, button" dan yang kedua sebagai "Delete, button".

button vs input type="submit"

<input type="submit"> adalah cara lama menulis tombol submit. Keduanya mengirim form dengan cara yang sama; perbedaannya ada pada apa yang bisa mereka tampung.

<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">`
Label	Konten di antara tag	Atribut `value`
Bisa berisi ikon atau markup	Ya	Tidak
Tag penutup	Wajib	Tidak ada (elemen void)
Type default	`submit`	Selalu submit

Pakai <button>. Satu-satunya alasan mempertahankan <input type="submit"> adalah CSS atau JavaScript yang sudah ada dan memilih elemen itu. Ada juga <input type="button"> dan <input type="reset">, ide yang sama untuk dua type lainnya.

Tombol atau link?

Tombol melakukan sesuatu di halaman yang sedang dibuka: mengirim, membuka, mengganti keadaan, menghapus. Link menuju URL lain. Kalau mengkliknya mengubah address bar, elemen itu harus berupa <a href>, yang diberi gaya seperti tombol kalau desainnya meminta. Pola itu, dan kenapa tombol di dalam link tidak valid, dibahas di [button link HTML](/docs/html/button-link).

Aksesibilitas

Pakai <button> sungguhan. Elemen ini bisa difokus, berfungsi dengan Enter dan Space, dan diumumkan sebagai tombol. Membangun ulang semua itu di <div> membutuhkan role, tabindex dan handler tombol keyboard, dan biasanya tetap tidak lengkap.
Setiap tombol butuh nama: teksnya, atau aria-label kalau tombolnya hanya berisi ikon.
Pertahankan gaya fokus yang terlihat. outline: none tanpa pengganti membuat pengguna keyboard tersesat.
Buat area tombol cukup besar untuk diklik. WCAG 2.2 meminta minimal 24 kali 24 piksel CSS; padding seperti contoh bergaya di atas memberi tinggi sekitar 40 piksel.
Untuk toggle, tambahkan aria-pressed="true" atau "false" dan perbarui saat keadaannya berubah.

Kesalahan umum

Tombol di dalam form tanpa type. Tombol itu mengirim form. Tulis type="button" di setiap tombol yang tidak dimaksudkan untuk mengirim form.
Membungkus tombol dengan link, <a href="/x"><button>Go</button></a>. Ini HTML yang tidak valid dan perilakunya berbeda di tiap browser. Pakai satu elemen: link yang diberi gaya seperti tombol.
Memakai <div onclick> sebagai tombol. Elemen itu tidak bisa dicapai dengan keyboard.
Menghapus outline fokus tanpa menambahkan gaya :focus-visible.
Menulis disabled="false" dan berharap tombolnya aktif. Hapus atributnya.
Lupa menulis font: inherit lalu bingung kenapa tombol memakai font yang berbeda dari bagian lain halaman.

Pertanyaan yang sering diajukan

Bagaimana cara membuat tombol di HTML?

Tulis <button type="button">Click me</button>. Teks di antara tag-nya adalah labelnya. Tambahkan listener click di JavaScript supaya tombol melakukan sesuatu, atau taruh di dalam <form> dengan type="submit" untuk mengirim form.

Apa type default dari tombol HTML?

submit. <button> tanpa atribut type di dalam form akan mengirim form itu saat diklik, itulah kenapa tombol biasa di dalam form bisa memuat ulang halaman. Tulis type="button" untuk setiap tombol yang menjalankan JavaScript.

Apa perbedaan button dan input type=submit?

Keduanya mengirim form. <button> bisa berisi HTML (ikon, teks tebal) di antara tag-nya, sedangkan <input type="submit"> mengambil labelnya dari atribut value dan hanya bisa berisi teks biasa. Kebanyakan kode modern memakai <button>.

Bagaimana cara menonaktifkan tombol di HTML?

Tambahkan atribut disabled: <button disabled>Save</button>. Tombol disabled tidak bisa diklik atau difokus, dan name serta value-nya tidak dikirim bersama form. Hapus atributnya (btn.disabled = false di JavaScript) untuk mengaktifkannya lagi.

Bagaimana cara membuat tombol HTML yang menuju halaman lain?

Pakai link yang diberi gaya seperti tombol: <a href="/pricing" class="btn">See pricing</a>. <button> dipakai untuk aksi di halaman yang sedang dibuka. Membungkus tombol dengan <a> adalah HTML yang tidak valid.

Kenapa tombolku memuat ulang halaman?

Tombol itu ada di dalam <form> dan tidak punya type, jadi ia adalah tombol submit dan browser mengirim form lalu memuat responsnya. Tambahkan type="button", atau panggil event.preventDefault() di listener submit kalau kamu menangani form dengan JavaScript.

Konsep terkait

Button HTML: Type, Submit, Status Disabled dan Styling