adydetra_
11 Jul 2025

Formulir HTML

Di materi sebelumnya kita udah bahas tentang tabel HTML. Sekarang kita lanjut ke materi berikutnya, yaitu membuat Formulir HTML.

Formulir digunakan untuk mengambil data dari pengguna, seperti nama, email, pesan, atau informasi lainnya.

Berikut penjelasan dan contoh-contohnya.


Struktur Dasar Formulir HTML

Formulir dibuat dengan elemen <form>. Berikut contoh struktur sederhananya:

index.html
<!doctype html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body>
    <form action="/submit" method="POST">
      <!-- elemen formulir di sini -->
    </form>
  </body>
</html>
  • action: menentukan URL tujuan formulir dikirim.
  • method: menentukan cara pengiriman data (GET atau POST).

Elemen Input Teks

Elemen paling dasar dalam formulir adalah input teks, biasanya digunakan untuk nama atau email:

<form>
  Nama: <input type="text" name="nama" placeholder="Masukkan nama Anda">
  <br>
  Email: <input type="email" name="email" placeholder="Masukkan email Anda">
</form>

Elemen Textarea (Area Teks)

Untuk input teks yang lebih panjang seperti pesan atau komentar, gunakan elemen <textarea>:

<form>
  Pesan: <br>
  <textarea name="pesan" rows="4" cols="30" placeholder="Tulis pesan Anda"></textarea>
</form>

Elemen Pilihan (Checkbox dan Radio Button)

Untuk memberikan opsi pilihan kepada pengguna:

Checkbox (bisa memilih lebih dari satu):

<form>
  Pilih hobi: <br>
  <input type="checkbox" name="hobi" value="musik"> Musik<br>
  <input type="checkbox" name="hobi" value="olahraga"> Olahraga<br>
  <input type="checkbox" name="hobi" value="membaca"> Membaca<br>
</form>

Radio button (pilihan hanya satu):

<form>
  Jenis Kelamin: <br>
  <input type="radio" name="gender" value="pria"> Pria<br>
  <input type="radio" name="gender" value="wanita"> Wanita<br>
</form>

Elemen Select (Dropdown)

Gunakan <select> untuk memberikan opsi dalam bentuk dropdown:

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

Tombol Kirim dengan <button> atau <input>

Tombol untuk mengirim data formulir:

Dengan <button>:

<form action="/submit" method="POST">
  <button type="submit">Kirim Data</button>
</form>

Dengan <input>:

<form action="/submit" method="POST">
  <input type="submit" value="Kirim Data">
</form>

Perbedaan Metode GET dan POST

Saat formulir dikirim, ada dua metode utama:

  • GET: data formulir muncul di URL, cocok untuk pencarian atau data yang tidak sensitif.
<form action="/hasil-pencarian" method="GET">
  Cari: <input type="text" name="q">
  <button type="submit">Cari</button>
</form>
  • POST: data tidak muncul di URL, lebih aman untuk data sensitif seperti login atau registrasi.
<form action="/proses-login" method="POST">
  Username: <input type="text" name="username"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Login</button>
</form>

Menambahkan Label pada Input (<label>)

Supaya form lebih jelas dan aksesibel, gunakan elemen <label>:

<form>
  <label for="nama">Nama Lengkap:</label>
  <input type="text" id="nama" name="nama">
</form>

Label akan terhubung langsung ke elemen input melalui atribut id dan for.


Formulir dengan Fieldset dan Legend

Untuk form yang lebih rapi, gunakan elemen <fieldset> dan <legend>:

<form>
  <fieldset>
    <legend>Informasi Pribadi</legend>
    Nama: <input type="text" name="nama"><br>
    Email: <input type="email" name="email">
  </fieldset>
</form>

Kesimpulan

Formulir HTML memungkinkan kamu untuk mengambil data dari pengguna dan membuat halaman web lebih interaktif. Pilih metode pengiriman data sesuai kebutuhan dan pastikan struktur formulir kamu jelas dan rapi.

Di bagian berikutnya, kita akan bahas tentang Semantic HTML, yang akan bikin struktur halaman web kamu lebih bagus untuk SEO.