Atribut Form HTML

Chapters ini mengenalkan HTML <form> Atribut yang berbeda untuk elemen.

Atribut Action

action Atribut menentukan operasi yang akan dilakukan saat mengirim formulir.

Biasanya, saat pengguna mengklik tombol "Submit", data formulir akan dikirim ke berkas di server.

Dalam contoh di bawah ini, data formulir dikirim ke berkas yang dinamai "action_page.php". Berkas ini mengandung skrip server untuk menangani data formulir:

Contoh

Setelah disubmit, data formulir akan dikirim ke "action_page.php":

<form action="/action_page.php">
  <label for="fname">Nama Depan:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Nama Terakhir:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

Coba Sendiri

Petunjuk:Jika atribut action diabaikan, action akan diatur ke halaman saat ini.

Atribut Target

target Atribut menentukan tempat menampilkan respons setelah mengirimkan formulir.

target Atribut dapat diset ke salah satu nilai berikut:

Nilai Deskripsi
_blank Respons ditampilkan di jendela baru atau tab.
_self Respons ditampilkan di jendela saat ini.
_parent Respons ditampilkan di frame induk.
_top Respons ditampilkan di seluruh body jendela.
framename Respons ditampilkan di iframe yang dinamai.

Nilai default adalah _self, yang berarti respons akan dibuka di jendela saat ini.

Contoh

Di sini, hasil pengiriman akan dibuka di tab browser baru:

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

Coba Sendiri

Atribut Method

Atribut method menentukan metode HTTP yang digunakan saat mengirimkan data formulir.

Data formulir dapat digunakan sebagai variabel URL (gunakan method="get") atau sebagai transaksi HTTP POST (gunakan method="post") dikirim.

Metode HTTP default yang digunakan saat mengirimkan data formulir adalah GET.

Contoh

Contoh ini menggunakan metode GET untuk mengirimkan data formulir:

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

Coba Sendiri

Contoh

Contoh ini menggunakan metode POST untuk mengirimkan data formulir:

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

Coba Sendiri

Perhatian tentang GET:

  • Tambahkan data formulir dalam bentuk pasangan nama/nilai ke URL
  • Jangan pernah gunakan GET untuk mengirimkan data sensitif! (Data formulir yang disubmit dapat dilihat di URL!)
  • Panjang URL terbatas (2048 karakter)
  • Berguna untuk pengiriman formulir yang pengguna ingin menambahkan sebagai bookmark
  • GET digunakan untuk data yang tidak aman, seperti string query di Google

Perhatian tentang POST:

  • Tambahkan data formulir ke dalam正文 permintaan HTTP (tidak ditampilkan data formulir yang disubmit di URL)
  • POST tidak mempunyai batas ukuran, dapat digunakan untuk mengirimkan data besar.
  • Pengiriman formulir dengan POST tidak dapat menambahkan bookmark

Petunjuk:Jika data formulir mengandung informasi sensitif atau pribadi, pastikan untuk menggunakan POST!

Atribut Autocomplete

autocomplete Atribut menentukan apakah formulir harus membuka fungsi penyelesaian otomatis.

Setelah mengaktifkan fungsi penyelesaian otomatis, peramban akan mengisi nilai otomatis berdasarkan nilai yang sebelumnya diisi pengguna.

Contoh

Aktifkan formulir pengisian otomatis:

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

Coba Sendiri

Atribut Novalidate

novalidate Atribut adalah atribut boolean.

Jika sudah disetel, ia menentukan bahwa data formulir tidak harus divalidasi saat disubmit.

Contoh

Formulir yang belum mengatur atribut novalidate:

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

Coba Sendiri

Daftar semua atribut <form>

Atribut Deskripsi
accept-charset Tentukan karakter encoding yang digunakan untuk mengirimkan formulir.
action Tentukan tempat mana data formulir akan dikirim saat mengirimkan formulir.
autocomplete Tentukan apakah formulir seharusnya membuka fitur penyelesaian otomatis (pengisian).
enctype Tentukan bagaimana data formulir seharusnya dienkripsi saat disubmit ke server (hanya untuk method="post").
method Tentukan metode HTTP yang digunakan untuk mengirimkan data formulir.
name Tentukan nama formulir.
novalidate Tentukan formulir yang tidak harus divalidasi saat disubmit.
rel Tentukan hubungan antara sumber tautan dan dokumen saat ini.
target Tentukan tempat yang akan ditampilkan tanggapan yang diterima setelah mengirimkan formulir.