Elemen formulir secara mendalam

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>?

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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.

Tampilkan formulir

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
Coba lagi.
form-data
Coba lagi.
form-files
Coba lagi.

Apakah mungkin mengirim data pengguna tanpa <form>

Tidak
Coba lagi.
Ya, dengan JavaScript.
🎉
Ya, dengan Flash.
Coba lagi.
Ya, dengan HTML5.
Coba lagi.

Bagaimana cara mengirimkan <form>?

Klik <button>.
Coba lagi.
Tekan Enter.
Coba lagi.
Klik <input type="image">.
Coba lagi.
Semua yang di atas.
🎉

Referensi