Atribut Formulir HTML
Bab ini menjelaskan atribut yang berbeda untuk <form>
elemen HTML.
Atribut Tindakan
Atribut action
mendefinisikan 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 action
atribut dihilangkan, tindakan diatur ke halaman saat ini.
Atribut Target
Atribut target
menentukan tempat untuk menampilkan respons yang diterima setelah mengirimkan formulir.
Atribut target
dapat 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 _self
yang 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 method
menentukan 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 autocomplete
menentukan 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 novalidate
adalah 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
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 |