Belajar HTML Dasar #8: Form

• 1. Struktur Dasar Tag <form>
• 2. Elemen Input yang Sering Dipakai
  • Text Input
  • Email Input
  • Password Input
  • Textarea
  • Radio Button
  • Checkbox
  • Select Dropdown
• 3. Tombol Submit
• Kesimpulan

Halo teman-teman semuanya, di artikel kali ini, kita akan bahas salah satu elemen paling penting dalam sebuah website: formulir atau biasa kita sebut form. Form digunakan untuk mengumpulkan data dari pengguna, seperti nama, email, komentar, dan sebagainya.

1. Struktur Dasar Tag <form>

Semua elemen input di dalam HTML harus berada di dalam tag <form> supaya bisa dikirimkan ke server atau diproses oleh JavaScript.

Contoh:

<form action="/proses" method="POST">
  <label>Nama:</label>
  <input type="text" name="nama">
  <button type="submit">Kirim</button>
</form>

Penjelasan:

• action - URL tujuan saat form dikirim
• method - cara pengiriman data (GET atau POST)

2. Elemen Input yang Sering Dipakai

• Text Input

  <input type="text" name="nama">
  

  Untuk input teks biasa, seperti nama, judul, dan lain-lain.

• Email Input

  <input type="email" name="email">
  

  Khusus untuk input email. Browser bisa melakukan validasi otomatis.

• Password Input

  <input type="password" name="password">
  

  Karakter yang diketik akan disembunyikan.

• Textarea

  <textarea name="pesan" rows="4" cols="40"></textarea>
  

  Untuk input teks yang lebih panjang, seperti pesan atau komentar.

• Radio Button

  <input type="radio" name="gender" value="laki-laki"> Laki-laki
  <input type="radio" name="gender" value="perempuan"> Perempuan
  

  Digunakan jika kita ingin pengguna memilih satu dari beberapa pilihan.

• Checkbox

  <input type="checkbox" name="hobi" value="membaca"> Membaca
  <input type="checkbox" name="hobi" value="ngoding"> Ngoding
  
  

  Digunakan jika pengguna boleh memilih lebih dari satu opsi.

• Select Dropdown

  <select name="kota">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="surabaya">Surabaya</option>
  </select>
  

3. Tombol Submit

Untuk mengirimkan form:

<button type="submit">Kirim</button>

Atau bisa juga pakai input:

<input type="submit" value="Kirim">

Kesimpulan

Dengan tag <form> dan berbagai elemen input, kita bisa membuat halaman yang interaktif dan bisa menerima data dari pengguna. Mulai dari input teks, email, radio, checkbox, hingga tombol kirim.

Di seri berikutnya, kita akan membahas struktur tabel dalam HTML, sangat berguna untuk menampilkan data secara teratur dan rapi.

Terima Kasih