Atribut Formulir HTML

Bab ini memaparkan HTML <form> Atribut berbeza bagi elemen.

Atribut Action

action Atribut yang menentukan tindakan yang dijalankan semasa menghantar borang.

Biasanya, apabila pengguna mengklik butang "Hantar", data borang akan dihantar ke fail di atas pihak berkuasa.

Dalam contoh di bawah, data borang dihantar ke fail yang dinamakan "action_page.php". Fail ini mengandungi skrip pihak berkuasa untuk mengurus data borang:

Contoh

Selepas disubmit, data borang akan dihantar ke "action_page.php":

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

Coba Sendiri

Petunjuk:Jika kegunaan atribut action diabaikan, pengesanan action akan diatur ke halaman semasa.

Atribut Target

target Atribut menentukan tempat untuk menampilkan respons setelah menghantarkan bentuk.

target Atribut dapat diatur dengan 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 kerangka induk.
_top Respons ditampilkan di seluruh body jendela.
framename Respons ditampilkan di iframe yang dinamai.

Nilai baku adalah _self, artinya respons akan dibuka di jendela saat ini.

Contoh

Di sini, hasil penghantaran akan dibuka di tab pelayar baru:

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

Coba Sendiri

Atribut Method

Atribut method menentukan metode HTTP yang digunakan untuk menghantarkan data bentuk.

Data bentuk dapat digunakan sebagai variabel URL (menggunakan method="get") atau sebagai transaksi HTTP post (menggunakan method="post") untuk dihantarkan.

Metode HTTP baku yang digunakan saat menghantarkan data bentuk adalah GET.

Contoh

Contoh ini menggunakan metode GET untuk menghantarkan data bentuk:

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

Coba Sendiri

Contoh

Contoh ini menggunakan metode POST untuk menghantarkan data bentuk:

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

Coba Sendiri

Perhatian tentang GET:

  • Tambahkan data bentuk dalam bentuk pasangan nama/nilai ke URL
  • Jangan pernah gunakan GET untuk mengirimkan data sensitif! (Data bentuk yang disubmit dapat dilihat di URL!)
  • Panjang URL terbatas (2048 karakter)
  • Berguna untuk penghantaran bentuk yang pengguna ingin menambahkan sebagai penanda tangan.
  • GET sesuai untuk data yang tak aman, seperti string query di Google

Perhatian tentang POST:

  • Tambahkan data bentuk ke dalam teks permintaan HTTP (tidak ditampilkan data bentuk yang disubmit di URL)
  • POST tak mempunyai batas ukuran, dapat digunakan untuk mengirimkan data besar.
  • Penghantaran bentuk yang menggunakan POST tidak dapat menambahkan penanda tangan.

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

Atribut Autocomplete

autocomplete Atribut menentukan apakah bentuk harus membuka fungsi pengisian automatik.

Kemudian, pelayar akan mengisi nilai secara automatik berdasarkan nilai yang sebelumnya diisi pengguna.

Contoh

bolehkan pengisian automatik bentuk:

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

Coba Sendiri

Atribut Novalidate

novalidate Atribut adalah atribut boolean.

Jika sudah disetel, ia menentukan bahwa data borang tidak harus diverifikasi saat disubmit.

Contoh

Borang tanpa setting atribut novalidate:

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

Coba Sendiri

Daftar semua atribut <form>

Atribut Deskripsi
accept-charset Tentukan karakter encoding yang digunakan untuk pengiriman borang.
action Tentukan tempat pengiriman data borang saat mengirim borang.
autocomplete Tentukan apakah borang seharusnya membuka fungsi penyelesaian otomatis (pengisi).
enctype Tentukan bagaimana data borang seharusnya diekoding saat disubmit ke server (hanya untuk method="post").
method Tentukan metode HTTP yang digunakan untuk mengirimkan data borang.
name Tentukan nama borang.
novalidate Tentukan bahwa borang tidak harus diverifikasi saat disubmit.
rel Tentukan hubungan antara sumber tautan dan dokumen saat ini.
target Tentukan tempat yang akan ditampilkan respons yang diterima setelah mengajukan borang.