Menggunakan formulir HTML to Fill Out Forms - dummies

Formulir memungkinkan Anda untuk menangkap masukan dari pengunjung situs Anda. Menangkap masukan dari pengunjung memungkinkan Anda memodifikasi konten yang ada di halaman. Misalnya, filter harga dan tanggal pada situs web penerbangan memungkinkan untuk menemukan penerbangan yang diinginkan dengan lebih cepat. Anda juga bisa menyimpan input untuk digunakan nanti.

Misalnya, sebuah situs web dapat menggunakan formulir pendaftaran untuk mengumpulkan informasi email, nama pengguna, dan kata sandi Anda agar Anda dapat mengaksesnya di lain waktu.

Memahami bagaimana bentuk kerja

Formulir menyampaikan informasi yang dimasukkan oleh pengguna ke server dengan menggunakan proses berikut:

1. Browser menampilkan formulir pada mesin klien.

2. Pengguna melengkapi formulir dan menekan tombol kirim.

3. Browser mengirimkan data yang dikumpulkan dari formulir ke server.

4. Server memproses dan menyimpan data dan mengirimkan tanggapan ke mesin klien.

5. Browser menampilkan respons, biasanya menunjukkan apakah pengajuan berhasil.

Untuk saat ini, semua yang perlu Anda ketahui adalah bahwa bahasa pemrograman sisi server seperti Python, PHP, dan Ruby digunakan untuk menulis skrip yang menerima dan menyimpan kiriman formulir.

Bentuknya sangat fleksibel, dan bisa merekam berbagai input pengguna. Bidang masukan yang digunakan dalam formulir dapat mencakup bidang teks bebas, tombol radio, kotak centang, menu drop-down, slider kisaran, tanggal, nomor telepon, dan banyak lagi. Selain itu, bidang masukan dapat diatur ke nilai default awal tanpa masukan pengguna.

Atribut Bentuk yang Dipilih

Nama atribut	Nilai yang mungkin	Deskripsi
ketik	kotak centang email kirim teks kata sandi radio (daftar lengkap nilai telah diabaikan di sini untuk singkatnya)	Tetapkan jenis bidang masukan untuk ditampilkan dalam formulir. Untuk contoh , teks digunakan untuk bidang teks bebas, dan kirim digunakan untuk membuat tombol kirim.
value	text	Nilai awal dari kontrol input.

Membuat bentuk dasar

Anda membuat bentuk dasar dengan

1. Mendefinisikan sebuah form dengan elemen form.

   Mulailah dengan menambahkan tag pembuka dan tag penutup.

2. Menggunakan atribut tindakan, tentukan dalam elemen form tempat untuk mengirim data formulir.

   Tambahkan atribut tindakan ke tag pembuka Anda dan tetapkan sama dengan URL skrip yang akan memproses dan menyimpan masukan pengguna.

3. Dengan menggunakan atribut metode, tentukan dalam bentuk elemen cara mengirim data formulir.

   Tambahkan atribut metode ke tag pembuka Anda dan tetapkan sama dengan POST.

   Atribut metode disetel sama dengan GET atau POST. Secara umum, POST digunakan untuk menyimpan informasi sensitif (seperti nomor kartu kredit), sedangkan GET digunakan untuk memungkinkan pengguna memberi bookmark atau berbagi dengan orang lain hasil formulir yang diajukan (seperti, misalnya, daftar penerbangan maskapai penerbangan).

4. Menyediakan cara bagi pengguna untuk memasukkan dan mengirimkan tanggapan dengan elemen masukan.

   Di antara tag pembuka dan penutup, buat satu tag.

   Formulir Anda hanya memiliki satu tag pembuka dan penutup; Namun, setidaknya Anda akan memiliki dua tag untuk mengumpulkan dan mengirimkan data pengguna.

5. Tentukan jenis input dengan menggunakan atribut tipe pada elemen masukan.

   Untuk contoh ini, atur atribut tipe sama dengan "teks".

   Tag tidak memiliki tag penutup, yang merupakan pengecualian pada aturan "tutup semua tag yang Anda buka". Tag ini disebut tag penutup diri.

6. Akhirnya, buat tag lain dan tetapkan atribut jenis sama dengan submit.

Contoh kode berikut menunjukkan sintaks untuk membuat form yang ditampilkan.

Atribut tindakan dalam formulir ini disetel sama dengan mailto, yang memberi isyarat ke browser untuk mengirim email menggunakan klien email default Anda (seperti Outlook atau Gmail). Jika browser Anda tidak dikonfigurasi untuk menangani link email, maka formulir ini tidak akan berfungsi. Biasanya, formulir dikirimkan ke server untuk memproses dan menyimpan isi formulir, namun dalam contoh ini formulir isinya diserahkan ke aplikasi email pengguna.