Membuat form dengan dreamweaver

Membuat form dengan dreamweaverMembuat 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 :

membuat form dengan dreamweaver

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 :

  1. Buat sebuah halaman baru (ctrl+n), boleh html atau jenis yang lainya (php, asp, jsp sesuai keperluan)
  2. 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.
    tampilan membuat form
  3. Kemudian klik pada garis merah tersebut, dan lihat pada bagian properties (dibawah), lihat gambar :
    membuat form dengan dreamweaver

    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.
  4. 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.
    membuat form dengan table
  5. 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)
    desain table untuk form
    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 :
    tampilan form
  6. 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.
    membuat form bagus
    Kenapa diabaikan, karena option ini digunakan jika anda menyusunya dengan css. Setelah anda cancel maka akan muncul sebuah text seperti gambar :
    langkah membuat form
    Klik pada text, dan lihat pada properties yang ada dibawah dreamweaver :
    membuat form
  7. 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.
  8. 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.
  9.  Untuk mengisi pilihan list/menu, klik objek list kemudian tekan list values yang ada di properti bar, silahkan isi seperti gambar :
    membuat form rapi
    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.
  10. Hasil akhir form bisa anda lihat berikut :
    membuat form registrasi
     

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 **

Artikel Lainnya

  • Free online form generator
    Anda kesulitan membuat form dari html, atau udah coba membuat tapi tampilanya kurang menarik? Mungkin ini solusinya membuat form gak pakai lama, gratis dan hasilnya bisa kita gunakan langsung untuk aplikasi web tanpa harus memikirkan lagi kode html maupun cssnya. Berikut ini situs online yang menyediakan fasilitas form generator secara gratis.
  • Mengatur warna tabel dengan dreamweaver
    Sebelumnya saya sudah membahas tentang bagaimana membuat tabel dengan dreamweaver, berikut ini lanjutanya tentang bagaimana mengatur warna tabel dengan dreamweaver. Saya akan bahas tentang cara memberi warna pada tabel utama, mengganti warna baris atau kolom, mengganti posisi serta pengaturan lainnya yang berhubungan dengan tabel menggunakan fasilitas yang sudah disediakan.
  • Cara mengganti jenis huruf di blog atau website dengan font unik dengan cufon font
    Dengan kemajuan teknologi web yang sangat pesat, sekarang jenis tulisan atau font untuk web atau blog sudah bisa diganti sesuai keinginan. Kalau sebelumnya jenis tulisan yang ada di blog atau web kita hanya sebatas font atau jenis tulisan standar yang ada diinternet saja, kini sudah bisa lebih variasi sesuai selera pemilik blog atau webnya.
  • Tampilan web terbaik
    Jika saya ditanya apa tampilan web terbaik? saya pasti akan menjawab panjang lebar tentang tampilan web terbaik karena banyak faktor yang harus kita lihat, dan tentunya pasti ada tampilan web terbaik dan tampilan web terburuk.
  • Mengedit gambar dengan Adobe Dreamweaver CS3
    Mengedit gambar dengan Adobe Dreamweaver CS3. Tahukah anda bahwa Adobe Dreamweaver selain digunakan untuk menyusun layout halaman web dan menuliskan kode program berbasis web, juga bisa digunakan untuk mengedit gambar yang disisipkan dalam halaman web tersebut. Simak caranya berikut.

Kiriman terbaru