Pertama kita lihat dahulu contoh dari form. Di layar ini adalah form untuk login yang diambil dari situs Facebook. Kita akan membahas mengenai kontrol-kontrol apa saja yang digunakan pada form login ini. Tulisan Email atau Telepon ini adalah label. Tulisan kata sandi juga label. Kemudian kita lihat ada kotak dibawah tulisan email yang bisa kita tuliskan dengan email atau nomor telepon kita. Kotak ini adalah Textbox. Sedangkan kotak dibawah kata sandi adalah Password. Sebenarnya Textbox dan Password ini adalah kontrol yang sama, hanya ada sedikit perbedaan pada behaviornya. Pada textbox, apabila kita mengetikan huruf a, maka yang muncul di dalam textbox adalah huruf a. Sedangkan pada password, apabila kita mengetikan huruf a, maka yang keluar adalah bullet. Dan kontrol yang terakhir digunakan adalah Button Submit, yang fungsinya untuk mengirimkan data email dan kata sandi ke server Facebook.

Yang perlu diperhatikan disini adalah tombol loginnya hanya ada 1 ya. Jadi kita tidak perlu membuat satu tombol khusus untuk kirim email, dan satu tombol lagi khusus untuk mengirim kata sandi. Cukup dengan satu tombol saja, kita sudah bisa mengirimkan semua data yang berada di dalam tag form.

Contoh kedua adalah form untuk membuat akun facebook baru. Di form ini, data yang harus diisikan lebih banyak, dan menggunakan lebih banyak jenis kontrol. Di bagian atas kita bisa melihat ada 4 buah textbox untuk Nama Depan, Nama Belakang, Nomor Seluler dan Kata Sandi. Kemudian untuk memasukan tanggal lahir, form ini menggunakan 3 buah dropdown, untuk memilih tanggal, bulan dan tahunnya.

Lalu untuk memilih jenis kelamin, form menggunakan radio button, sehingga pengguna hanya bisa memilih salah satu dari Perempuan, Laki-Laki, atau Khusus. Bagi yang ingin tahu Khusus itu maksudnya apa, bisa mengklik tanda tanya di sampingnya.

Dan bagian paling bawah dari form adalah tombol daftar, yang kalau kita klik akan mengirimkan seluruh data pada form ini ke server Facebook.

Kita menggunakan kontrol untuk meminta masukan dari pengunjung situs kita. Pada slide bisa kita lihat ada banyak macam kontrol yang didukung oleh HTML. Pada form Facebook tadi, kita sudah melihat contoh penggunaan label, textbox, password, dropdown, radio dan button. Nantinya akan kita bahas lagi lebih detil mengenai masing-masing kontrol ini.

Ini adalah contoh dari tag Form. Attribute yang sering digunakan adalah action yang kita isikan dengan URL server yang akan dikirimi data. Apabila kita tidak mengisikan action, maka data akan dikirimkan ke halaman yang sama. Sedangkan attribute method berisi jenis HTTP Request yang akan digunakan, pilihannya adalah GET atau POST. Nanti akan kita bahas lebih dalam lagi.

Sekarang kita akan praktek cara membuat form. Kita buka Atom. Saya sudah membuatkan file baru dengan nama form.html. Dan isinya sudah saya tambahkan boilerplate. Kita isikan bagian Title dengan HTML Form. Lalu kita tambahkan header1 dengan konten HTML Form.

Setelah itu kita buat tag form, dengan attribute method=”get”. Semua kontrol yang akan kita tambahkan harus berada di dalam tag form ini ya. Pertama kita tambahkan dahulu label dengan konten Email.

Setelah itu kita membuat sebuah textbox menggunakan elemen Input, dan attribute type=”Text”. Element Input ini termasuk void elemen ya, jadi kita tidak perlu membuat tag penutup Input. Kita lihat hasilnya pada browser. Disini kita bisa melihat sudah ada form kita, dengan label Email. Dan disebelah kanan label tersebut sudah ada textbox yang bisa kita isi dengan teks.

Kita tambahkan 2 buah line break. Kemudian kita buat label baru dengan konten Password. Dan untuk textboxnya kita menggunakan elemen input dengan attribute type=”password”. Kita lihat lagi hasilnya. Sekarang kita sudah punya tambahan label password dan textboxnya.

