Atribut Formulir HTML

Chapters ini memperkenalkan HTML <form> Atribut yang berbeda dari elemen.

Atribut Action

action Atribut mendefinisikan operasi yang akan dilakukan saat mengirim formulir.

Biasanya, saat pengguna menekan 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 mengelola data formulir:

Contoh

Setelah disubmit, data formulir 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 belakang:</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 diatur ke halaman saat ini.

Atribut Target

target Atribut menentukan tempat untuk menampilkan tanggapan setelah mengirimkan formulir.

target Atribut dapat diatur ke salah satu nilai berikut:

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

Nilai default adalah _self, yang berarti tanggapan 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 untuk 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 cocok untuk data yang tidak aman, seperti string pencarian di Google

Perhatian tentang POST:

  • Tambahkan data formulir ke dalam teks permintaan HTTP (tidak ditampilkan data formulir yang disubmit di URL)
  • POST tidak mempunyai batas ukuran, dapat digunakan untuk mengirimkan data dalam jumlah 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 aktifkan fungsi penyelesaian otomatis, peramban akan mengisi nilai otomatis berdasarkan nilai yang diinput pengguna sebelumnya.

Contoh

Aktifkan formulir pengisi otomatis:

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

Coba Sendiri

Atribut Novalidate

novalidate Atribut adalah atribut boolean.

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

Contoh

Formulir yang belum diatur 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 mengirimkan data formulir saat mengirimkan formulir.
autocomplete Tentukan apakah formulir seharusnya membuka fitur penyelesaian otomatis (pengisi).
enctype Tentukan bagaimana data formulir seharusnya dienkodifikasi saat disubmit ke server (hanya untuk method="post").
method Tentukan metode HTTP yang digunakan untuk mengirimkan data formulir.
name Tentukan nama formulir.
novalidate Tentukan bahwa formulir tidak harus divalidasi saat disubmit.
rel Tentukan hubungan antara sumber tautan dan dokumen saat ini.
target Tentukan tempat menampilkan tanggapan yang diterima setelah mengirimkan formulir.