Elemen formulir secara mendalam

Di 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

• 1
• 12
• 1
• 1

Source

Anda tidak selalu perlu menempatkan kontrol formulir di elemen <form>. Misalnya, Anda dapat menyediakan elemen <select> agar pengguna dapat 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 akan Anda pelajari dalam modul ini, penggunaan <form> memberi Anda banyak fungsi bawaan dari browser yang harus Anda buat sendiri. <form> juga memiliki banyak fitur aksesibilitas bawaan secara default. Jika ingin menghindari pemuatan ulang halaman saat pengguna mengirimkan formulir, Anda masih dapat menggunakan elemen <form>, tetapi tingkatkan dengan JavaScript.

Catatan: Anda dapat mereplikasi fungsi formulir dengan JavaScript, tetapi pendekatan berbasis skrip murni tidak mungkin sekuat, mudah diakses, dan tahan lama seperti <form> bawaan. Cari tahu alasan tidak semua orang memiliki 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 Anda dapat mengakses dan memproses data formulir? Data yang dikirim dapat ditangani oleh JavaScript di frontend menggunakan permintaan GET, atau oleh kode di backend menggunakan permintaan GET atau POST. Pelajari lebih lanjut jenis permintaan dan mentransfer data formulir.

Catatan: Tombol Kirim mungkin memiliki atribut formmethod. Jika demikian, nilai yang ditentukan di sana akan digunakan.

Saat formulir dikirim, browser akan membuat permintaan ke URL yang merupakan nilai atribut action. Selain itu, browser memeriksa apakah tombol Kirim 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), pelengkapan otomatis 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 akan diproses harus /color.

Menampilkan formulir

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

Catatan: Gunakan nama yang dapat ditindaklanjuti untuk tombol Kirim, misalnya, 'Lanjutkan ke Pembayaran' atau 'Simpan Perubahan', bukan hanya 'Kirim'. Jangan nonaktifkan tombol Kirim saat masih menunggu input pengguna yang valid, tetapi pertimbangkan untuk menonaktifkannya setelah formulir dikirim, sehingga mencegah beberapa permintaan ke server Anda. Pelajari lebih lanjut Praktik terbaik tombol Kirim.

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">.

Catatan: Anda dapat menggunakan atribut enterkeyhint untuk mengubah label tombol Enter untuk keyboard virtual. Hal ini membantu pengguna lebih memahami apa yang terjadi saat mereka mengirimkan formulir saat ini.

Opsi ketiga adalah menggunakan <input type="image" alt="Submit" src="submit.png">, untuk membuat tombol Kirim grafis. Namun, sekarang setelah Anda dapat membuat tombol grafis dengan CSS, sebaiknya jangan gunakan type="image".

Catatan: Selalu beri pengguna waktu sebanyak yang mereka inginkan untuk mengirimkan formulir. Menentukan waktu tunggu di formulir akan menyebabkan hilangnya data, dan membuat pengguna frustrasi. Untuk informasi selengkapnya, lihat Panduan waktu tunggu formulir W3C.

Mengizinkan pengguna mengirimkan file

Gunakan <input type="file"> untuk memungkinkan 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 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 ke multipart/form-data. Tanpa encoding ini, file tidak dapat dikirim dengan permintaan POST.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang elemen formulir

Nilai apa yang diperlukan untuk enctype untuk mengirimkan file?

multipart/form-data

🎉

multipart/form-files

Coba lagi.

form-data

Coba lagi.

form-files

Coba lagi.

Apakah data pengguna dapat dikirim 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 di atas.

🎉

Resource

• Elemen HTML formulir
• Praktik terbaik tombol kirim