Kita bisa lihat disini bahwa kalau saya menekan tombol a di bagian email, maka tulisannya akan kelihatan di layar. Sedangkan kalau saya menekan tombol a di bagian password, maka yang keluar adalah icon lingkaran. Ini disebabkan karena pada email kita menggunakan elemen input dengan type Text. Sedangkan pada password kita menggunakan elemen input dengan type Password.

Untuk membuat button submit, bisa kita lakukan dengan menggunakan elemen input dan button. Pertama kita coba menggunakan elemen input dulu ya. Kita tambahkan elemen input dengan attribute type=”submit”. Kita lihat hasilnya di browser, sudah ada tambahan sebuah button dengan tulisan Submit. Apabila kita hendak mengganti tulisan Submit, kita bisa menggunakan attribute Value. Misalkan kita tambahkan attribute value=”login”. Maka tulisan pada button tersebut akan berubah menjadi Login.

Sekarang muncul pertanyaan, mengapa tulisan Email dan Password harus menggunakan Label? Jawabannya adalah karena label bisa kita hubungkan ke kontrol yang berkaitan dengan label tersebut. Caranya? Misalkan kita mau menghubungkan label Email ke textbox Email. Pertama kita tambahkan attribute for pada label, dengan nilai “emailku”. Lalu di elemen input kita tambahkan ID=”emailku”.

Ingat disini bahwa nilai for pada label harus sama persis dengan nilai ID pada input, barulah kedua kontrol bisa terhubung. Dan apabila kita test di browser, kita klik Email, maka secara otomatis browser akan memindahkan fokus ke dalam textboxnya.

Kita bisa lakukan hal yang sama untuk label dan input password. Dan kita bisa tes hasilnya di browser.

Nah, kalau misalnya kita membuat kesalahan, seperti label email namun diberi for passwordku. Maka hasilnya kalau kita mengklik tulisan email, maka browser akan fokus ke textbox password.

Kita kembalikan nilai for menjadi emailku.

Jadi kita sudah mempelajari mengenai attribute ID. Attribute ID ini memberikan nama pada HTML Tag, sehingga kita bisa mengakses tag tersebut dengan cara menyebutkan ID-nya. ID ini bisa digunakan di seluruh bahasa frond end, termasuk HTML, CSS dan Javascript.

Selanjutnya kita akan mempelajari mengenai attribute name. Attribute name ini juga memberikan nama pada Tag Input, namun nama tersebut akan digunakan pada back-end. Jadi disini jelas ya perbedaannya. Kalau ID adalah untuk front-end, sedangkan name adalah untuk back-end. Sekarang kita coba tambahkan name emailsaya dan password saya.

Kita refresh browser dan kita coba masukan data email abc. Sedangkan password def. Kita tekan tombol Login.

Dan kemudian kita bisa lihat di URL, bahwa nilai yang kita masukan tadi dikirimkan ke server melalui URL-nya ya. Hal ini disebabkan karena form kita menggunakan method GET. Di bagian belakang URL kita bisa melihat bahwa browser menambahkan variabel dengan nama emailsaya yang isinya abc. Emailsaya adalah name dari textbox email, sedangkan abc adalah nilai yang kita isikan sebelum kita menekan tombol login. Dan berikutnya kita juga bisa melihat nilai dari passwordsaya.

Dalam prakteknya, biasanya ID dan Name diisikan dengan nilai yang sama ya. Dalam contoh disini bisanya nilai ID adalah email dan nilai name juga sama email. Namun saya ingin memperjelas perbedaan dari kedua attribute tersebut, jadi di contoh ini kita menggunakan ID emailku dan Name emailsaya. ID emailku digunakan untuk menunjuk ke tag tersebut dari front end, misalnya kita mau menghubungkannya dengan label, maka pada label kita tambahkan attribute for=”emailku”. Sedangkan Name emailsaya akan digunakan oleh backend untuk mengakses nilai dari textbox email.

Yang menjadi kekurangan pada form ini adalah, pada saat kita mengisikan nilai def pada password, browser secara otomatis menutupi nilai tersebut dengan icon lingkaran. Namun pada saat dikirim ke server, nilai password kita malah dituliskan pada URL, sehingga bisa ketahuan oleh orang lain. Oleh karena itu, biasanya developer lebih suka menggunakan method POST. Sebagai contoh kita coba ubah method menjadi POST.

