Dalam tutorial ini, Anda akan belajar cara membuat formulir sederhana pertama Anda dalam HTML. Formulir adalah bagian penting dari aplikasi web dan memungkinkan pengguna untuk memasukkan informasi dan mengirimkannya ke server. Dalam panduan langkah demi langkah ini, Anda akan mempelajari struktur dasar formulir HTML dan memahami bagaimana berbagai elemen bekerja sama untuk mengirimkan data.
Wawasan utama
- Formulir HTML ditentukan oleh tag <form>.
- Atribut tindakan dan metode menentukan ke mana data dikirim dan metode mana yang digunakan.
- Bidang formulir biasanya ditentukan oleh <input>, <label>, dan <tombol>.
- Data dapat dikirim ke server melalui GET atau POST.
Petunjuk langkah demi langkah
1. Membuat struktur dasar HTML
Pertama, Anda memerlukan dokumen HTML sederhana sebagai struktur dasar. Pastikan Anda memiliki struktur dasar dokumen HTML:
2. tambahkan tag formulir
Langkah selanjutnya adalah mendefinisikan formulir. Anda menambahkan tag dan membutuhkan atribut aksi dan metode. Berikut ini adalah contoh sederhana di mana action menentukan URL tujuan pengiriman data dan method disetel ke GET untuk mentransfer data melalui URL.
3. Membuat label dan bidang masukan
Anda ingin membuat bidang input berlabel di formulir. Untuk melakukan hal ini, gunakan tag untuk label dan tag untuk bidang input yang sebenarnya. Pastikan bahwa atribut for pada label sesuai dengan id dari field input.
4. Tambahkan tombol submit
Untuk mengirimkan data formulir, Anda memerlukan sebuah tombol. Hal ini diwujudkan dengan tag dan harus memiliki tipe submit agar form terkirim ketika diklik.
5. Menguji formulir
Setelah Anda membuat formulir, sekarang saatnya untuk mengujinya di browser. Masukkan sebuah contoh di kolom input dan klik tombol submit. Anda akan melihat bahwa ketika formulir dikirim, data yang dimasukkan dikirim ke tindakan yang ditentukan melalui URL.
6. Perubahan pada atribut input
Untuk melihat bagaimana bidang input berubah, Anda dapat menyesuaikan atribut tag. Misalnya, ubah atribut nama untuk membedakan data yang dikirimkan. Contohnya adalah mengubah nama bidang input dari nama menjadi nama depan.
7 Transmisi data dan jenis permintaan
Sebelum Anda melakukan pengujian lebih lanjut, penting untuk mengetahui bahwa metode GET mengirimkan data dalam URL, sedangkan POST mengirimkan data dalam tubuh permintaan HTTP. Anda dapat mengubah jenis permintaan dengan menyesuaikan atribut metode pada tag.
8. Mensimulasikan respons server
Karena Anda mungkin tidak memiliki server yang sebenarnya saat menguji formulir, Anda dapat menyesuaikan URL tindakan untuk mensimulasikan halaman HTML yang berbeda yang akan dialihkan ke pengguna setelah mengirimkan formulir. Buat berkas HTML baru yang berisi halaman ucapan terima kasih, misalnya.
9 Pemecahan masalah dan debugging
Jika terjadi kesalahan saat mengirimkan formulir, periksa alat jaringan peramban. Di sana Anda bisa melihat apakah formulir berhasil dikirim dan data apa saja yang dikirimkan. Perhatikan juga kemungkinan kesalahan 404, yang mengindikasikan bahwa URL target tidak ditemukan.
10. Kesimpulan dan pandangan
Anda sekarang memiliki pemahaman dasar tentang cara membuat formulir HTML. Anda dapat mengembangkan teknik ini untuk membuat formulir yang lebih kompleks yang mencakup berbagai jenis input dan validasi. Dalam tutorial berikutnya, Anda akan mempelajari cara menggunakan JavaScript untuk merespons input form dan melakukan transfer data asinkron.
Rangkuman
Dalam tutorial ini, Anda telah belajar tentang struktur dan fungsionalitas form HTML pertama Anda. Anda sekarang mengetahui cara membuat bidang input, label, dan tombol, serta bagaimana data yang dikirim dikirim melalui URL atau di dalam tubuh permintaan POST.
