Setelah kita belajar berbagai jenis input (teks, radio, checkbox, dropdown), sekarang saatnya belajar tombol! Tombol adalah elemen yang memicu aksi — mengirim form, mereset form, atau menjalankan fungsi JavaScript. Tanpa tombol, form tidak akan berguna!
Jenis-jenis Tombol di HTML
| Jenis Tombol | Kode | Fungsi Utama |
|---|---|---|
| Submit | <input type="submit"><button type="submit"> |
Mengirim data form ke server |
| Reset | <input type="reset"><button type="reset"> |
Menghapus semua input form (kembali ke default) |
| Button Biasa | <input type="button"><button type="button"> |
Menjalankan JavaScript (tidak submit form) |
Perbedaan Penting:
<button>lebih fleksibel — bisa berisi teks, gambar, atau icon di dalamnya.<input>hanya bisa berisi teks biasa (atributvalue).- Di dalam
<form>, tombol dengantype="submit"akan mengirim form. - Tombol dengan
type="button"TIDAK akan mengirim form (hanya untuk JavaScript).
1. Tombol Submit (type="submit")
Tombol submit adalah tombol paling penting dalam form. Saat diklik, browser akan mengirim semua data ke URL yang ditentukan di atribut action form.
Contoh dengan <input>:
<form action="proses.php" method="POST">
<input type="text" name="nama" placeholder="Nama Anda">
<input type="submit" value="Kirim Data">
</form>
Contoh dengan <button> (lebih fleksibel):
<form action="proses.php" method="POST">
<input type="text" name="nama" placeholder="Nama Anda">
<button type="submit">
Kirim Data
</button>
</form>
Contoh langsung:
Klik tombol submit — akan muncul alert (contoh, tidak benar-benar mengirim)
2. Tombol Reset (type="reset")
Tombol reset berguna untuk menghapus semua input dalam form dan mengembalikannya ke nilai default. Hati-hati — tombol ini bisa membuat pengguna frustrasi jika terklik tidak sengaja!
<form>
<input type="text" name="nama" placeholder="Nama Anda">
<input type="email" name="email" placeholder="Email">
<button type="reset">Hapus Semua</button>
<button type="submit">Kirim</button>
</form>
Contoh langsung (coba isi dulu, lalu klik reset):
Isi kedua field, lalu klik "Reset Form" — semua akan kosong!
Peringatan Reset Button: Tombol reset bisa membuat frustrasi pengguna jika terklik tidak sengaja setelah mengisi form panjang. Pertimbangkan untuk tidak menggunakan reset button di form produksi, atau beri konfirmasi dengan JavaScript.
3. Tombol Biasa (type="button")
Tombol biasa tidak melakukan apa pun secara default. Biasanya digunakan untuk menjalankan fungsi JavaScript (menampilkan alert, memproses data, dll).
<button type="button" onclick="alert('Halo! Kamu mengklik tombol!')">
Klik Aku!
</button>
Contoh langsung:
Klik tombol — akan muncul alert, tapi tidak mengirim form
Tombol dengan icon dan teks:
<button type="button" onclick="alert('Tombol dengan icon!')" style="display: flex; align-items: center; gap: 8px;">
<span></span>
Tombol Keren
</button>
4. Tombol dengan Gambar (<input type="image">)
Tombol submit bisa diganti dengan gambar menggunakan type="image". Berguna untuk tombol custom yang lebih menarik.
<input type="image" src="tombol-kirim.png" alt="Kirim" width="150">
Contoh (placeholder gambar):
Tombol submit dalam bentuk gambar (contoh)
Studi Kasus: Form Pendaftaran dengan Berbagai Tombol
Berikut form lengkap yang menggabungkan submit, reset, dan button biasa:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Form Pendaftaran - Event Tech Conference</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 20px;
}
.register-card {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px 30px;
text-align: center;
}
.header h1 {
font-size: 28px;
margin-bottom: 5px;
}
.header p {
opacity: 0.9;
}
form {
padding: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
input, select {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 14px;
transition: border 0.3s;
}
input:focus, select:focus {
outline: none;
border-color: #667eea;
}
.radio-group {
display: flex;
gap: 20px;
margin-top: 8px;
}
.radio-group label {
display: flex;
align-items: center;
gap: 8px;
font-weight: normal;
cursor: pointer;
}
.button-group {
display: flex;
gap: 15px;
margin-top: 25px;
flex-wrap: wrap;
}
.btn-submit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
flex: 1;
transition: transform 0.2s;
}
.btn-submit:hover {
transform: translateY(-2px);
}
.btn-reset {
background: #ef4444;
color: white;
border: none;
padding: 12px 24px;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
flex: 1;
transition: transform 0.2s;
}
.btn-reset:hover {
transform: translateY(-2px);
}
.btn-info {
background: #8b5cf6;
color: white;
border: none;
padding: 12px 24px;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
flex: 1;
transition: transform 0.2s;
}
.btn-info:hover {
transform: translateY(-2px);
}
.info-box {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
font-size: 13px;
border-left: 4px solid #667eea;
}
hr {
margin: 20px 0;
border: none;
border-top: 1px solid #eee;
}
</style>
</head>
<body>
<div class="register-card">
<div class="header">
<h1>Tech Conference 2024</h1>
<p>Daftar sekarang untuk event teknologi terbesar tahun ini!</p>
</div>
<form action="#" method="POST" id="registrationForm">
<div class="form-group">
<label>Nama Lengkap <span style="color: red;">*</span></label>
<input type="text" name="nama" placeholder="Masukkan nama lengkap" required>
</div>
<div class="form-group">
<label>Email <span style="color: red;">*</span></label>
<input type="email" name="email" placeholder="contoh@email.com" required>
</div>
<div class="form-group">
<label>Nomor Telepon</label>
<input type="tel" name="telepon" placeholder="08xx-xxxx-xxxx">
</div>
<div class="form-group">
<label>Tipe Tiket <span style="color: red;">*</span></label>
<div class="radio-group">
<label>
<input type="radio" name="tiket" value="earlybird" checked> Early Bird (Rp 150k)
</label>
<label>
<input type="radio" name="tiket" value="regular"> Regular (Rp 250k)
</label>
<label>
<input type="radio" name="tiket" value="vip"> VIP (Rp 500k)
</label>
</div>
</div>
<div class="button-group">
<button type="submit" class="btn-submit">
Daftar Sekarang
</button>
<button type="reset" class="btn-reset">
Reset Form
</button>
<button type="button" class="btn-info" onclick="infoTiket()">
Info Tiket
</button>
</div>
<div class="info-box" id="infoMessage">
Informasi Tombol:
<ul style="margin-top: 8px; margin-left: 20px;">
<li><strong>Daftar Sekarang</strong> → Tombol SUBMIT (mengirim data form)</li>
<li><strong>Reset Form</strong> → Tombol RESET (menghapus semua input)</li>
<li><strong>Info Tiket</strong> → Tombol BUTTON (menjalankan JavaScript)</li>
</ul>
</div>
</form>
</div>
<script>
function infoTiket() {
alert('INFO TIKET:\n\nEarly Bird: Rp 150.000 (terbatas!)\nRegular: Rp 250.000\nVIP: Rp 500.000 (termasuk goodie bag eksklusif)');
}
// Menampilkan alert saat form disubmit (hanya contoh)
document.getElementById('registrationForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Pendaftaran berhasil! (Contoh - data tidak benar-benar dikirim ke server)\nTerima kasih telah mendaftar!');
});
// Menampilkan alert saat reset
document.getElementById('registrationForm').addEventListener('reset', function() {
alert('Form telah direset! Semua data dihapus.');
});
</script>
</body>
</html>
Tabel Perbandingan <button> vs <input>
| Aspek | <button> |
<input> |
|---|---|---|
| Isi / Konten | Bisa HTML (teks, gambar, icon, emoji) | Hanya teks biasa (via atribut value) |
| Fleksibilitas | Lebih fleksibel | Terbatas |
| Default type | submit (di dalam form) |
text (untuk input biasa) |
| Kapan pakai? | Rekomendasi utama untuk tombol modern | Untuk tombol sederhana atau kompatibilitas lama |
Rekomendasi Modern:
Gunakan
<button> untuk semua tombol! Lebih fleksibel, bisa diisi icon/emoji, dan lebih mudah di-style dengan CSS. Hanya gunakan <input> untuk tombol jika kamu butuh kompatibilitas dengan browser sangat lama.
Tombol dengan JavaScript (Contoh Interaktif)
Tombol biasa (type="button") sangat berguna untuk berbagai interaksi:
Demo Tombol Interaktif
0
Contoh tombol dengan JavaScript (tanpa submit form)
Studi Kasus: Form dengan Konfirmasi Sebelum Submit
Berikut contoh tombol submit yang memunculkan konfirmasi sebelum mengirim data:
<form id="confirmForm" action="#" method="POST">
<input type="text" name="nama" placeholder="Nama Anda" required>
<button type="submit">Kirim</button>
</form>
<script>
document.getElementById('confirmForm').addEventListener('submit', function(e) {
if (!confirm('Apakah Anda yakin ingin mengirim data ini?')) {
e.preventDefault(); // Batalkan submit
}
});
</script>
Klik submit — akan muncul konfirmasi "Apakah Anda yakin?"
Kesalahan Umum Pemula
- Lupa menentukan
typepada<button>→ Defaultnyasubmitdi dalam form! Bisa menyebabkan form ter-submit tidak sengaja. - Tombol reset tanpa konfirmasi → Pengguna bisa kehilangan data yang sudah diisi panjang.
- Tombol biasa (
type="button") tidak menjalankan fungsi → Harus ditambahkanonclickatau event listener. - Form submit tanpa validasi → Data kosong atau tidak valid bisa terkirim. Gunakan atribut
requiredatau JavaScript. - Tombol submit di luar form → Tombol submit tidak akan berfungsi jika di luar tag
<form>.
Peringatan:
- Jangan letakkan
<button type="submit">di luar tag form — tidak akan mengirim data. - Jangan letakkan
<button type="reset">di form penting tanpa konfirmasi — data bisa hilang! - Di dalam form, semua tombol tanpa
typeakan dianggapsubmit— bisa menyebabkan perilaku tidak terduga.
Latihan Singkat
- Buat file HTML baru dengan judul "Form Kontak Sederhana"
- Buat form dengan field: Nama, Email, Pesan
- Buat tiga tombol:
- Tombol Submit dengan teks "Kirim Pesan" (warna hijau)
- Tombol Reset dengan teks "Hapus Form" (warna merah)
- Tombol Info dengan teks "Petunjuk" (warna biru) yang menampilkan alert "Isi semua field dengan benar!"
- Gunakan
<button>untuk semua tombol (bukan<input>) - Simpan dan buka di browser, coba fungsi setiap tombol
Intisari Hari Ini
- Tombol Submit (
type="submit") → mengirim data form ke server - Tombol Reset (
type="reset") → menghapus semua input form (gunakan dengan hati-hati!) - Tombol Biasa (
type="button") → untuk menjalankan JavaScript, tidak submit form - Rekomendasi: Gunakan
<button>(bukan<input>) untuk tombol modern - Tombol bisa diisi teks, emoji, icon, atau gambar
- Selalu tentukan
typetombol dengan jelas untuk menghindari perilaku tidak terduga
Tantangan Akhir Pekan: Buat sebuah Form Pemesanan Makanan Online yang interaktif! Form harus memiliki:
- Field input: Nama pemesan, alamat, nomor telepon (type="text", "tel")
- Radio button untuk pilihan metode pembayaran (Transfer Bank, COD, E-Wallet)
- Checkbox untuk pilihan menu (minimal 5 menu makanan)
- Select dropdown untuk pilihan jumlah porsi
- Tombol Submit dengan konfirmasi JavaScript ("Apakah data sudah benar?")
- Tombol Reset dengan konfirmasi ("Yakin ingin menghapus semua data?")
- Tombol Hitung Total (type="button") yang menghitung total harga berdasarkan menu yang dipilih dan menampilkannya di alert atau di halaman
- Gunakan CSS yang menarik (warna, border-radius, efek hover)
Artikel Sebelumnya: HTML Dasar #13 - Radio Button, Checkbox, dan Select Dropdown
Artikel Selanjutnya: HTML Dasar #15 - Atribut Penting: placeholder, required, readonly, disabled