Menggunakan formulir untuk mendapatkan data dari pengguna

Pelajari dasar-dasar penggunaan formulir di web dengan pengantar elemen formulir ini.

Bayangkan Anda ingin bertanya kepada orang-orang di {i>website<i} Anda tentang hewan favorit mereka. Sebagai langkah pertama, Anda memerlukan cara untuk mengumpulkan data.

Bagaimana Anda melakukannya dengan HTML?

Di HTML, Anda dapat membuatnya menggunakan elemen formulir (<form>), <input> dengan <label>, dan <button> kirim.

Apa yang dimaksud dengan elemen formulir?

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

Elemen formulir terdiri dari tag awal <form>, atribut opsional yang ditentukan dalam tag awal, dan tag akhir </form>.

Di antara tag awal dan akhir, Anda dapat menyertakan elemen formulir seperti <input> dan <textarea> untuk berbagai jenis input pengguna. Anda akan mempelajari elemen formulir lebih lanjut di modul berikutnya.

Di mana data diproses?

Saat formulir dikirimkan (misalnya, saat pengguna mengklik tombol Submit), browser akan membuat permintaan. Skrip dapat menanggapi permintaan tersebut dan memproses data.

Secara default, permintaan dibuat ke halaman tempat formulir ditampilkan.

Misalnya Anda ingin skrip yang berjalan di https://web.dev memproses data formulir. Bagaimana Anda akan melakukannya? Cobalah!

<form action="https://example.com/animals">
...
</form>

Contoh sebelumnya membuat permintaan ke https://example.com/animals. Skrip di backend example.com dapat menangani permintaan ke /animals dan memproses data dari formulir.

Bagaimana data ditransfer?

Secara default, data formulir dikirim sebagai permintaan GET, dengan data yang dikirimkan akan ditambahkan ke URL. Jika pengguna mengirim 'katak' dalam contoh di atas, browser akan membuat permintaan ke URL berikut:

https://example.com/animals?animal=frog

Dalam hal ini, Anda dapat mengakses data di frontend atau backend dengan mendapatkan data dari URL.

Jika mau, Anda dapat menginstruksikan formulir untuk menggunakan permintaan POST dengan mengubah atribut metode.

<form method="post">
...
</form>

Dengan menggunakan POST, data akan disertakan dalam isi permintaan.

Data tidak akan terlihat di URL dan hanya dapat diakses dari skrip frontend atau backend.

Metode apa yang sebaiknya Anda gunakan?

Ada kasus penggunaan untuk kedua metode tersebut.

Untuk formulir yang memproses data sensitif, gunakan metode POST. Data dienkripsi (jika Anda menggunakan HTTPS) dan hanya dapat diakses oleh skrip backend yang memproses permintaan. Data tidak terlihat di URL. Contoh umumnya adalah formulir login.

Jika data dapat dibagikan, Anda dapat menggunakan metode GET. Dengan cara ini, data akan ditambahkan ke histori browser Anda karena disertakan dalam URL. Formulir penelusuran sering menggunakan ini. Dengan cara ini Anda dapat mem-bookmark halaman hasil penelusuran.

Setelah Anda mempelajari elemen formulir itu sendiri, kini saatnya mempelajari kolom formulir untuk membuat formulir Anda interaktif.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang elemen formulir

Referensi

Elemen <form>.