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

Komentar

Halaman Lainya

  • Membuat tabel dengan dreamweaver
    Dreamweaver menyediakan fasilitas yang sangat mudah dalam membantu para web desainer untuk menerapkan kreatifitasnya dalam hal desain visual halaman web termasuk penyusunan tabel dalam berbagai bentuk. Bagi anda yang baru mulai belajar dengan dreamweaver mungkin perlu baca tutorial berikut. Saya akan berbagi tentang bagaimana membuat tabel dengan dreamweaver.
  • Mengatur format tulisan dalam dreamweaver
    Mungkin masih ada yang bingung cara pengoperasian serta fungsi property bar untuk tulisan yang ada pada dreamweaver. Pada tutorial berikut ini saya akan menjelaskan langkah-langkah untuk membuat tulisan serta cara mengaturnya dengan dreamweaver.
  • Kriteria Desain web atau blog yang baik
    Sebuah website dapat dinilai memiliki desain yang baik apabila memenuhi kriteria penilaian tertentu yang mungkin saja berbeda tergantung dari sudut pandang penilai. Meskipun demikian, secara umum terdapat lima kriteria desain website/blog yang baik yang bisa digunakan sebagai acuan bagi Anda untuk membuat desain website/blog Anda sendiri atau hanya sekedar memperbaiki desain website/blog yang sedang Anda gunakan.
  • Template website gratis
    Template website gratis. Sekarang anda tidak perlu merepotkan diri untuk menyusun template website atau blog, karena sudah banyak template yang bisa anda dapat dengan gratis alias free. Kecuali anda memang ingin template web yang fresh, original, dan sesuai dengan web atau blog yang anda buat.
  • Membuat menu dengan icon seperti akun google
    Membuat menu seperti akun google. Yang punya akun google pasti sudah kenal tampilan menu seperti disamping ini. Jika anda sudah masuk ke layanan akun google, dan masuk ke menu produk maka akan terlihat menu layanan yang anda gunakan dalam bentuk daftar nama layanan serta ikon gambar kecil disampingnya.

Kiriman terbaru