Anda di halaman 1dari 6

Membuat Form dengan Dreamweaver

2010 © http://adriansyah.web.id

Berikut ini tahapan singkat cara membuat form dengan Dreamweaver tanpa menuliskan
kode HTML. Cukup klik-klik aja. Untuk screenshot saya menggunakan versi jadul yaitu
Dreamweaver MX 2004. Tapi, pada dasarnya sama kok.

Oke langsung saja. Anggaplah kita akan membuat form pada halaman form.php dengan
tampilan :

Setelah form.php dibuka, ikuti langkah berikut untuk membuat form :

1. Tambahkan form melalui menu Insert  Form  Form


Maka akan mucul kotak dengan titik-titik berwarna merah.

2. Isikan Properties yang terletak di bagian bawah. Isian yang wajib diisi adalah Action
dan Method. Action adalah halaman tujuan kemana isi form dikirim, sedang method
adalah metode pengiriman (POST atau GET).

Pada contoh gambar di atas, Action berisi proses.php dan Method dipilih POST.

3. Tambahkan table (jika perlu). Pilih menu Insert  Table. Untuk contoh kasus kali ini,
kita akan menambahkan tabel dengan pengaturan sebagai berikut :
Selanjutnya, isikan Tabel sehingga berbentuk sebagai berikut :

4. Selanjutnya adalah memberikan isian (input) form.


a. Tempatkan kursor di cell sebelah kanan Nama, kemudian pilih Insert  Form 
Textfield.

b. Setelah itu akan muncul suatu input berbentuk TextField. Klik kanan textfield
tersebut, pilih Name.
c. Isikan Name sesuai dengan input data yang akan dikirim. Untuk contoh kita kali
ini, isikan name dengan nama, kemudian tekan OK.

Dengan cara serupa, kita dapat membuat input untuk email. sehingga didapat
hasilnya sebagai berikut :

5. Untuk input Pesan, kita akan membuat input berupa textarea. Caranya sama :
a. Tempatkan kursor di cell sebelah kanan Pesan, kemudian pilih Insert  Form 
Textarea

b. Setelah itu akan muncul suatu input berbentuk Textarea. Klik kanan textarea
tersebut, pilih Name.
c. Isikan Name sesuai dengan input data yang akan dikirim. Isikan name dengan
pesan, kemudian tekan OK.

6. Selanjutnya, kita akan menambahkan Button (tombol). Caranya dengan memilih


Insert  Form  Button

Klik kanan button yang baru saja kita buat, kemudian pilih Label. Isikan Label dengan Kirim
dan tekan OK, maka tulisan pada button akan berubah menjadi Kirim
7. Dan berikut ini hasil akhirnya :

(pada Dreamweaver)

(pada browser)

Demikian cara mudah membuat form dengan Dreamweaver. Gampang kan?! 