Membuat Halaman Form Pendaftaran (HTML)

Membuat Halaman Form Pendaftaran (HTML) Pada kali ini kita akan belajar membuat sebuah form pendaftaran dengan menggunakan HTML. Form seperti ini sangat berguna bagi sebuah website, Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif, karena akan mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, formulir pendaftaran, survey, meminta komentar dan lain sebagianya. Untuk membuat sebuah form dalam HTML, dibutuhkan beberapa baris inputan atau yang biasa disebut komponen form. Komponen-komponen form ini berfungsi sebagai tempat input data yang akan dilakukan oleh user dan akan diproses selanjutnya. Adapun aturan penulisan script untuk membuat form dalam HTML adalah sebagai berikut Form

.... elemen input ....

Dalam formulir bentuk kertas banyak kriteria penulisan yang bisa dilakukan diantaranyamengisi dengan huruf, karakter, simbol, memilih satu pilihan, dan memilih lebihdari satu. Form (web) juga mentranformasikan ke dalam bentuk elemen-elemen input. Berikut adalah elemen-elemen input dalam tag form : 1. Textfield Username : Komponen text ini biasanya dipakai ketika kita melakukan pendaftaran account di kolom nama,dll. Adapun Komponen text ini hanya dapat digunakan untuk menuliskan kata dalam satu baris saja. 2.Password Password : Dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password. 3.Checkbox Hobi Basket Sepak bola Inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi. 4.RadioButton Pria Wanita Jenis Kelamin : Pria Wanita Mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin. 5.ComboBox Januari Februari Maret ..... Pilih Bulan Lahir : Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember Dalam Select ini user akan diminta memilih satu pilihan dari beberapa pilihan yang ditampilkan secara dropdown. Biasanya digunakan untuk mem.asukkan tanggal lahir, dll. 6.Text Area Masukkan Alamat Rumah : Alamat Rumah Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak baris misalnya seperti alamat rumah atau suatu keterangan objek. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS. 7.File Pilih Foto : Tag input dengan atribut type=”file” adalah objek form yang digunakan untuk upload file seperti gambar, audio, video, document, dll . Pemrosesan upload sendiri akan banyak melibatkan web server (menggunakan PHP). Saya tidak akan membahasnya pemograman PHPnya, namun akan fokus pada kode HTML yang diperlukan. 8.Button Komponen form yang terakhir adalah Button yang terdiri dari Submit dan Reset. Submit merupakan komponen form yang digunakan untuk mengirim data inputan menuju proses selanjutnya sementara Reset adalah komponen form yang digunakan untuk menghapus semua data yang telah dimasukkan oleh user. Akhirnya, Sebuah Form Utuh Merangkum seluruh tag form HTML yang telah kita bahas diatas, maka saatnya untuk membuat sebuah form HTML. Berikut adalah contoh form HTML :

E-Learning AKN.com   Mendaftar Nama Username    @akn.com Password Konfirmasi Password Tanggal Lahir Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember

Jenis Kelamin
Pria Wanita
Alamat

Agama
Islam kristen katholik budha Hindu Kepercayaan
Berat Badan
Kg
Tinggi Badan
Cm
Hobby
Futsal
Basket
Menggambar
Bersepeda
shoping
Kewarganegaraan
WNI WNA Campuran
Telepon

Upload foto

  Dan ini adalah tampilan hasil dari script di atas @AKN E-Learning AKN.com Mendaftar Nama Username @akn.com Password Konfirmasi Password Tanggal Lahir Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember Jenis Kelamin Pria Wanita Alamat Agama Islam kristen katholik budha Hindu Kepercayaan Berat Badan Kg Tinggi Badan Cm Hobby Futsal Basket Menggambar Bersepeda shoping Kewarganegaraan WNI WNA Campuran Telepon Upload foto Di dalam pembahasan form html kali ini kita telah mempelajari cara membuat form sederhana dan membahas tentang komponen-komponen yang terdapat pada tag form, walaupun data form yang diupload tidak bisa ditangani dengan HTML saja, namun harus melibatkan bahasa pemograman web seperti PHP.