Membuat form dengan dreamweaver
Membuat form dengan dreamweaver. Anda yang sudah terbiasa membuat form dengan aplikasi bukan visual (murni mengetik html), sepertinya perlu mempertimbangkan kembali dari segi efektifitas waktu membuat koding form. Karena banyak sekali pilihan aplikasi yang sudah tersedia lengkap dengan fitur-fitur super praktis yang dapat membantu kita menyelesaikan pekerjaan dengan mudah dan cepat, salah satunya adalah dreamweaver.
Sebelumnya saya pernah menulis tutorial tentang cara membuat form dengan html (lebih saya sarankan), ini bisa menambah pengetahuan buat anda yang masih tahap belajar membuat form agar lebih mengenal perintah-perintah yang digunakan dalam menyusun form. Jika anda sudah agak mahir, atau anda memiliki kasus yang lebih rumit dengan objek form yang lebih banyak maka saya sarankan membuatnya dengan bantuan aplikasi visual seperti dreamwaver.
Saya tidak perlu mengenalkan lagi aplikasi yang satu ini, minimal anda pasti sudah pernah mendengarnya. Kali ini saya akan memandu anda dalam membuat form dengan dreamweaver.
Langkah-langkah membuat form dengan dreamweaver
Seperti sudah anda ketahui, objek form yang bisa kita gunakan dalam html sudah sangat cukup bahkan berlebihan karena kadang kita tidak menggunakan semuanya. Objek-objek tersebut adalah : text, radio button, checkbox, button, list/menu, file field dll. Semuanya juga sudah disediakan oleh dreamweaver. SIlahkan anda lihat pada sub menu insert --> form seperti gambar berikut :
Jika anda lihat diatas (kotak merah) itu adalah objek form yang bisa kita sisipkan dalam halaman web (html). Kita akan coba membuat form data mahasiswa dengan menyisipkan objek2 tersebut dalam sebuah halaman dengan langkah-langkah berikut :
- Buat sebuah halaman baru (ctrl+n), boleh html atau jenis yang lainya (php, asp, jsp sesuai keperluan)
- Kemudian pilih menu insert - form - form
Langkah ini akan digunakan untuk membuat definisi paket data yang akan dikirimkan. Setiap form wajib membuat ini. Secara visual akan menghasilkan garis titik-titik merah. Nanti semua objek form harus berada dalam kotak tersebut.
- Kemudian klik pada garis merah tersebut, dan lihat pada bagian properties (dibawah), lihat gambar :
Silahkan anda sesuaikan isian seperti diatas. Form name adalah nama form (opsional), action adalah tujuan form diproses, target adalah tujuan halaman/frame diproses, method terdiri post dan get. Pilih post untuk form dengan fungsi mengirim dan pilih get untuk model mengambil data. - Langkah berikutnya adalah mulai mendesain form dan memasukkan objek2 form yang kita perlukan. Kita akan buat desain form yang sederhana dengan membuat judul form terlebih dahulu :
Anda bisa ketikkan judul misal : Data Mahasiswa. Kemudian format tulisan diubah menjadi h1.
- Untuk mempermudah penyusunan layout form, kita gunakan tabel. Pilih menu insert - table, silahkan isikan nilai-nilai seperti pada gambar. (anda bisa sesuaikan dengan bentuk lain)
rows diisi sejumlah objek form yang akan dibuat misal 6. Kolom diberi nilai 3, dengan asumsi kolom 1 untuk judul input, kolom 2 untuk tanda titik 2, kolom 3 untuk objek form. Lebar asumsi 500px, cellpadding adalah jarak antara kotak cell dengan objek. Kemudian tekan ok. Maka akan menghasilkan tabel, kemudian aturlah dan isi tabel agar tampilanya seperti berikut :
- Kemudian pindah posisi kursor ke baris nim kolom ke 3, kemudian pilih menu insert - form - textfield
Kemudian akan muncul window seperti gambar berikut. TEKAN CANCEL untuk mengabaikan.
Kenapa diabaikan, karena option ini digunakan jika anda menyusunya dengan css. Setelah anda cancel maka akan muncul sebuah text seperti gambar :
Klik pada text, dan lihat pada properties yang ada dibawah dreamweaver :
- Isikan pada isian textfield berupa nama objek (tidak boleh ada spasi) misal : nim. Char width diisikan nilai panjang kotak isian senilai karakter misal 20, Max char diisi nilai maksimal isian (boleh sama, boleh juga berbeda jika diperlukan) misal 20. Kemudian ada pilihan single line yang artinya hanya untuk satu baris, multi line untuk banyak baris (sama dengan text area), password jika isian berbentuk bintang.
- Lakukan hal yang sama untuk baris berikutnya (Isian Nama), Untuk isian alamat, kita bisa pilih insert - form -textarea. Untuk Jenis Kelamin pilih radio button, untuk agama pilih list/menu.
- Untuk mengisi pilihan list/menu, klik objek list kemudian tekan list values yang ada di properti bar, silahkan isi seperti gambar :
Kemudian tekan oke. Terakhir tambahkan tombol, pilih menu insert - form - button. tambahkan 2 tombol, 1 difungsikan untuk submit, yang ke dua difungsikan untuk reset form. - Hasil akhir form bisa anda lihat berikut :
Form sudah selesai. Anda bisa berkreasi sesuai kebutuhan. Anda juga bisa membuat form tanpa bantuan tabel tapi dengan bantuan css. Silahkan baca tutorial membuat form tanpa tabel.
Selamat mencoba dan semoga bermanfaat
Zainal Hakim
** Bebas disunting dengan menyebutkan sumber **