HTML Dasar: Atribut Form

Pada pertemuan sebelumnya kita telah membahas tentang pengenalan dasar untuk Form HTML. Kita telah membahas tentang element form, input, dan beberapa tipenya.

Dan pada pertemuan kali ini, kita masih akan membahas tentang form: lebih tepatnya tentang jenis-jenis atribut yang tersedia untuk tag <form>.

Atribut Action

Atribut pertama dari tag form adalah atribut action. Kita sudah singgung hal ini pada pertemuan sebelumnya.

Atribut action berfungsi untuk menentukan URL tujuan di mana data dari suatu <form> akan dikirimkan lalu diolah ketika ia disubmit. Jadi ketika suatu form disubmit, browser akan mengirimkan seluruh data yang ada pada form tersebut menuju URL yang didefinisikan dalam atribut action. Jika atribut action tidak didefinisikan, maka browser akan menggunakan URL sekarang sebagai tujuan.

Perhatikan kode berikut:

<form action="/proses-data">
  <label>Nama</label> <br>
  <input type="text" name="nama">
</form>

Pada kode di atas data isian nama akan dikirimkan ke URL /proses-data ketika form tersebut disubmit.

Idealnya atribut action akan kita pahami lebih detil (dan juga akan kita praktikkan) ketika mempelajari bahasa pemrograman server side seperti Python, nodejs, atau PHP dan lain sebagainya.

Atribut Target

Atribut berikutnya adalah atribut target. Atribut target pada element form hampir sama dengan atribut target pada element a.

Ia berfungsi untuk mengatur perilaku browser ketika suatu form disubmit.

Apakah browser akan melakukan redirect langsung pada tab yang sedang aktif? Atau apakah browser akan membuat tab baru?

Itu semua bisa kita atur menggunakan atribut target pada tag <form>.

Berikut ini adalah nilai yang bisa kita gunakan untuk atribut target:

Perhatikan contoh berikut di mana suatu form akan dibuka pada tab baru ketika ada event submit.

<form action="/proses-data" target="_blank">
  ...
</form>

Ketika disubmit, hasil dari form di atas akan dibuka pada tab baru karena ia memiliki atribut target dengan nilai _blank.

Atribut Method

Berikutnya adalah atribut method. Atribut ini digunakan untuk mendefinisikan method HTTP apa yang harus digunakan browser ketika mengirim data dari form.

Sebagaimana yang kita tahu, protokol HTTP/HTTPS memiliki beberapa method request: di antaranya yang paling sering digunakan adalah method GET dan method POST.

Data yang dikirim dengan method GET akan ditampilkan di URL, sedangkan data yang dikirim menggunakan method POST akan disimpan di dalam body request dan tidak di-ekspos di dalam URL.

Sehingga jangan pernah kita mengirimkan data-data sensitif menggunakan method GET karena data tersebut bisa terlihat dengan mata telanjang.

Berikut ini contoh form HTML dengan method GET dan POST:

<form method="GET">
  ...
</form>

<form method="POST">
  ...
</form>

Kalian bisa membaca lebih lanjut tentang perbedaan method GET dan POST dalam menghandle data form menggunakan bahasa pemrograman PHP.

Atribut Autocompelete

Atribut berikutnya yang bisa kita gunakan pada tag <form> adalah atribut autocomplete. Atribut ini memiliki 2 buah nilai yaitu:

• on
• dan off

“On” artinya fitur autocomplete pada suatu form akan diaktifkan, sebaliknya nilai “off” artinya fitur autocomplete untuk form yang bersangkutan tidak diaktifkan.

Perhatikan contoh berikut:

<h2>Form dengan autocomplete</h2>

<!--
  fitur autocomplete akan hidup secara default
  tanpa harus mendefinisikan atribut autocomplete
-->
<form autocomplete="on">
  <label>Nama</label>
  <input name="name"> <br>
  <label>Email</label>
  <input name="email" type="email"> <br>
  <label>Nomor Telpon</label>
  <input name="phone">
</form>

Hasil keluaran:

Coba klik atau ketikkan nama, email, dan nomor telpon pada form di atas, apakah kalian mendapatkan “saran” autocomplete dari browser?

Sekarang coba dengan autocomplete="off":

<h2>Form tanpa autocomplete</h2>

<form autocomplete="off">
  <label>Nama</label>
  <input name="name"> <br>
  <label>Email</label>
  <input name="email" type="email"> <br>
  <label>Nomor Telpon</label>
  <input name="phone">
</form>

Hasil keluaran:

Browser akan menggunakan atribut name sebagai patokan untuk melakukan autocomplete. Jadi misalkan kita pernah mengisi sebuah kolom isian dengan nama email di suatu situs A, kemudian kita menemukan inputan dengan nama yang sama (yaitu email) pada situs B, browser akan menggunakan history data yang kita tulis di situs A sebagai autocomplete.

Atribut Enctype

Atribut berikutnya adalah atribut enctype yang berarti encoding type atau tipe enkode.

Atribut ini umumnya kita gunakan ketika kita membuat form upload file dengan memberi atribut enctype="multipart/form-data". Hal itu kita lakukan agar browser bisa mengirimkan file dari local menuju server dengan format encoding yang benar.

Berikut ini contoh penggunaan encytpe:

<form method="POST' enctype="multipart/form-data">
  ...
</form>

Catatan: atribut enctype hanya support untuk method POST.

Atribut-Atribut yang Lain

Berikut ini list atribut-atribut element <form> yang lebih lengkap beserta dengan deskripsinya:

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang macam-macam element inputan sebuah form.

Stay tune!