Dalam modul sebelumnya, Anda telah mempelajari cara menggunakan elemen <form>
.
Dalam modul ini, Anda akan mempelajari cara kerja formulir, dan kapan harus menggunakan formulir.
Haruskah Anda menggunakan elemen <form>
?
Anda tidak harus selalu menempatkan kontrol formulir dalam elemen <form>
.
Misalnya, Anda dapat menyediakan elemen <select>
bagi pengguna untuk memilih kategori produk.
Anda tidak memerlukan elemen <form>
di sini karena Anda tidak menyimpan atau memproses data di backend.
Namun, dalam sebagian besar kasus, saat menyimpan atau memproses data dari pengguna, Anda harus menggunakan elemen <form>
.
Seperti yang akan Anda pelajari dalam modul ini, penggunaan <form>
akan memberi Anda banyak fungsi bawaan dari browser yang seharusnya Anda buat sendiri.
<form>
juga memiliki banyak fitur aksesibilitas bawaan secara default.
Jika Anda ingin menghindari pemuatan ulang halaman saat pengguna mengirimkan formulir,
Anda masih dapat menggunakan elemen <form>
, tetapi tingkatkan kualitasnya dengan
JavaScript.
Bagaimana cara kerja <form>
?
Anda telah mempelajari bahwa <form>
adalah cara terbaik untuk menangani data pengguna.
Anda mungkin bertanya-tanya, bagaimana cara kerja formulir?
<form>
adalah penampung untuk kontrol formulir interaktif.
<form method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<button formaction="/name">Save</button>
</form>
Bagaimana cara kerja pengiriman formulir?
Saat Anda mengirimkan <form>
, browser akan memeriksa atribut <form>
. Data dikirim sebagai permintaan GET
atau POST
sesuai dengan atribut method
. Jika tidak ada atribut method
, permintaan GET
akan dibuat ke URL halaman saat ini.
Bagaimana cara Anda mengakses dan memproses data formulir?
Data yang dikirimkan dapat ditangani oleh JavaScript di frontend menggunakan permintaan GET
,
atau dengan kode di backend menggunakan permintaan GET
atau POST
.
Pelajari lebih lanjut
jenis permintaan dan transfer data formulir.
Saat formulir dikirimkan, browser akan membuat permintaan ke URL yang merupakan nilai atribut action
.
Selain itu, browser akan memeriksa apakah tombol Submit memiliki atribut formaction
.
Jika demikian, URL yang ditentukan di sana akan digunakan.
Selain itu, browser mencari atribut tambahan pada elemen <form>
, misalnya, untuk menentukan apakah formulir harus divalidasi (novalidate
), pelengkapan otomatis harus digunakan (autocomplete="off"
), atau encoding apa yang harus digunakan (accept-charset
).
Coba buat formulir yang dapat dipakai pengguna untuk mengirimkan warna favorit mereka.
Data harus dikirim sebagai permintaan POST
, dan URL tempat data akan diproses harus /color
.
Salah satu solusi yang mungkin adalah menggunakan formulir ini:
<form method="post" action="/color"> <label for="color">What is your favorite color?</label> <input type="text" name="color" id="color"> <button>Save</button> </form>
Pastikan pengguna dapat mengirimkan formulir Anda
Ada dua cara untuk mengirimkan formulir.
Anda dapat mengklik tombol Submit, atau menekan Enter
saat menggunakan kontrol formulir apa pun.
Anda dapat menambahkan tombol Kirim dengan berbagai cara.
Salah satu opsinya adalah menggunakan elemen <button>
di dalam formulir Anda.
Selama Anda tidak menggunakan type="button"
, ini berfungsi sebagai tombol Kirim.
Opsi lainnya adalah menggunakan <input type="submit" value="Submit">
.
Opsi ketiga adalah menggunakan <input type="image" alt="Submit" src="submit.png">
,
untuk membuat tombol Submit grafis.
Namun, setelah dapat membuat tombol grafis dengan CSS, sebaiknya jangan gunakan type="image"
.
Izinkan pengguna mengirimkan file
Gunakan <input type="file">
untuk memungkinkan orang mengupload dan mengirimkan file jika diperlukan.
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
Pertama, tambahkan elemen <input>
dengan type="file"
ke formulir Anda.
Tambahkan atribut multiple
jika pengguna harus dapat mengupload beberapa file.
Satu perubahan lagi diperlukan untuk memastikan pengguna dapat mengupload file—tetapkan atribut enctype
di formulir Anda.
Nilai defaultnya adalah application/x-www-form-urlencoded
.
<form method="post" enctype="multipart/form-data">
…
</form>
Untuk memastikan file dapat dikirim, ubah menjadi multipart/form-data
.
Tanpa encoding ini, file tidak dapat dikirim dengan permintaan POST
.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang elemen formulir
Berapa nilai yang diperlukan agar enctype
dapat mengirimkan file?
multipart/form-data
multipart/form-files
form-data
form-files
Apakah mungkin mengirim data pengguna tanpa <form>
Bagaimana cara mengirimkan <form>
?
<button>
.Enter
.<input type="image">
.