Kita coba kirim data yang sama abc dan def. Disini kita bisa lihat bahwa setelah menekan tombol Login, maka browser mengirimkan seluruh data kita ke server, namun bukan melalui URL ya. Jadi pengunjung situs tidak bisa melihat data yang dikirim. Dan berhubung kita masih belum mempelajari back-end development, kita juga belum bisa memproses data tersebut.

Kita kembalikan lagi method menjadi GET. Tadi pada saat membuat button login, saya mengatakan bahwa ada 2 cara untuk membuat tombolnya. Disini kita sudah mempelajari mengenai cara membuat button menggunakan elemen Input. Sekarang kita coba membuat button menggunakan elemen Button.

Caranya adalah kita membuat tag pembuka button dengan attribute type=”submit”. Setelah itu kita isikan kontennya dengan kata Login. Dan kita buat tag penutup button. Dan kalau kita refresh browser kita, kita akan mendapatkan 2 buah tombol yang fungsinya sama.

Apa perbedaan dari tombol elemen Input dan tombol elemen Button? Kita lihat kembali ke kode kita. Perbedaan yang paling besar adalah Input merupakan void element. Jadi kita tidak membuat tag penutup input. Sedangkan isi dari tombol kita tuliskan di dalam attribute Value. Kelemahan dari attribute value adalah nilainya hanya bisa teks saja, kita tidak bisa menambahkan tag HTML. Sebagai contoh, saya tambahkan tag

di kedua tombol. Dan kita refresh browser untuk melihat hasilnya.

Tombol yang menggunakan elemen Button bisa dengan benar menampilkan tag header, sedangkan tombol yang menggunakan elemen Input malah menuliskan tag tersebut ke dalam tombol. Oleh karena itu elemen button menjadi lebih sering digunakan ya. Karena kita lebih fleksibel untuk menuliskan isi dari tombol tersebut. Dalam prakteknya, sering kali developer menambahkan icon atau gambar ke dalam tombol. Framework yang paling popular untuk melakukan hal ini adalah fontawesome. Nantinya akan kita bahas lebih detil lagi pada bagian CSS.

Kita review kembali apa yang telah kita pelajari pada video ini.

Untuk meminta masukan dari pengunjung situs, kita harus menggunakan tag form. Nantinya semua kontrol yang akan berinteraksi dengan pengunjung harus ditaruh di dalam tag form. Tag form memiliki 2 buah attribute yang sering digunakan. Yang pertama adalah action, yang bisa diisikan dengan alamat URL yang akan dikirimi data. Apabila kita tidak mengisikan attribute action, maka secara default data akan dikirim ke alamat yang sama dengan halaman sekarang. Attribute kedua adalah method, yang bisa diisi dengan GET atau POST. Apabila menggunakan method GET, maka semua data dikirimkan dalam bentuk URL sehingga lebih gampang dibajak oleh pihak luar. Apabila Anda hendak meminta data penting dari pengunjung situs, gunakanlah method POST.

Tag label digunakan untuk mendefinisikan data apa yang diminta dari pengunjung. Tag label memiliki attribute for, yang bisa kita isikan dengan id dari kontrol yang akan terhubung dengan label tersebut. Jadi nantinya apabila pengunjung mengklik teks pada label, maka browser akan memindahkan fokus ke kontrol yang bersangkutan.

Tag input digunakan untuk membuat kontrol yang akan meminta data dari pengunjung. Attribute type bisa kita isikan dengan jenis input yang hendak kita gunakan, dalam contoh ini kita sudah melihat type text, password dan submit. Dalam video berikutnya kita akan membahas secara khusus mengenai tag input, dan melihat lebih banyak lagi type input yang bisa kita manfaatkan untuk membangun situs kita. Tag input bisa kita tambahkan dengan attribute id, yang berisi nama yang bisa digunakan oleh frond-end untuk mengakses tag ini. Dan kita bisa menambahkan attribute name, yang berisi nama yang akan digunakan oleh back-end untuk mengakses nilai dari tag ini.

Dan yang terakhir kita telah belajar mengenai tag Button. Tag ini digunakan untuk membuat tombol. Kita bisa menggunakan tag html untuk menuliskan teks yang akan ditampilkan di dalam tombol tersebut. Nantinya kita akan belajar lebih banyak kegunaan dari button, pada saat kita mempelajari mengenai Javascript.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.