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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Anda tidak selalu perlu 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 Anda menyimpan atau memproses data dari pengguna, Anda harus menggunakan elemen <form>. Seperti yang Anda pelajari dalam modul ini, penggunaan <form> memberi Anda banyak fungsi bawaan dari browser yang jika tidak, harus Anda buat sendiri. <form> juga memiliki banyak fitur aksesibilitas bawaan secara default. Jika Anda ingin menghindari pemuatan ulang halaman saat pengguna mengirimkan formulir, Anda tetap dapat menggunakan elemen <form>, tetapi menyempurnakannya dengan JavaScript.

Bagaimana cara kerja <form>?

Anda mempelajari bahwa <form> adalah cara terbaik untuk menangani data pengguna. Sekarang 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 mengakses dan memproses data formulir? Data yang dikirimkan dapat ditangani oleh JavaScript di frontend, dengan permintaan GET, atau oleh kode di backend, dengan permintaan GET atau POST. Pelajari lebih lanjut jenis permintaan dan mentransfer 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 memutuskan apakah formulir harus divalidasi (novalidate), autocomplete harus digunakan (autocomplete="off"), atau encoding apa yang harus digunakan (accept-charset).

Coba buat formulir tempat pengguna dapat mengirimkan warna favorit mereka. Data harus dikirim sebagai permintaan POST, dan URL tempat data diproses harus berupa /color.

Menampilkan formulir

Salah satu kemungkinan solusinya 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.

Selalu gunakan bahasa yang mendorong tindakan saat membuat tombol Kirim. Misalnya, Lanjutkan pembayaran atau Simpan perubahan. Hal ini membantu pengguna Anda memahami langkah selanjutnya dalam formulir Anda.

Anda dapat menambahkan tombol Kirim dengan berbagai cara. Salah satu opsi adalah menggunakan elemen <button> di dalam formulir Anda. Selama Anda tidak menggunakan type="button", tombol 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 Kirim grafis. Namun, karena Anda kini dapat membuat tombol grafis dengan CSS, sebaiknya jangan menggunakan type="image".

Terakhir, hindari menambahkan waktu tunggu. Berikan waktu sebanyak yang diinginkan pengguna untuk mengirimkan formulir. Waktu tunggu habis menyebabkan kehilangan data dan membuat frustrasi pengguna Anda. Baca panduan waktu tunggu formulir W3C.

Mengizinkan pengguna mengirimkan file

Gunakan <input type="file"> untuk mengizinkan orang mengupload dan mengirimkan file jika perlu.

<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 pada formulir Anda. Nilai defaultnya adalah application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
...
</form>

Untuk memastikan file dapat dikirimkan, ubah menjadi multipart/form-data. Tanpa encoding ini, file tidak dapat dikirim dengan permintaan POST.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang elemen formulir

Nilai enctype apa yang diperlukan untuk 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 jawaban benar.
🎉

Resource