Atribut Formulir HTML


Bab ini menjelaskan atribut yang berbeda untuk <form>elemen HTML.


Atribut Tindakan

Atribut actionmendefinisikan tindakan yang akan dilakukan ketika formulir dikirimkan.

Biasanya, data formulir dikirim ke file di server ketika pengguna mengklik tombol kirim.

Pada contoh di bawah, data formulir dikirim ke file bernama "action_page.php". File ini berisi skrip sisi server yang menangani data formulir:

Contoh

Saat pengiriman, kirim data formulir ke "action_page.php":

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Tip: Jika actionatribut dihilangkan, tindakan diatur ke halaman saat ini.


Atribut Target

Atribut targetmenentukan tempat untuk menampilkan respons yang diterima setelah mengirimkan formulir.

Atribut targetdapat memiliki salah satu dari nilai berikut:

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

Nilai default _selfyang berarti bahwa respons akan terbuka di jendela saat ini.

Contoh

Di sini, hasil yang dikirimkan akan terbuka di tab browser baru:

<form action="/action_page.php" target="_blank">

Atribut Metode

Atribut methodmenentukan metode HTTP yang akan digunakan saat mengirimkan data formulir.

Data formulir dapat dikirim sebagai variabel URL (dengan method="get") atau sebagai transaksi posting HTTP (dengan method="post").

Metode HTTP default saat mengirimkan data formulir adalah GET. 

Contoh

Contoh ini menggunakan metode GET saat mengirimkan data formulir:

<form action="/action_page.php" method="get">

Contoh

Contoh ini menggunakan metode POST saat mengirimkan data formulir:

<form action="/action_page.php" method="post">

Catatan tentang GET:

  • Menambahkan data formulir ke URL, dalam pasangan nama/nilai
  • JANGAN PERNAH menggunakan GET untuk mengirim data sensitif! (data formulir yang dikirimkan terlihat di URL!)
  • Panjang URL dibatasi (2048 karakter)
  • Berguna untuk pengiriman formulir di mana pengguna ingin menandai hasilnya
  • GET bagus untuk data yang tidak aman, seperti string kueri di Google

Catatan di POST:

  • Menambahkan data formulir di dalam isi permintaan HTTP (data formulir yang dikirimkan tidak ditampilkan di URL)
  • POST tidak memiliki batasan ukuran, dan dapat digunakan untuk mengirim data dalam jumlah besar.
  • Pengiriman formulir dengan POST tidak dapat di-bookmark

Tip: Selalu gunakan POST jika data formulir berisi informasi sensitif atau pribadi!


Atribut Pelengkapan Otomatis

Atribut autocompletemenentukan apakah formulir harus memiliki pelengkapan otomatis aktif atau nonaktif.

Saat pelengkapan otomatis aktif, browser secara otomatis melengkapi nilai berdasarkan nilai yang telah dimasukkan pengguna sebelumnya.

Contoh

Formulir dengan pelengkapan otomatis pada:

<form action="/action_page.php" autocomplete="on">

Atribut Novalidate

Atributnya novalidateadalah atribut boolean.

Saat ada, ini menentukan bahwa formulir-data (input) tidak boleh divalidasi saat dikirimkan.

Contoh

Formulir dengan atribut novalidate:

<form action="/action_page.php" novalidate>

Latihan HTML

Uji Diri Anda Dengan Latihan

Olahraga:

Tambahkan tombol kirim, dan tentukan bahwa formulir harus masuk ke "/action_page.php".

<bentuk="/action_page.php">
Nama: <input type="text" name="name">
<>
</form>


Daftar Semua <form> Atribut

Atribut Keterangan
terima-charset Menentukan pengkodean karakter yang digunakan untuk pengiriman formulir
tindakan Menentukan ke mana harus mengirim formulir-data saat formulir dikirimkan
pelengkapan otomatis Menentukan apakah formulir harus memiliki pelengkapan otomatis aktif atau nonaktif
enctype Menentukan bagaimana formulir-data harus dikodekan saat mengirimkannya ke server (hanya untuk metode = "posting")
metode Menentukan metode HTTP yang akan digunakan saat mengirim data formulir
nama Menentukan nama formulir
tidak memvalidasi Menentukan bahwa formulir tidak boleh divalidasi saat dikirimkan
rel Menentukan hubungan antara sumber daya yang ditautkan dan dokumen saat ini
target Menentukan tempat untuk menampilkan respons yang diterima setelah mengirimkan formulir