Button

Form yang telah kita bangun berisi kontrol untuk mengisi data, tetapi belum memiliki pemicu untuk mengirimkannya. Tombol adalah elemen yang mengubah isian form menjadi aksi: mengirim data ke server, mengosongkan isian, atau memicu perilaku khusus. HTML menyediakan elemen button dengan tiga tipe perilaku yang bisa kita pilih lewat atribut type. Pada Chapter ini kita membahas ketiga tipe tersebut, perbandingan dengan input, penempatan di dalam maupun di luar form, dan aksesibilitas teks tombol.

Tiga Tipe Tombol #

Atribut type pada button menerima tiga nilai, dan bila atribut ini tidak dituliskan, browser memakai nilai default submit. Tombol di dalam form langsung mengirim data meskipun kita tidak bermaksud begitu, sehingga tuliskan type secara eksplisit agar maksud setiap tombol terbaca dari markup. Tabel berikut merangkum ketiganya:

Button versus Input #

Sebelum elemen button diperkenalkan, tombol dibuat dengan <input type="submit">, <input type="reset">, dan <input type="button">. Ketiganya masih valid, tetapi elemen button lebih fleksibel karena kontennya berupa markup, bukan sekadar teks pada atribut value. Di dalam button kita dapat menulis teks berformat seperti strong atau em, bahkan img dan svg untuk tombol bergambar. Perbandingan keduanya:

Untuk dokumen baru, pilihlah button karena lebih mudah diberi gaya dan maknanya lebih jelas. input bertipe tombol masih bermanfaat untuk teks polos, dan pola itulah yang dipakai chapter-chapter sebelumnya.

Tombol di Dalam dan di Luar Form #

Ketika button type="submit" ditulis di dalam form, tombol otomatis terasosiasi dengan form terdekat yang membungkusnya; menekannya mengirim form itu. Tombol di luar form tidak memiliki asosiasi apa pun, sehingga tombol submit di luar form tidak melakukan apa pun saat ditekan. Untuk mengaitkannya, beri id pada form, lalu tulis atribut form pada tombol dengan nilai id tersebut. Cara ini berguna saat tombol harus diletakkan jauh dari formnya.

Tombol submit juga dapat membawa atribut formaction untuk mengganti tujuan pengiriman khusus tombol itu saja; detailnya menunggu Chapter Form Action dan Method.

Teks Tombol yang Bermakna #

Isi button sekaligus menjadi labelnya: teks itulah yang dibacakan screen reader dan yang tampil bagi pengunjung. Gunakan kata kerja yang menyatakan aksi secara spesifik, misalnya “Kirim Pendaftaran” alih-alih “Klik di sini”. Tombol yang hanya berisi gambar tidak memiliki nama bagi screen reader; bila desain menuntut tombol ikon, sediakan teks alternatif seperti atribut aria-label, yang dibahas pada section Accessibility. Prinsip yang sama berlaku untuk input type="submit", yang labelnya berasal dari atribut value.

Contoh Tiga Tipe Tombol #

File berikut memuat satu form pendaftaran dengan ketiga tipe tombol sekaligus; atribut action dan method kita pakai apa adanya karena pembahasannya menunggu Chapter Form Action dan Method. Simpan sebagai contoh-button.html lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Tiga Tipe Button</title>
</head>
<body>
  <h1>Pendaftaran Kelas Menggambar</h1>
  <form action="www.example.com/daftar-kelas" method="post">
    <p>
      <label for="nama">Nama peserta</label><br>
      <input type="text" id="nama" name="nama">
    </p>
    <p>
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </p>
    <p>
      <button type="submit">Kirim Pendaftaran</button>
      <button type="reset">Bersihkan Isian</button>
      <button type="button">Lihat Ketentuan</button>
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Dua kotak isian: Nama peserta dan Email
  - Tiga tombol berjajar: "Kirim Pendaftaran", "Bersihkan Isian",
    dan "Lihat Ketentuan"
  - Tombol pertama mengirim form, tombol kedua mengosongkan kotak isian,
    dan tombol ketiga belum berbuat apa-apa tanpa JavaScript

Mari kita telaah peran setiap baris pentingnya:

1. Baris 10 (<form ...>): form pendaftaran yang membungkus dua kontrol dan tiga tombol; ketiga tombol otomatis terasosiasi dengan form ini.
2. Baris 12-17 (dua pasang label dan input): kontrol teks dan email, pola yang telah kita pakai pada chapter sebelumnya.
3. Baris 20 (button type="submit"): tipe default; mengirim data form ketika ditekan.
4. Baris 21 (button type="reset"): mengembalikan kedua kotak isian ke nilai awal, yaitu kosong.
5. Baris 22 (button type="button"): tanpa perilaku bawaan; tombol ini baru bekerja bersama JavaScript pada section HTML dan JavaScript.

Tombol kini mampu memicu pengiriman, tetapi form panjang membutuhkan keteraturan. Chapter berikutnya membahas fieldset dan legend, dua elemen yang mengelompokkan kontrol terkait menjadi grup bernama.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen button
• WHATWG — HTML Living Standard: Forms
• web.dev — Learn Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Tiga Tipe Button</title>
</head>
<body>
  <h1>Pendaftaran Kelas Menggambar</h1>
  <form action="www.example.com/daftar-kelas" method="post">
    <p>
      <label for="nama">Nama peserta</label><br>
      <input type="text" id="nama" name="nama">
    </p>
    <p>
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </p>
    <p>
      <button type="submit">Kirim Pendaftaran</button>
      <button type="reset">Bersihkan Isian</button>
      <button type="button">Lihat Ketentuan</button>
    </p>
  </form>
</body>
</html>