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 :
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 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....
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.
Sebelum membuat form kita harus kenali dulu elemen-elemennya :
1. Form
Kalau ingin membuat form awali dulu dengan mengklik elemen ini. Maka akan tampil garis putus-putus berwarna merah sebagai tanda bahwa form telah dibuat.
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.
Kali ini saya akan memberikan contoh cara membuat form yang seperti ini :
Step 1
Buat dokumen baru di Macromedia Dreamweaver.
Step 2
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.
Form Name : Form_Coba
Action : #
Method : POST
Target : _blank
Properti-properti form tersebut diatur agar kelak dapat berjalan sebagaimana mestinya. Berikut penjelasan tentang properti-properti tersebut :
- 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.
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
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....