Bikin Formulir Interaktif Pakai Input, Checkbox, dan Radio? Gampang Banget, Yuk Ikuti!
Halo, teman-teman pembelajar kode! Apa kabar? Pernah nggak sih kepikiran, gimana ya caranya bikin formulir di website itu kok bisa macem-macem? Ada yang buat isi nama, email, terus ada pilihan buat centang hobi, atau bahkan pilihan gender yang cuma bisa dipilih satu aja? Nah, itu semua pakai trik dasar yang gampang banget, lho!
Anggap aja formulir itu kayak kertas isian yang biasa kita temuin di bank atau pas daftar sesuatu. Tapi bedanya, ini versi digitalnya. Dan yang bikin seru, kita bisa bikin dia "interaktif" banget! Nah, di artikel ini, kita bakal kupas tuntas gimana caranya bikin formulir yang ada kotak isian teks (input), pilihan banyak (checkbox), dan pilihan tunggal (radio button). Dijamin, setelah ini kamu nggak akan bingung lagi dan langsung bisa bikin formulir keren sendiri. Siap? Yuk, kita mulai petualangan ngoding kita!
Persiapan Dulu Yuk!
Sebelum kita loncat ke kode-kodenya, kita butuh kanvas nih buat nulis. Buka teks editor favoritmu (VS Code, Sublime Text, atau Notepad++ juga boleh) dan buat file baru dengan nama formulir.html. Setelah itu, isi dengan struktur HTML dasar ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Interaktif Keren!</title>
</head>
<body>
<h1>Ayo Isi Formulir Ini!</h1>
<!-- Di sinilah nanti semua kode formulir kita akan ditulis -->
</body>
</html>Nah, semua kode formulir kita nanti akan kita tulis di dalam tag <body>, tepat di bawah judul <h1> itu ya. Gampang kan? Ini kayak kita lagi nyiapin meja kosong sebelum mulai masak.
Langkah 1: Fondasi Formulir Kita (<form>)
Setiap kali kita mau bikin formulir, kita harus punya "wadah" utamanya. Wadah ini namanya tag <form>. Ini penting banget karena semua input yang kita buat harus ada di dalamnya biar nanti bisa "dikirim" datanya. Ibarat rumah, ini adalah fondasinya.
<body>
<h1>Ayo Isi Formulir Ini!</h1>
<form action="/proses-data" method="POST">
<!-- Nanti semua elemen formulir kita ada di sini -->
</form>
</body>Penjelasan singkat:
action="/proses-data": Ini nunjukkin kemana data formulir kita akan dikirim saat tombol "Kirim" ditekan. Biasanya ini adalah alamat di server yang akan mengelola data. Untuk sekarang, jangan terlalu dipikirin dulu ya, ini urusan backend!method="POST": Ini cara data dikirim.POSTitu kayak kita ngasih surat tertutup, datanya nggak kelihatan di alamat web. Ada jugaGETyang datanya kelihatan di URL. Untuk formulir sensitif (password, dll), pakaiPOSTlebih aman.
Langkah 2: Mengenal Input Teks (Buat Nama, Email, Pesan, dll.)
Nah, ini nih elemen yang paling sering kita lihat: kotak isian kosong! Ini fungsinya buat kita nulisin informasi satu baris, misalnya nama, email, nomor telepon, atau alamat.
Kita pakai tag <input type="text"> untuk ini. Tapi, biar formulir kita cakep dan jelas, jangan lupa tambahin <label> ya. <label> ini kayak tulisan petunjuk di sebelah kotak isian.
Yuk, coba kita tambahin:
<form action="/proses-data" method="POST">
<label for="namaLengkap">Nama Lengkap:</label>
<input type="text" id="namaLengkap" name="nama" placeholder="Misal: Budi Santoso" required>
<br><br> <!-- Buat kasih jarak antar elemen -->
<label for="emailPengguna">Email:</label>
<input type="email" id="emailPengguna" name="email" placeholder="[email protected]" required>
<br><br>
</form>Poin Penting:
<label for="namaLengkap">: Atributfordilabelitu harus sama persis denganiddi<input>. Ini biar kalau kita klik tekslabel-nya, kursor langsung pindah ke kotak inputnya. Keren kan? Dan juga penting buat aksesibilitas!<input type="text">: Ini jenis inputnya, yaitu teks. Ada jugatype="email",type="password",type="number", dll.id="namaLengkap": Ini pengenal unik buat elemen itu di halaman kita. Setiapidharus beda-beda ya.name="nama": Ini penting banget!nameini adalah nama variabel yang akan dikirim ke server bareng datanya. Jadi, kalau kamu isi "Budi" diinputdenganname="nama", server akan menerimanama=Budi.placeholder="Misal: Budi Santoso": Teks tipis yang muncul di dalam kotak input sebelum kita ketik apa-apa. Ini cuma panduan aja, bukan nilai yang dikirim.required: Atribut ini bikin kolom input jadi wajib diisi. Kalau nggak diisi, formulir nggak bisa dikirim. Praktis banget!
Langkah 3: Pilihan Ganda Bebas (Checkbox)
Bayangin kamu lagi belanja di supermarket online, terus ada pilihan "Pilih metode pembayaran:" dan kamu bisa centang "Transfer Bank", "Kartu Kredit", atau "E-wallet". Nah, itu dia peran si checkbox! Kamu bisa pilih SATU, DUA, atau bahkan SEMUA pilihan yang ada. Bebas!
Mari kita tambahkan ke formulir kita:
<form action="/proses-data" method="POST">
<!-- ... (Input Teks yang tadi) ... -->
<p><b>Pilih Hobi Kamu (Boleh Lebih Dari Satu):</b></p>
<input type="checkbox" id="hobiBaca" name="hobi" value="membaca">
<label for="hobiBaca">Membaca Buku</label><br>
<input type="checkbox" id="hobiGame" name="hobi" value="gaming">
<label for="hobiGame">Bermain Game</label><br>
<input type="checkbox" id="hobiCoding" name="hobi" value="coding">
<label for="hobiCoding">Coding</label><br>
<br>
</form>Poin Penting:
<input type="checkbox">: Ini jenis inputnya.name="hobi": Nah, perhatikan ini! Untuk grupcheckboxyang terkait,name-nya harus sama. Ini biar server tahu kalau semua pilihan itu adalah bagian dari kategori "hobi". Kalau kamu centang "Membaca Buku" dan "Coding", server akan menerima data kurang lebih sepertihobi=membaca,coding.value="membaca": Ini nilai yang akan dikirim ke server kalaucheckboxini dicentang. Jadi, pastikanvalueini unik dan deskriptif ya untuk setiap pilihan.
Langkah 4: Pilihan Ganda Tunggal (Radio Button)
Berbeda dengan checkbox, kalau radio button ini kayak kita lagi milih satu menu di restoran. Kita cuma bisa pilih SATU dari sekian banyak pilihan yang disediain. Kalau kita pilih yang lain, pilihan sebelumnya otomatis hilang.
Seringnya ini dipakai buat pilihan kayak gender (pria/wanita), status pernikahan, atau rating bintang.
<form action="/proses-data" method="POST">
<!-- ... (Input Teks dan Checkbox yang tadi) ... -->
<p><b>Pilih Jenis Kelamin Kamu:</b></p>
<input type="radio" id="jkPria" name="jenis_kelamin" value="pria">
<label for="jkPria">Pria</label><br>
<input type="radio" id="jkWanita" name="jenis_kelamin" value="wanita">
<label for="jkWanita">Wanita</label><br>
<br>
</form>Poin Penting:
<input type="radio">: Ini jenis inputnya.name="jenis_kelamin": Sama seperticheckbox,nameuntuk grupradio buttonjuga HARUS SAMA. Ini kunci utamanya biar pilihan radio itu saling eksklusif (cuma bisa pilih satu). Kalauname-nya beda, ya bisa pilih semua dong nanti!value="pria": Sama dengancheckbox, ini nilai yang akan dikirim ke server kalau pilihan ini yang dicentang.
Langkah 5: Tombol Kirim Formulir (Submit Button)
Semua input sudah terisi, sekarang gimana cara ngirimnya? Butuh tombol dong! Tombol ini yang akan memicu formulir untuk mengirimkan data ke alamat action yang sudah kita tentukan di awal.
Ada dua cara umum: pakai <button type="submit"> atau <input type="submit">. Keduanya punya fungsi yang sama.
<form action="/proses-data" method="POST">
<!-- ... (Semua elemen formulir di atas) ... -->
<button type="submit">Kirim Data Formulir!</button>
<!-- Atau bisa juga pakai: <input type="submit" value="Kirim Data Formulir!"> -->
</form>Poin Penting:
type="submit": Ini yang bikin tombol ini punya fungsi untuk mengirimkan data formulir.Teks di dalam
<button>(atauvaluedi<input type="submit">) adalah tulisan yang muncul di tombolnya.
Gabungin Semuanya! (Contoh Lengkap)
Nah, biar makin jelas, ini dia semua kode HTML yang sudah kita rangkai dari awal sampai akhir. Tinggal copy-paste aja ke file formulir.html kamu!
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Interaktif Keren!</title>
<style>
/* Sedikit sentuhan CSS biar nggak polosan banget */
body {
font-family: sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
form {
background-color: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 500px;
margin: auto;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"] {
width: calc(100% - 20px); /* Lebar input */
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 8px;
vertical-align: middle;
}
button[type="submit"] {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
p {
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Ayo Isi Formulir Ini!</h1>
<form action="/proses-data" method="POST">
<label for="namaLengkap">Nama Lengkap:</label>
<input type="text" id="namaLengkap" name="nama" placeholder="Misal: Budi Santoso" required>
<label for="emailPengguna">Email:</label>
<input type="email" id="emailPengguna" name="email" placeholder="[email protected]" required>
<p><b>Pilih Hobi Kamu (Boleh Lebih Dari Satu):</b></p>
<input type="checkbox" id="hobiBaca" name="hobi" value="membaca">
<label for="hobiBaca">Membaca Buku</label><br>
<input type="checkbox" id="hobiGame" name="hobi" value="gaming">
<label for="hobiGame">Bermain Game</label><br>
<input type="checkbox" id="hobiCoding" name="hobi" value="coding">
<label for="hobiCoding">Coding</label><br>
<br>
<p><b>Pilih Jenis Kelamin Kamu:</b></p>
<input type="radio" id="jkPria" name="jenis_kelamin" value="pria">
<label for="jkPria">Pria</label><br>
<input type="radio" id="jkWanita" name="jenis_kelamin" value="wanita">
<label for="jkWanita">Wanita</label><br>
<br>
<button type="submit">Kirim Data Formulir!</button>
</form>
</body>
</html>Simpan file-nya, lalu buka di browser kamu (tinggal double-klik file formulir.html-nya). Viola! Kamu sudah punya formulir interaktif buatan sendiri. Keren banget kan?
Catatan Penting & Tips Tambahan
Aksesibilitas Itu Penting! Selalu pakai tag
<label>dan pastikanfordilabelcocok denganiddiinputterkait. Ini sangat membantu teman-teman yang menggunakan screen reader (alat bantu membaca layar) untuk memahami formulir kita. Jadi, jangan malas ya!Validasi di Browser: Atribut
required,type="email",type="number", dll. itu udah otomatis punya validasi dasar dari browser. Kalau ada inputrequiredyang kosong, browser akan kasih peringatan. Ini ngebantu banget biar data yang dikirim nggak ngawur-ngawur amat.Ini Baru Depan Layar: Ingat ya, formulir ini baru bagian "depan" atau tampilan (
frontend). Ketika kamu klik tombol "Kirim", data itu akan dikirim ke alamatactionyang kita tentukan. Tapi untuk bisa menyimpan, memproses, atau menampilkan data itu kembali, kita butuh "otak di balik layar" ataubackend(misal pakai PHP, Python, Node.js, dll.). Tapi tenang, langkah pertama ini udah hebat banget kok!Bikin Lebih Cantik dengan CSS: Kode CSS di atas itu cuma contoh sangat sederhana. Kamu bisa bereksperimen dengan CSS untuk membuat formulirmu jauh lebih indah, sesuai dengan desain yang kamu inginkan.
Penutup
Gimana? Lumayan seru kan bikin formulir sendiri? Sekarang kamu sudah tahu gimana caranya:
Bikin wadah formulir dengan
<form>.Nambahin kotak isian teks (
<input type="text",<input type="email">).Bikin pilihan ganda yang bisa dipilih banyak (
checkbox).Bikin pilihan ganda yang cuma bisa dipilih satu (
radio button).Dan tentu saja, tombol pengirimnya (
<button type="submit">).
Semoga tutorial ini gampang dipahami dan bisa jadi bekal kamu buat bikin website yang makin interaktif ya. Jangan takut buat coba-coba, utak-atik kodenya, dan kreasikan formulirmu sendiri! Kalau ada yang bingung, jangan sungkan untuk mencari tahu lagi atau latihan terus. Selamat ngoding, teman-teman!