HTML Forms adalah komponen penting untuk mengumpulkan data dari pengguna dan mengirimkannya ke server.
Formulir digunakan dalam berbagai aplikasi web seperti login, pendaftaran, pencarian, dan interaksi lainnya.
Dengan struktur form yang tepat, pengembang dapat menangani input pengguna dengan aman dan efisien.
Struktur Dasar HTML Forms
Formulir HTML dimulai dengan tag <form>, yang membungkus elemen input, tombol, dan komponen lainnya untuk pengumpulan data.
<form action="proses.php" method="post">
<!-- Elemen form akan ditempatkan di sini -->
</form>
- action: menentukan halaman atau skrip yang akan menangani data form.
- method: menentukan metode pengiriman data, biasanya POST atau GET.
Elemen-Elemen Form
Input Teks
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
Input Email
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Input Password
<label for="password">Password:</label>
<input type="password" id="password" name="password">
Radio Button
<p>Jenis Kelamin:</p>
<input type="radio" id="pria" name="jenis_kelamin" value="pria">
<label for="pria">Pria</label>
<br>
<input type="radio" id="wanita" name="jenis_kelamin" value="wanita">
<label for="wanita">Wanita</label>
Checkbox
<p>Hobi:</p>
<input type="checkbox" id="membaca" name="hobi" value="membaca">
<label for="membaca">Membaca</label>
<br>
<input type="checkbox" id="olahraga" name="hobi" value="olahraga">
<label for="olahraga">Olahraga</label>
Dropdown (Select)
<label for="negara">Pilih Negara:</label>
<select id="negara" name="negara">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="singapura">Singapura</option>
</select>
Textarea
<label for="komentar">Komentar:</label>
<textarea id="komentar" name="komentar" rows="4" cols="50"></textarea>
Tombol Submit
<input type="submit" value="Kirim">
Atribut Penting pada Elemen Form
- required: memastikan input tidak kosong sebelum form dikirim.
- placeholder: teks sementara di input yang hilang saat mengetik.
- value: nilai default pada input.
- name: identitas unik untuk setiap input saat dikirim ke server.
Ringkasan
HTML Forms memungkinkan pengumpulan data dari pengguna dengan berbagai tipe input seperti teks, email, password, radio button, checkbox, dropdown, dan textarea. Penggunaan atribut seperti required, placeholder, value, dan name membantu memastikan data dikirim secara valid dan terstruktur.
Apa pendapatmu? Tulis di kolom komentar dengan sopan dan beretika. Jangan lupa bagikan agar semakin banyak yang tahu!
