Form pada HTML

Form bertugas menampung dan mengirimkan data dari browser ke webserver. Pada umumnya elemen form pada HTML selalu berisi berbagai elemen input.

<form method="POST" action="" enctype="multipart/form-data"
      name="formulir" id="formulir">
  <input type="text" name="nama" id="nama"/>
  <select name="jenis" id="jenis">
    <option value="">-- Jenis --</option>
    <option value="Mahasiswa">Mahasiswa</option>
    <option value="Dosen">Dosen</option>
  </select>
</form>

Sekarang ini, dikarenakan maraknya teknologi ajax dan javascript framework, tidak jarang elemen-elemen input tidak lagi diletakkan di dalam elemen form, melainkan hanya di dalam elemen div biasa. Akan tetapi topik ini tetap sangat perlu dikuasai:

  • Karena merupakan cara termudah untuk memahami pengiriman data pada teknologi web.
  • Sebagai alternatif saat ingin membuat form sederhana.
  • Karena wajib digunakan saat perlu mengirim file ke server melalui HTML.

Di dalam elemen form seperti contoh di atas, terdapat atribut-atribut yang penting antara lain:

  • method. Merupakan jenis cara pengiriman data. Untuk memahami atribut ini sepenuhnya, harus membahas juga bahasa sisi server misalnya PHP.
  • action. Atribut ini menentukan alamat pengiriman data input pengguna. Jika kosong, berarti form dikirimkan ke server dengan alamat yang sama dengan alamat halaman tersebut.
  • enctype. Atribut ini tidak wajib, tetapi bila perlu untuk mengupload file, maka atribut enctype="multipart/form-data" wajib ditambahkan.

Atribut name dan id pada form merupakan atribut yang digunakan oleh javascript untuk mengakses DOM (Document Object Model) dari elemen form tersebut. Jika belum mempelajari javascript, sebaiknya kedua atribut ini didalami nanti saja saat fokus belajar javascript.

Akan tetapi beda halnya dengan atribut name pada elemen-elemen input. Nama elemen input yang tertera pada atribut name akan berperan sebagai nama data yang dikirim ke web server. Untuk lebih jelasnya, dapat mencoba mempelajari penanganan form pada PHP.