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 situs Anda tentang hewan favorit mereka. Sebagai langkah pertama, Anda memerlukan cara untuk mengumpulkan data.

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

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

Apa yang dimaksud dengan elemen formulir?

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 lebih lanjut elemen formulir di modul berikutnya.

Di mana data diproses?

Saat formulir dikirimkan (misalnya, saat pengguna mengklik tombol Kirim), browser akan membuat permintaan. Skrip dapat merespons 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 melakukannya? Coba di CodePen.

      <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 ditambahkan ke URL. Jika pengguna mengirimkan 'frog' dalam contoh sebelumnya, 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 disertakan dalam isi permintaan.

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

Metode apa yang harus 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. Kemudian, data ditambahkan ke histori browser Anda, karena disertakan dalam URL. Formulir penelusuran sering menggunakan ini. Dengan begitu, Anda dapat menandai halaman hasil penelusuran.

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

Periksa pemahaman Anda

Uji pengetahuan Anda tentang elemen formulir

Resource

Elemen <form>.