Kalau kamu lagi belajar HTML dan pengen bikin formulir buat website, artikel ini cocok banget buat kamu! Formulir HTML (HTML Forms) itu penting banget buat ngumpulin data dari user, kayak nama, email, pilihan, dan lainnya. Nah, yuk kita bahas satu per satu elemen penting di dalamnya!
1. Elemen <form>
Elemen <form> adalah wadah utama dari semua input yang bakal dikirim ke server. Biasanya, <form> punya atribut action (buat nentuin tujuan data dikirim) dan method (buat nentuin cara pengiriman data, bisa GET atau POST).
Contoh penggunaan:
<form action="proses.php" method="POST">
<!-- Elemen input nanti di sini -->
</form>2. Elemen <input>
Elemen <input> adalah elemen utama buat input data di form. Bentuknya bisa macem-macem, tergantung dari atribut type yang dipakai.
Contoh umum:
<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email">3. Text Fields
Text field dipakai buat input teks biasa, misalnya buat nama atau komentar. Biasanya pakai:
<form>
<input type="text" name="nama" placeholder="Masukkan nama kamu">
</form>Hasilnya:
Atribut placeholder di atas bikin tampilan lebih user-friendly!
4. Elemen <label>
Elemen <label> bikin form lebih mudah diisi karena bisa dikaitkan sama elemen input.
Contoh:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>Hasilnya:
Pakai for di <label> buat ngehubungin ke input yang punya id sama.
5. Radio Buttons
Radio button dipakai buat milih satu opsi dari beberapa pilihan. Biasanya buat pertanyaan dengan jawaban tunggal.
Contoh:
<form>
<label><input type="radio" name="gender" value="pria"> Pria</label>
<label><input type="radio" name="gender" value="wanita"> Wanita</label>
<form>Hasilnya:
Karena name-nya sama, user cuma bisa pilih satu opsi aja.
6. Checkboxes
Checkbox dipakai buat milih lebih dari satu opsi.
Contoh:
<form>
<label><input type="checkbox" name="hobi" value="musik"> Musik</label>
<label><input type="checkbox" name="hobi" value="olahraga"> Olahraga</label>
<label><input type="checkbox" name="hobi" value="game"> Game</label>
</form>Hasilnya:
User bisa pilih lebih dari satu karena name-nya sama tapi tipe input-nya checkbox.
7. Tombol Submit
Buat ngirim data ke server, kita butuh tombol submit.
Contoh:
<input type="submit" value="Kirim">Hasilnya:
Atau bisa pakai tombol lebih keren:
<button type="submit">Kirim Form</button>Hasilnya:
8. Atribut name untuk <input>
Atribut name itu wajib ada di setiap elemen <input>, karena ini yang dikirim ke server pas form di-submit.
Contoh form lengkap:
<form action="proses.php" method="POST">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label>Gender:</label>
<label><input type="radio" name="gender" value="pria"> Pria</label>
<label><input type="radio" name="gender" value="wanita"> Wanita</label>
<label>Hobi:</label>
<label><input type="checkbox" name="hobi" value="musik"> Musik</label>
<label><input type="checkbox" name="hobi" value="olahraga"> Olahraga</label>
<label><input type="checkbox" name="hobi" value="game"> Game</label>
<button type="submit">Kirim</button>
</form>Hasilnya:
Kesimpulan
Form HTML itu penting buat interaksi user di website. Dengan memahami elemen-elemen kayak <form>, <input>, <label>, radio button, checkbox, dan tombol submit, kamu bisa bikin formulir keren dan fungsional.
Jadi, sekarang kamu udah siap bikin form sendiri di website kamu. Selamat ngoding!
Komentar