Pada modul sebelumnya, Anda telah mempelajari cara menggunakan elemen <form>
.
Dalam modul ini, Anda akan mempelajari cara kerja formulir, dan waktu untuk menggunakan formulir.
Haruskah Anda menggunakan elemen <form>
?
Anda tidak harus selalu menempatkan kontrol formulir dalam elemen <form>
.
Misalnya, Anda dapat memberikan 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 kebanyakan kasus ketika Anda
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 bangun sendiri.
<form>
juga memiliki banyak fitur aksesibilitas bawaan secara default.
Jika Anda ingin menghindari laman
dimuat ulang saat pengguna mengirimkan formulir,
Anda masih dapat menggunakan elemen <form>
, tetapi tingkatkan 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 GET
atau permintaan POST
sesuai dengan atribut method
. Jika tidak ada atribut method
,
Permintaan GET
dibuat ke URL halaman saat ini.
Bagaimana Anda dapat mengakses dan memproses data formulir?
Data yang dikirimkan dapat ditangani oleh JavaScript di frontend menggunakan permintaan GET
,
atau berdasarkan kode di backend menggunakan permintaan GET
atau POST
.
Pelajari selengkapnya tentang
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 ditetapkan di sana akan digunakan.
Selain itu, browser mencari atribut tambahan pada elemen <form>
,
misalnya, untuk memutuskan apakah formulir harus divalidasi (novalidate
),
pelengkapan otomatis harus digunakan (autocomplete="off"
) atau encoding apa yang harus digunakan (accept-charset
).
Coba buat formulir yang memungkinkan pengguna mengirimkan warna favorit mereka.
Data harus dikirim sebagai permintaan POST
, dan URL tempat data akan diproses harus /color
.
Salah satu solusi yang dapat dilakukan 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>
Memastikan pengguna dapat mengirimkan formulir Anda
Ada dua cara untuk mengirimkan formulir.
Anda dapat mengklik tombol Kirim, 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 menggunakannya, type="button"
akan berfungsi sebagai tombol Submit.
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 secara grafis.
Namun, setelah Anda dapat membuat tombol grafis dengan CSS, penggunaan type="image"
tidak direkomendasikan.
Izinkan pengguna mengirimkan file
Gunakan <input type="file">
agar orang dapat 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 untuk enctype
yang diperlukan untuk mengirimkan file?
multipart/form-data
form-files
form-data
multipart/form-files
Apakah mungkin mengirim data pengguna tanpa <form>
Bagaimana cara mengirimkan <form>
?
Enter
.<button>
.<input type="image">
.