Membuat Formulir Interaktif dengan HTML
Formulir merupakan elemen penting pada website untuk mengumpulkan data dari pengguna. Berikut adalah langkah-langkah membuat formulir interaktif:
1. Struktur Dasar Formulir HTML
Gunakan elemen <form> sebagai pembungkus utama formulir. Contoh dasar:
<form action="submit_form.php" method="post">
<!-- Elemen formulir akan ditambahkan di sini --></form>
action: URL tempat data dikirimkan.method: Metode pengiriman data, bisa get atau post.
2. Menambahkan Input Dasar
Input adalah elemen utama untuk menerima data dari pengguna.
<form action="submit_form.php" method="post">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" placeholder="Masukkan Nama" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Masukkan email Anda" required></form>
type="text": Input teks umum.type="email": Validasi otomatis untuk format email.required: Membuat input wajib diisi.
3. Menambahkan Radio Button dan Checkbox
Gunakan radio button untuk memilih satu opsi, dan checkbox untuk memilih beberapa opsi.
<label>Jenis Kelamin:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Laki-laki</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Perempuan</label><br><br>
<label>Hobi:</label><br>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Membaca</label><br>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">Olahraga</label><br>
4. Menambahkan Dropdown (Select)
Dropdown memungkinkan pengguna memilih satu opsi dari daftar.
<label for="country">Pilih Negara:</label>
<select id="country" name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="singapore">Singapura</option>
</select>
5. Menambahkan Textarea
Textarea digunakan untuk input teks panjang, seperti pesan atau komentar.
<label for="message">Pesan:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Tulis pesan Anda di sini"></textarea>
6. Menambahkan Tombol Submit dan Reset
Tombol submit digunakan untuk mengirimkan formulir, sedangkan reset untuk menghapus semua input.
<button type="submit">Kirim</button>
<button type="reset">Reset</button>
7. Contoh Formulir Lengkap
Berikut adalah formulir lengkap dengan semua elemen di atas:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Interaktif</title>
</head>
<body>
<h1>Formulir Pendaftaran</h1>
<form action="submit_form.php" method="post">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" placeholder="Masukkan nama Anda" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Masukkan email Anda" required><br><br>
<label>Jenis Kelamin:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Laki-laki</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Perempuan</label><br><br>
<label>Hobi:</label><br>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Membaca</label><br>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">Olahraga</label><br><br>
<label for="country">Pilih Negara:</label>
<select id="country" name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="singapore">Singapura</option>
</select><br><br>
<label for="message">Pesan:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Tulis pesan Anda di sini"></textarea><br><br>
<button type="submit">Kirim</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
