Dreamweaver Form Nesneleri ve islevleri
..:: Dreamweaver 8 Form Nesneleri ve İşlevleri ::..
Text Field: Insert > Form > Text Field yönergesini izleyerek belgenize ekleyebilirsiniz. Web’de gördüğünüz formların ana unsurudur. Kullanıcı adı, parola, yaş, adres vb. gibi birçok veri bu yolla alınır. Text Field’i ekledikten sonra bir kez tıklayalım ve Properties panelinde özelliklerini belirleyelim.
Text Field : Formu Web üzerinden göndereceğimiz zaman mail programları bu kutucuğa yazılan isme göre veriyi adlandırırlar. Bu kutucuğa “email” yazdığınız taktirde bu kutucuktan girilen verinin başlığı ”email” olacaktır.
Char width : Text kutusunun kaç karakter uzunluğunda olacağını belirtebilirsiniz.
Max chars : En fazla kaç karakter girileceğini belirleyebilirsiniz.
Type : Formun tipini seçmek için 2 seçenek var. Single ve Multi Line.
Single line : Tek satır veriler içindir. Örneğin yaş, isim, mail adresi vb. gibi.
Multi line : Uzun veriler içindir. Örnek: Sitemiz hakkındaki düşünceleriniz. Bu konuyu insanlardan bir satırda anlatmasını bekleyemeyiz. Bunun için Multi Line seçeneğini seçeceğiz. Bu seçeneği seçtiğimiz Text Field’in Textarea’ya dönüştüğünü
göreceksiniz.
Password : Eğer bu formdan alacağınız veri bir şifreyse bu seçeneği seçin. Bu seçeneği işaretlediğinizde metin kutusuna girdiğiniz veri noktalar şeklinde görünecektir.
Init val : Eğer formun varsayılan halinde içinde birşeyler yazmasını istiyorsak bu metin kutusunu kullanacağız.
Class : Form için bir CSS atadıysak buradan seçeceğiz veya Properties panelinden biçimlendireceğiz.
Buton: Web sayfalarında kullandığımız Yolla, Kaydet, İptal, Sil benzeri butonlardır. Insert > Form > Button yönergesini kullanarak ekleyelim ve bir kez tıklayıp Properties paneline gelelim, butonumuzun özelliklerini ayarlayalım.
Button name : Butonumuzun ismi.
Label : Etiketi.
Action : Butonumuzun işlevi.
Submit form : Onay butonu. Ok, Gönder, Tamam tarzı olumlu işlevler yapcaksanız bu seçeneği işaretleyin.
Reset form : İptal, Reset, Sil gibi olumsuz işlevleri yapmak için Reset form seçeneğini işaretleyin. Bu butona tıkladığımızda formun içeriği silinecektir.
None : Bu işlevlerin haricinde butona script atayacaksanız, Behaviors panelinden yönlendirecekseniz None seçeneğini işaretleyin.
Class : Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.
Check Box: Bu form unsuruna örnek vermek istersek; insan kaynakları sitelerine üye olduğunuzda ilgi alanları vb. gibi sorular ile karşılaşırsınız. Bunlar resimde de göreceğiniz gibi Alış-Veriş, Seyahat, Spor, Otomobil, Bilgisayar vb. gibi konular olabilir. Sizde istediklerinizi işaretlersiniz. Birden fazla seçeneği işaretleyebilirsiniz. Insert > Form > CheckBox yolunu izleyerek belgemize ekleyebiliriz.
CheckBox name : CheckBox ismi.
Checked value : Formu Web üzerinden göndereceğimiz zaman mail programları bu kutucuğa yazılan isme seçeneği işaretler.
Initial state : Formumuzun varsayılan halidir.
Checked : İşaretlenmiş haldir. Resimde Alış – Veriş ile Spor
Unchecked : İşaretlenmiş haldir. Resimde Otomobil ile Seyahat
Class : Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.
Radio Buton: Anket ve online deneme sınavlarının temeli olan şıklar, Radio Button ile yapılmaktadır. Check Box’tan farkı sadece bir seçeneğin işaretlenmesidir. Insert > Form > Radio Button yolunu izleyerek belgemize ekleyebiliriz.
Radio Button : Radio Buton ismi.
Checked value : Bu form online olarak gönderildiği zaman Checked value metin kutusuna gireceğiniz değer gönderide görünecektir. Örnek: "İ" şıkkı ise bu alana "İ" yazacağız ve giden gönderide "İ" şıkkının işaretlendiği anlaşılacaktır.
Initial State : Formumuzun varsayılan halidir.
Checked : İşaretlenmiş haldir.
Unchecked : İşaretlenmiş haldir.
Class : Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.
List / Menu: Web sitelerinde görmüşüzdür, “bizi destekleyen siteler” şeklinde ibareler vardır. Ve bu bir liste menü halinde sayfaya eklenir, listedeki her nesneye link verilir. İşte bu form unsuru ile bizde listeli menüler hazırlayacağız. Insert > Form > List/Menu yönergesini izleyerek belgemize ekleyelim.
List/Menu : List / Menu adı.
Type : Formumuzun tipi.
Menu : Menü biçiminde form.
List : Liste biçiminde form.
Height : List Menünün büyüklüğü.
Selection : Seçim.
Allow Multiple : Bu sekmeyi işaretlediğiniz taktirde menü bir kaydırma çubuğu ile yönlendirilecektir.
Initial selected : Formun varsayılan halinde hangi değerin en üstte olacağını buradan seçerek belirleyebilirsiniz.
List Values : Listemize ekleyeceğimiz değerleri bu butona tıkladıktan sonra gelen pencere yardımıyla ekleyeceğiz.
Class : Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.
+ butonuna basarak değer ekleyebilir, – butonu ile de değer silebilir ve yön tuşları ile listedeki değerlerin dizilim sıralarını değiştirebiliriz.
File Field: Web’de bir dosya upload ederken kullandığımız File Upload formunu Insert > Form > File Field yönergesini izleyerek belgemize ekleyebiliriz.
FileField name : Formun ismi.
Char width : Text kutusunun kaç karakter uzunluğunda olacağını belirtebilirsiniz.
Max chars : En fazla kaç karakter girileceğini belirleyebilirsiniz.
Class : Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.
Jump Menu: Daha önceden yapmış olduğumuz List/Menu formunun javaScript ile işlenmiş biçimini bir başka ad altında göreceğiz. Insert > Form > Jump Menu yönergesini izleyerek belgemize ekleyebiliriz.
Menu items : Menüdeki öğeler. + butonu ile öğe ekleyebilir, - butonu ile de öğe silebilirsiniz.
Text : Menüdeki öğeleri yazacağımız metin kutusu.
When selected, go to URL : Öğelerin gideceği adresler.
Open URLs in : Linklerin açılacağı hedef.
Menu name : Menümüzün ismi.
Insert go button after menu : Menüye go butonu ekle.
Select first item after URL Change : İlk öğe seçildikten sonra adrese git.