Adobe Dreamweaver İle Form Oluşturma

Adobe Dreamweaver İle Form Oluşturma

Bir ziyaretçi web tarayıcısında görüntülediği bir web formuna bilgi girip gönder düğmesini tıkladığında, bilgiler sunucu tarafı komut dosyası veya uygulaması tarafından işleneceği sunucuya gönderilir. Sunucu, işlenen bilgileri kullanıcıya (veya istemciye) geri göndererek veya formun içeriğine dayalı başka bir eylem gerçekleştirerek yanıt verir.
PHP, ASP ve ColdFusion dahil olmak üzere çoğu uygulama sunucusuna veri gönderen formlar oluşturmak için Dreamweaver'ı kullanabilirsiniz. 
Öncelikle yeni bir HTML dökümanı oluşturalım . 

Design ( Tasarım ) çalışma sayfası görünümündeyim . 

Menülerin altında yer alan sekmelerden Form sekmesini tıklıyorum . 

Form menüsü altında birçok komut ikonu ile karşılaşıyorum . Peki ama bu form dediğimiz nedir ?

Web sayfalarının iletişim bölümleri , üyelik formları ,üye giriş alanları , anketler , üye kaydı sayfaları gibi ziyaretçilerden bilgi girişi yapmaları beklenilen ve yapılan bilgi girişleri o web sitesinin yöneticisine iletilen sayfalar formlardır . 

Şimdi form nesnelerini tanımaya ve uygulamalı olarak oluşturmaya başlayalım . 

Örneğin bir iş başvuru formu oluşturalım . 

İş Başvuru Formu yazarak başlık formatında biçimlendirelim . 

Form bilgileri aynı alan içerisinde kodlanmalıdır ki , ilgili ziyaretçiye ait bilgiler tek seferde , tek alanda yönteciye aktarılabilsin . 

Bu yüzden öncelikli adımımız Form alanı oluşturmak olacaktır . Form menüsünün ilk seçeneği Form komutunu tıklayalım . 

Form komutunu tıkladığımızda çalışma alnımızda kırmızı çerçeveli bir alan oluşacak ve ben tüm form nesnelerini bu alan içerisinde oluşturacağım . 


Daha düzenli bir form görünümü için bu alanın içerisine tablo oluşturalım . Eğer tablo oluşturmazsak form nesneleri düzensiz görünebilir . 

Common sekmesine gidip Table komutu ile 2 sütun 10 satırdan oluşan bir tablo oluşturuyorum . Sizler oluşturacağınız forma göre satır ve sütun sayılarını belirleyebilirsiniz . 

Şimdi ise bir iş başvuru formunda olmasını istediğimiz alanları düşünelim . 

Tablomuzun ilk sütununa ( sol sütun ) başlıklarımızı yazalım . İkinci sütununa ( sağ sütununa ) ise form nesnelerimizi oluşturalım . 

Oluşturmuş olduğum form alanının içerisinde bulunan tablomda alan alan başlıklarımı belirledim . 

Ad , Soyad vb alanlar standart harf , rakam değerlerinin girileceği alanlardır . 

Bunun için Form sekmesi altında Text Field ( Yazı Alanı ) öğesini tıklıyorum . 

Text Field ( Metin ) form nesnesini Ad soyad , Tc , Doğum Yeri , Mail alanları için kullanacağım . 

Örneğin Tc alanına 11 karakterden fazla veri girişi yapılmasını istemiyorum . Bu yüzden Tc alanına ait text alanı seçili iken Properties ten Max Length ( max girilecek değer sayısı ) alanına 11 yazıyorum . 

Bu özelliği tanımladıktan sonra klavyeden yapılacak veri girişi 11 den fazla olmayacaktır . 


Cinsiyet alanı için tekli seçim yapmamızı sağlayan Radio Button form nesnelerini kullanmak istiyorum . 


Radio Button ( Radio Düğmesi ) form nesnesini tıkladım . Ardından imlecimin bulunduğu yere radio buttonum yerleşir . 


Radio Button ilk eklendiği zaman otomatik olarak Radio button yazısı gelir . Ben bu yazıyı silerek , kendi istediğim yazımı yazarım . Ben ilkini kadın , ikincisine Erkek yazıyorum . 

Başvurulacak Pozisyon alanına ise ziyaretçinin birden fazla seçim yapabileceği CheckBox form nesnesini kullanacağım . 

Check Box ( Onay Kutusu ) form nesneleri de ilk eklendiğinde otomatik olarak Check Box yazısı gelir . Ben bu yazıyı silerek , kendi istediğim yazımı yazarım .


Başvurulmasını istediğim iş pozisyonlarını belirledim .

Mezuniyet alanı için ise açılan liste tanımlamak istiyorum . 


Form öğeleri alanından Select List Menü ( Seç ) nesnesini seçiyoruz . Seçtiğimiz anda imlecimizin bulunduğu yere nesne ekleniyor . 


Seçim Listesinin hemen yanında otomatik olarak Select yazacaktır . Bu yazıyı silelim . 

Ardından liste değerlerini tanımlamak için seçim listesi seçili iken Properties te bulunan List Values ( Liste Değerleri ) seçilir . 



Karşıma liste değerlerini yazacağım bir pencere açılacaktır . 


Sıra ile listede yer almasını istediğim verileri etiket ve değer alanına yazıyorum . + işaretini tıklayarak yeni değerler eklemek istediğimi belirtiyorum . 


Liste öğelerim bittiğinde ise Tamam diyerek listemin tamamlandığını bildiriyorum . 

Çalışma sayfamı kaydedip , önizleme yaparak listemi görüntüleyebilirim .


Şimdi adres alanı için Textarea nesnesini seçiyorum .  Uzun veri girişleri için kullanılan form öğesidir . 


Otomatik olarak gelen Text Area yazısını siliyorum . 

Ardından forma yapılan veri girişlerini yöneticiye iletecek olan Buton u ekleyeceğim . 

İmlecimi konumlandırdıktan sonra Gönder nesnesini seçiyorum .


Gönder butonuna tıkladığımızda , ziyaretçinin girdiği bilgilerin gönderisinin yapılabilmesi için PHP , ASP gibi programlama bilgisi gerekmektedir . 

Şimdi oluşturduğumuz formu kaydedip , tarayıcı üzerinde görüntüleyebiliriz .