Elemen formulir secara mendalam

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.

<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

Resource

• Elemen HTML formulir
• Mengirimkan praktik terbaik tombol