Yuk... Belajar Membuat Form

Bismillahirrahmanirrahim....

Wah lama juga ya... udah 2 minggu ga buat postingan tutorial....
Masih menggunakan software Dreamweaver versi apa saja, kali ini saya akan berbagi ilmu kepada kawan-kawanku tercinta tentang Yuk... Belajar membuat form.


Teman-teman yang masih newbie tentang pemprograman pasti bertanya-tanya apa sih tuh Form...
Form adalah salah satu komponen web yang biasa digunakan untuk menginput data-data.
Tugasnya form emang cuma untuk input data saja... ga lebih. Untuk proses menyimpan data, mengedit, menghapus, menampilkan data-data yang telah diinput oleh user diperlukan bantuan dari pemprograman server side contohnya PHP, ColdFussion, JSP, ASP, Java, dll.

2. Text Field
    Yaitu kotak input yang biasa digunakan   untuk menginput data-data yang tidak terlalu panjang. Misalnya Nama, Alamat Email, password dll

3. Hidden Field
    Yaitu bidang tersembunyi tempat mengumpulkan informasi tentang pengunjung lokasi

4. Text area
    Yaitu kotak input data juga yang sifatnya multiline/banyak baris yang biasa digunakan untuk menginput data-data yang cukup panjang misalnya keterangan.

5. Check Box
     Kotak input pilihan yang memungkinkan user memilih lebih dari satu pilihan yang disediakan


6. Radio Button
     Yaitu input pilihan bentuknya bulatan kecil dan hanya mengizinkan user untuk memilih satu pilihan saja dari beberapa pilihan yang disediakan

7. Radio Group 
    Yaitu beberapa radio button dalam satu daftar/kelompok

8. List Menu 
    Yaitu daftar pilihan tunggal dalam bentuk list/daftar
     
9. Jump Menu
    Yaitu daftar pilihan tunggal yang mengandung link pada setiap pilihannya.

10. Image Field
     Digunakan untuk menyisip atau memasukkan gambar

11. File Field
     Yaitu Kotak input data file yang disertai tombol browse

12. Button
     Digunakan untuk menyisipkan tombol-tombol, misalnya tombol submit, reset, save, dsb.
OK... udah kenal elemen-elemen formnya kan... kita  langsung saja ya...
Kali ini saya akan memberikan contoh cara membuat form yang seperti ini :


Klik tombol Form pada insert bar untuk memulai membuat form. Jangan lupa atur juga property inspectornya dan ubah nilainya, ingat, posisi kursor tetap pada area bingkai form ya.

• Name : Digunakan untuk memberi nama form
• Action : Digunakan untuk menunjuk file yang akan memproses data-data dari form
• Method : Menentukan pengiriman data-data dari form ke web server. Ada 2 metode yang sering digunakan yaitu Post dan Get. Metode Post akan mengirim data melalui HTTP header dan terpisah dari URL, sedangkan metode Get akan mengirimkan data bersama-sama dengan URL.
• Target : Digunakan untuk menentukan cara penampilan file pemproses data-data dari form. Ada dua pilihan target yang sering digunakan yakni _blank jika file ingin ditampilkan ke dalam jendela yang lain. dan _self bila ingin menampilkan file dalam jendela yang sama.

Step 3
Agar formnya terlihat rapi, buat table didalam form tersebut dengan properti Rows : 9, Cols : 3, Table Width : 72%, Align : Center, Bg Color : #FFCCFF (Warna background terserah kalian)

Step 4
Baris pertama kolom pertama ketik keterangan/label Nama Lengkap, tekan Tab untuk menuju ke baris pertama kolom kedua ketik tanda ":", tekan Tab untuk menuju baris pertama kolom ketiga klik tombol Text Field dibagian Forms Insert Bar.
 
Step 5 
Untuk Nomor  Kartu Identitas, langkah pembuatannya hampir sama dengan step 4. 

Step 6 
Untuk Tanggal Lahir hampir sama juga caranya dengan step 4 & 5, bedanya ditambahkan elemen List Menu. Jangan lupa atur property inspectornya.

• untuk Tanggal pengaturannnya antara lain Type : Menu,  untuk menginput angka 1 s/d 31 tekan tombol List Values maka akan tampil kotak dialog seperti dibawah ini, klik tanda + saja untuk menambah data setelah itu tekan tombol OK.  
•  Untuk Bulan dan Tahun caranya sama, tinggal input Januari s/d Februari untuk Bulan, dan 1945-2011 untuk Tahun

Step 7
Untuk Jenis Kelamin caranya hampir  sama seperti step-step sebelumnya bedanya ditambahkan Radio Group. Klik tombol Radio Group pada Form Insert Bar maka akan tampil kotak dialog seperti di bawah ini, klik  tanda + saja untuk menambah data setelah itu tekan tombol OK.

Step 8
Untuk Pendidikan Terakhir caranya hampir  sama seperti step-step sebelumnya bedanya ditambahkan List/Menu. Tapi pada pengaturan propertynya pilih Type : List. Untuk menambahkan data klik tombol List Values.

Step 9
Untuk Email caranya sama dengan step 4 & 5

Step 10
Untuk Tentang Anda caranya hampir sama dengan step 4 & 5 bedanya ditambahkan elemen Text Area.
 Jangan lupa atur propertinya Char Width : 30, Num Lines : 4, Type : Multiline

Step 11
Untuk tombol  Simpan dan Batal  klik elemen Button, untuk tombol Simpan atur propertinya sebagai berikut : Value : Simpan, Action : Submit Form, untuk tombol Batal atur propertinya sebagai berikut : Value : Batal, Action : Reset Form


OK kawan....
Sekian dulu tutorial saya kali ini.
Selamat mencoba ya....