form html [1]

Form HTML adalah elemen yang digunakan untuk mengumpulkan input dari pengguna dan mengirimkannya ke server untuk diproses. Elemen form (<form>) biasanya berisi berbagai jenis input, seperti teks, tombol, checkbox, radio button, dan lainnya. Berikut adalah penjelasan lebih rinci tentang form HTML:

Struktur Dasar Form HTML

<form action="url_tujuan" method="GET/POST">
  <!-- Elemen form lainnya -->
</form>

Atribut Penting pada <form>

1. action
   Menentukan URL atau endpoint tempat data form akan dikirim.

   <form action="/submit-data">
   

2. method
   Menentukan metode HTTP yang digunakan untuk mengirim data:

   • GET: Data dikirim melalui URL (query string).
   • POST: Data dikirim dalam body HTTP, lebih aman untuk data sensitif.

   <form method="POST">
   

3. enctype
   Menentukan jenis encoding untuk pengiriman data, biasanya digunakan untuk file upload.

   • application/x-www-form-urlencoded: Default.
   • multipart/form-data: Untuk file upload.
   • text/plain: Data dikirim dalam format teks biasa.

   <form enctype="multipart/form-data">
   

Jenis-Jenis Input dalam Form

1. Input Teks

• Text Input:

  <input type="text" name="username" placeholder="Masukkan nama pengguna">
  

• Password Input:

  <input type="password" name="password" placeholder="Masukkan kata sandi">
  

• Textarea:

  <textarea name="pesan" placeholder="Tulis pesan di sini"></textarea>
  

2. Input Pilihan

• Radio Button: Untuk memilih satu dari beberapa opsi.

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

• Checkbox: Untuk memilih satu atau lebih opsi.

  <input type="checkbox" name="hobi" value="membaca"> Membaca
  <input type="checkbox" name="hobi" value="olahraga"> Olahraga
  

• Dropdown (Select):

  <select name="negara">
    <option value="id">Indonesia</option>
    <option value="my">Malaysia</option>
    <option value="sg">Singapura</option>
  </select>
  

3. Input File

Untuk upload file.

<input type="file" name="dokumen">

4. Tombol

• Tombol Kirim (Submit):

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

• Tombol Reset: Mengatur ulang semua input.

  <button type="reset">Reset</button>
  

Contoh Lengkap Form HTML

<form action="/submit" method="POST" enctype="multipart/form-data">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Masukkan email Anda" required>

  <label>Jenis Kelamin:</label>
  <input type="radio" name="gender" value="laki-laki"> Laki-laki
  <input type="radio" name="gender" value="perempuan"> Perempuan

  <label for="hobi">Hobi:</label>
  <input type="checkbox" name="hobi" value="membaca"> Membaca
  <input type="checkbox" name="hobi" value="olahraga"> Olahraga

  <label for="negara">Negara:</label>
  <select id="negara" name="negara">
    <option value="id">Indonesia</option>
    <option value="my">Malaysia</option>
    <option value="sg">Singapura</option>
  </select>

  <label for="file">Unggah File:</label>
  <input type="file" id="file" name="file">

  <button type="submit">Kirim</button>
  <button type="reset">Reset</button>
</form>

Fitur Tambahan

1. Validasi HTML5

   • required: Wajib diisi.
   • pattern: Validasi pola menggunakan regex.
   • min / max: Batas angka.
   • maxlength / minlength: Batas panjang teks.

2. Placeholder
   Memberikan petunjuk di dalam input:

   <input type="text" placeholder="Masukkan nama">
   

3. Default Value
   Memberikan nilai awal:

   <input type="text" value="Default">