Menggunakan formulir untuk mendapatkan data dari pengguna

Pelajari dasar-dasar penggunaan formulir di web dengan pengantar 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 tersebut diproses?

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

Secara default, permintaan dibuat ke halaman tempat formulir ditampilkan.

Misalnya Anda ingin skrip berjalan di https://web.dev untuk memproses data formulir—bagaimana Anda melakukannya? Coba sekarang!

Aktifkan/nonaktifkan jawaban

Anda dapat memilih lokasi skrip menggunakan atribut action.

<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 menambahkan data yang dikirim ke URL. Jika pengguna mengirimkan 'frog' pada contoh di atas, browser 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 agar 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 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 seperti yang disertakan dalam URL. Formulir penelusuran sering menggunakan fungsi ini. Dengan cara ini Anda dapat menandai halaman hasil penelusuran.

Setelah Anda mempelajari tentang elemen formulir itu sendiri, sekarang saatnya mempelajari kolom formulir agar formulir Anda interaktif.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang elemen formulir

Seperti apa tampilan tag awal untuk elemen formulir?

</form>
Hampir, ini adalah tag akhir dari elemen <form>.
<form-container>
Coba lagi.
<form>
🎉
<form-element>
Coba lagi.

Atribut apa yang dapat Anda gunakan untuk menentukan tempat <form> diproses?

where
Coba lagi.
action
Ya, atribut action menentukan tempat <form> diproses.
href
Coba lagi.
url
Coba lagi.

Apa metode permintaan default?

GET
🎉
POST
Coba lagi.

Resource

Elemen <form>.