Form Oluşturmak - BITEFO FETHIYE 2007

A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
11
Form
Oluşturmak
Kimi zaman Web sitenizi ziyaret eden insanlardan bilgi almanız gerekebilir. Bu bilgiler
içinde insanların siteyle ilgili düşünceleri, kullanıcı kayıt verileri, anket cevapları ve ürün
satın alma bilgileri (e-ticaret) sayılabilir. Farklı tipte bilgiler toplamaktan ziyaretçilerin
siteyle etkileşime girmesini sağlamaya kadar pek çok işleve sahip olan formlar, veri
elde etmenizi sağlayan kullanıcı arabirimleridir. Formlarla ziyaretçilerinizden belirli
konularla ilgili bilgi alabilir ya da onlara geribildirim, soru ya da istek gönderme imkânı
tanıyabilirsiniz. Ziyaretçi kayıt işlemleri ve ürün siparişleri genellikle formlarla sağlanan
bir işlevselliği gerektirir. Formlar veritabanlarıyla sıkça kullanılır ve ziyaretçilerin arama
yapmalarını ve bir veritabanına dahil edilecek bilgileri göndermelerini sağlayabilir.
Formlar alan (field) adı verilen ve ziyaretçinin bilgi girdiği bazı bileşenler içerir. Bu
alanların arasında metin alanlarını, radyo düğmelerini, onay kutularını, menüleri ya da
listeleri sayabiliriz.
Form verileri genellikle bir sunucu üzerinde yer alan bir veritabanına, bir e-posta
adresine ya da kendilerini işleyecek bir uygulamaya gönderilir. Formların işlenmesi,
Bu projede çeşitli metin alanları, onay kutuları, radyo
düğmeleri, Submit (Gönder) ve Reset (Sıfırla) düğmeleri
ve menü içeren bir form oluşturacaksınız.
dinamik sayfaların (bu sayfalar veritabanları gibi dinamik içerik kaynaklarına erişmek
için PHP, JSP, ColdFusion vb dilleri kullanırlar) ya da CGI (Common Gateway Interface)
script’lerinin kullanımıyla gerçekleştirilir. CGI, formdaki verilerle sunucu arasında iletişim
bağlantısı olarak görev yapan standart bir protokoldür. Bu derste ziyaretçilerin göreceği
bir form oluşturacaksınız. Dinamik sayfalar ya da CGI kullanmayacağınız için bu dersi
tamamlamak için bir sunucu erişiminizin olması gerekmeyecek.
Bu derste elde edilen sonucu görmek için Lesson_11_Forms/Completed/Training
klasöründeki training.html dosyasını açın.
Neler Öğreneceksiniz?
Bu derste şunları öğreneceksiniz:
• Bir Web sayfasında form oluşturacaksınız.
• Form içeriğini gruplara böleceksiniz.
• Erişilebilir formlar oluşturacaksınız.
• Tek satırlı metin alanları ekleyeceksiniz.
• Çok satırlı bir metin alanı ekleyeceksiniz.
• Onay kutuları ekleyeceksiniz.
• Radyo düğmeleri ekleyeceksiniz.
• Liste/menü öğeleri ekleyeceksiniz.
• Gizli alanlar ekleyeceksiniz.
• Düğmeler ekleyeceksiniz.
• CSS kullanarak bir formu biçimlendireceksiniz.
• Bir sıçrama menüsü oluşturacaksınız.
• Bir formu test edeceksiniz.
Yaklaşık Süre
Bu dersin tamamlanması yaklaşık 1 saat sürecektir.
Ders Dosyaları
Başlangıç Dosyaları:
Lesson_11_Forms/training/training.html
Tamamlanmış Proje:
Lesson_11_Forms/Completed/training/training.html
378 DERS 11
Formun Oluşturulması
Bir sayfaya alanlar ve düğmeler gibi elemanlar eklemeden önce bu elemanları içerecek
olan formu oluşturmak gerekir. Form; alanlar, düğmeler, menüler ve ziyaretçilerin bilgi
girmek ya da seçim yapmak için kullandığı diğer nesneler için bir taşıyıcı görevi üstlenir.
Formlar ayrıca gönderildiklerinde verilere ne olacağını belirler. Bu uygulamada form
alanını oluşturacaksınız.
1. Lesson_11_Forms/Training klasöründeki training.html belgesini açın. Ekleme
noktasını Yoga Teacher Certification Program Application metninin altındaki
boş paragrafın içine yerleştirin. Insert araç çubuğunun Forms kategorisindeki
Form düğmesine tıklayın.
Insert > Form > Form komutunu kullanarak da form ekleyebilirsiniz.
Forms kategorisi
Form düğmesi
Form tarafından kaplanan alan, belge penceresinde kırmızı noktalı çizgilerle gösterilir. Bu
alan kodda <form> ve </form> etiketleriyle tanımlanır. Söz konusu kırmızı çizgiler sadece
Dreamweaver’da görüntülenen görünmez elemanlardır. Sayfayı bir Web tarayıcısında
açtığınızda form alanını gösteren herhangi bir işaret göremezsiniz. Ayrıca bu kırmızı
çizgileri tutup sürükleyemezsiniz. Form alanının büyüklüğü, forma koyduğunuz elemana
bağlıdır ve içeriği kapsayacak şekilde yatay (tam genişlikte) ve düşey yönde (içerik sığacak
şekilde) büyür. Sayfaya yerleştirdiğiniz form, taşıyıcı elemanın (bu bir div, bir tablo hücresi
ya da sayfanın kendisi olabilir) tüm genişliğini kaplayacak kadar genişler.
Kırmızı noktalı çizgiler form tarafından işgal edilen
alanı belirtmektedir.
Form Oluşturmak 379
Eğer görünmez elemanlar etkin değilse bir mesaj kutusu belirecek ve formu
göremeyeceğinizi belirtecektir. OK düğmesine tıklayarak mesaj kutusunu
kapatın ve View > Visual Aids > Invisible Elements komutunu seçerek formun
kırmızı noktalı sınırlarını görüntüleyin. Eğer görünmez elemanlar etkin
durumdaysa bu uyarı mesajını görmezsiniz. Dreamweaver’ın Preferences
iletişim kutusunda yer alan Invisible Elements kategorisindeki Form delimiter
seçeneğinin de işaretli olması gerekir. Bu seçenek varsayılan durumda
işaretlidir.
Bir sayfaya birden fazla form yerleştirebilirsiniz. Ancak HTML’de bir formu diğer
bir formun içine yerleştiremezsiniz. Bu kısıtlamadan dolayı Dreamweaver formların
yanlışlıkla iç içe yerleştirilmesini engeller. Bunu da bir formun diğer formun içine
yerleştirilmesini imkânsız kılarak gerçekleştirir. Form ekleme seçeneği iptal edilmez, ama
bir formu diğer bir formun içine yerleştirmeye kalktığınızda bu işlem gerçekleşmez. Form
etiketlerinin başka bir forma elle eklenmesi durumunda Dreamweaver hatalı etiketleri
vurgulayarak dikkatinizi hatanın bulunduğu konuma çeker.
2. Kırmızı noktalı çizgiye tıklayarak formu seçin.
Eğer ekleme noktası formun içindeyse, formu seçmek için Etiket Seçici’yi de
kullanabilirsiniz.
Properties denetçisi, form özelliklerini görüntüleyecek şekilde değişecektir.
Eğer Properties denetçisi görünür durumda değilse, Window > Properties
komutunu seçin.
3. Properties denetçisinde yer alan Form metin alanındaki varsayılan isim olan
form1‘in yerine training yazın.
Dreamweaver formlar için genel tipte isimler oluşturur. Siz her form oluşturduğunuzda bu
formların isimleri sayısal olarak otomatik bir şekilde artar (form1, form2, vb). Bütün form
isimlerinin benzersiz olması ve ayrıca özel karakter içermemesi gerekir. Form isimleri
önemli tanımlayıcılardır (identifier); özellikle de bir sayfada birden fazla form varsa veya
form aracılığıyla istenen ya da toplanan bilgileri içeren bir veritabanı kullanıyorsanız.
Form isimleri ayrıca, JavaScript gibi script dilleri aracılığıyla formları kontrol etmek için
de kullanılır.
380 DERS 11
4. Ekleme noktasını forma yerleştirin ve Insert > Table komutunu seçin. Tablonun
satır sayısını (Rows) 3, sütun sayısını da (Columns) 1 olarak ayarlayın. Tablo
genişliği değeri (Table width) yüzde (percent) 90 olmalıdır. Border thickness
değerini 0, Cell padding değerini 0 ve Cell spacing değerini de 10 olarak
ayarlayın. Header menüsünde None seçeneğini işaretleyin ve OK düğmesine
tıklayın.
Tablo, formun yerleşim düzenini geliştirir. Tablo kullanmak, etiketlemek üzere metin ya
da resimlerin form alanlarıyla hizalanmasını kolaylaştırır.
Bir formun içine bir tablo ya da bir tablonun içine bir form yerleştirebilirsiniz. Ama
burada söz konusu tablo, formu tamamen kapsamalı ya da form tarafından tamamen
kapsanmalıdır.
Form İçeriğini Gruplamak
Formunuzun içeriğini oluşturmaya başlamadan önce biraz zaman ayırarak içeriğin ayrıntılı
bir taslağını oluşturmanız gerekir. Ziyaretçilerden isteyeceğiniz bilgilerin bir taslağını
oluşturduktan sonra bu bilgileri içerik benzerliğini temel alarak mantıksal gruplara
ayırabilirsiniz. Bu derste oluşturduğunuz form üç bölüme ayrılabilir: Contact Information,
Experience and Interests ve Send Your Answers. Formunuzun bölümlerini belirledikten
sonra formun içinde bu bölümleri oluşturmak için alan kümelerini (fieldsets) kullanmaya
hazırsınız demektir. Alan kümeleri, bir form içinde ayrı ayrı içerik bölümleri oluşturmak için
kullanılan form elemanlarıdır. Formunuzun içeriğini küçük ve bağımsız bölümler halinde
grupladığınızda ziyaretçilerin formu anlaması ve doldurması daha kolay olur. Böylece
ziyaretçileriniz formun genel yapısını hemen kavrayabilirler.
1. Ekleme noktasını önceki uygulamada oluşturduğunuz tablonun ilk satırına
yerleştirin. Insert araç çubuğunun Forms kategorisinde yer alan Fieldset
düğmesine tıklayın.
Fieldset
Fieldset iletişim kutusu açılacaktır.
Form Oluşturmak 381
2. Legend metin alanına Contact Information yazın ve OK düğmesine tıklayın.
Bir alan kümesi, kullanabileceği bütün alanı kaplayacak kadar genişler. Önceki
uygulamada oluşturduğunuz tablonun en üstteki hücresi alan kümesinin sınırlarını
oluşturma ve yerleşimi kontrol etme görevini üstlenir. Formlarda olduğu gibi alan
kümesini bir tabloya veya bir tabloyu bir alan kümesine yerleştirmek mümkündür.
Ama tablo alan kümesini tamamen kapsamalı ya da alan kümesi tarafından tamamen
kapsanmalıdır.
3. Ekleme noktasını ikinci satıra yerleştirin ve Insert araç çubuğundaki Fieldset
düğmesine tıklayın. Legend metin alanına Experience And Interests yazın ve
OK düğmesine tıklayın.
Bir alan kümesi için belirlediğiniz not, gösterge (legend) olarak da bilinir. Bu öğe, bölümle
ilgili bir açıklama olarak görev yapar (içeriğin tanımlanması için kullanılan bir yöntem).
Kendi formlarınızda alan kümeleri için gösterge oluştururken olabildiğince açık ifadeler
kullanın. Bu notların alan kümelerinin içeriğini tam olarak yansıtması gerekir.
4. Ekleme noktasını üçüncü satıra yerleştirin ve Insert araç çubuğundaki Fieldset
düğmesine tıklayın. Legend metin alanına Send Your Answers yazın ve OK
düğmesine tıklayın.
Alan kümesi, içeriğini soluk gri bir çizgiyle çevreler.
5. Dosyayı kaydedin ve Web tarayıcınızda önizleyin.
Bir sonraki uygulama için bu dosyayı açık bırakın.
382 DERS 11
Tek Satırlı Metin Alanları Eklemek
Metin alanları, ziyaretçinin yazarak girebileceği bilgileri toplamak için kullanılır. Kısa,
özlü cevaplar (bir sözcük ya da sözcük grubu gibi) için tek satırlı metin alanları kullanılır.
Normalde kullanılan tek satırlı metin alanları; ziyaretçinin isim, kısa adres ve e-posta gibi
bilgilerini girmesi için kullanılır. Bu metin alanları ayrıca temel arama işlemleri için de
kullanılır. Burada ziyaretçi, ilgili alana istenen bilgiyi tanımlayan sözcükleri girer.
Bütün form alanlarını ve düğmeleri kırmızı noktalı çizgilerin içine yerleştirmeniz gerekir,
aksi takdirde bunlar formun bir parçası olmaz. Form alanlarını kırmızı çizgilerin dışına
yerleştirmeye kalkarsanız Dreamweaver Yes ve No seçeneklerini içeren bir uyarı kutusu
görüntüleyerek bir form etiketi (form tag) eklemek isteyip istemediğinizi sorar. No
derseniz ilgili alan ya da düğmeler herhangi bir formun bir parçası olarak işlev görmez.
1. training.html belgesinde ekleme noktasını Contact Information metninin içine
yerleştirin. Etiket Seçici’yi kullanarak <legend> etiketini seçin, sağ ok tuşuna bir
kez basın ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Form nesnelerinin alan kümelerine eklenmesi gerekir (ama göstergenin içine değil).
Ekleme noktasını göstergenin sonuna ekler ve Return tuşuna basarsanız, ikinci bir legend
etiket grubu oluşturulur. İkinci bir legend etiket grubu olmamalıdır.
Form Oluşturmak 383
2. Insert araç çubuğunun Forms kategorisinde yer alan Text Field düğmesine
tıklayın.
Bunun için Insert > Form > Text Field komutunu da kullanabilirsiniz.
Text Field düğmesi
Input Tag Accessibility Attributes iletişim kutusu açılacaktır.
Erişilebilir formlar oluşturmak daha fazla ziyaretçiye ulaşmanızı sağlar. Ekran okuyucu
gibi yardımcı teknolojiler kullanmak zorunda olan kullanıcılar için erişilebilir nitelikler
kullanmak önemlidir. Eğer formunuzda bu nitelikler yoksa, bazı ziyaretçilerin formunuzu
doldurması zorlaşabilir. Varsayılan durumda Dreamweaver form eklerken erişilebilirlik
özelliklerini dahil etmeniz gerektiğini size bildirecektir.
Eğer Dreamweaver Input Tag Accessibility Attributes iletişim kutusunu
otomatik olarak açmazsa, form nesneleri için erişilebilirlik özelliklerini
etkinleştirmeniz gerekebilir. Bunun için Dreamweaver > Preferences
(Macintosh’ta) ya da Edit > Preferences (Windows’ta) komutunu seçin.
Accessibility kategorisine geçin ve Form objects onay kutusunu işaretleyin.
Sonra da OK düğmesine tıklayın.
384 DERS 11
3. Label metin alanına Full Name: yazın.
Notlar (labels) form nesnelerinizin (metin alanları, onay kutuları, vs) ne amaçla
kullanıldığını açık olarak tanımlayan bilgileri içerir. Böylece ziyaretçileriniz bu alanlara
hangi bilgiyi gireceklerini bilir. Notlarla tanımlamadığınızda formlar kafa karıştırabilir.
Not, hem ilgili metin alanının görsel bir açıklaması olarak belge penceresinde, hem de bir
nitelik olarak metin alanını tanımlayan HTML kodunda yer alır. Mümkün olan her yerde
kısa ve açıklayıcı notlar kullanmaya çalışın.
4. Style bölümünde Wrap with label tag seçeneğini işaretleyin. Position
bölümünde Before form item seçeneğini işaretleyin. Access key ve Tab index
metin alanlarını boş bırakın.
Wrap with label tag seçeneği, form nesnelerini bir not etiketiyle çevreler. Bu seçeneği
kullandığınızda form nesnesi her zaman belge penceresindeki metin notunun yanında
kalacaktır. Eğer form nesnesi taşınırsa, bu seçenek onun not etiketinden ayrılmasını önler.
Bu seçeneği kullanmadığınızda ekran okuyucu kullanan ziyaretçiler açısından ciddî bir
karışıklık söz konusu olabilir. Çünkü bu durumda not, taşınan form nesnesiyle artık
ilişkili olmaz. Kodda, bu yöntemle oluşturulan bir metin alanı belirecektir: <label>Full Name: <input type=”text” name=”textfield” /></label>.
Attach label tag using for attribute seçeneği, karşılık gelen metin alanıyla tanımlanan
(bir id aracılığıyla) bağımsız bir not oluşturur. Bu seçeneği kullandığınızda, form
Form Oluşturmak 385
nesnesini belge penceresinde kendisini açıklayan metinden ayırabilirsiniz. Böyle bir işleme,
yerleşim düzenini ayarlamak amacıyla gerek duyulabilir. Bu yöntem daha esnektir, çünkü
form nesnesinin kendine karşılık gelen metinden ayrılıp ayrılmamasına bağlı olmaksızın
çalışmaya devam eder.
Hangi Style yöntemini kullanacağınıza karar veremiyorsanız bunu seçin. Kodda, bu
yöntemle oluşturulan bir metin alanı belirecektir: <label for=”textfield”> Full Name:
</label> <input type=”text” name=”textfield” id=”textfield” />.
No label tag seçeneğini işaretlediğinizde Label (Not) seçeneği kullanılmaz. Bu seçeneği
kullanırsanız, daha sonra Insert araç çubuğunun Forms kategorisinde yer alan Label
düğmesini kullanarak notlar ekleyebilirsiniz. Kullanabileceğinizi iki ilâve erişilebilirlik
niteliği daha vardır.
• Access Key: Access key metin alanını kullanarak belirli bir form nesnesi için bir
klavye kısayolu oluşturabilirsiniz. Bunu, ziyaretçilerin Option (Macintosh’ta) ya da
Alt (Windows’ta) tuşuyla birlikte kullanabileceği bir karakter belirleyerek yaparsınız.
Ziyaretçiler bir nesneden sonraki nesneye geçmek için Tab tuşunu kullanabilir, ama erişim
tuşları (Access keys) sayfadaki herhangi bir form nesnesine çok daha hızlı bir şekilde
geçmenizi sağlar. Erişim tuşları oluştururken standart klavye kısayollarıyla uyuşmazlık
yaratabilecek karakterleri kullanmamaya özellikle dikkat edin. Erişim tuşları kullanırsanız,
ziyaretçileriniz için formun üst kısmında ya da bir açılır pencerede (Ders 8’de görmüştük)
gereken açıklamaları sunmanız ve ilgili metin alanının yanında klavye kısayolunu vermeniz
iyi olacaktır. Klavye kısayollarını gösteren ifadeler olabildiğince açık olmalı ve dikkat
çekmemelidir. Macintosh’ta klavye kısayolları menü öğelerinin yanında ilgili değiştirici tuşu
gösteren bir simgeyle birlikte listelenir. Windows’ta ise ilgili karakterin altı çizilerek bunun
bir kısayol olduğu gösterilir. Hangi yöntemi kullanırsanız kullanın, tutarlı ve anlaşılır olun.
Ayrıca ziyaretçilerinizin açıklamalarla ya da Yardım bilgisini kullanarak bu konuyla ilgili
açıklamalara erişebilmesini sağlayın.
• Tab Index: Pek çok Internet kullanıcısı form doldururken Tab tuşunu kullanır. Tab tuşu,
hızlı bir şekilde etkinlik durumunu (odak) bir form nesnesinden diğerine geçirmeyi ya da
bir form nesnesinden diğer bir form nesnesine bağlanmayı sağlar. Tab tuşunun etkinlik
durumunu değiştirme sırası nesnelerin ve bağlantıların kodda göründüğü sıraya bağlıdır.
Etkinlik durumunun değişme sırası genellikle beklediğiniz şekilde gerçekleşse de bir formun
görsel yerleşimi, görülen sıra bu nesnelerin koddaki asıl sırasından farklı olacak şekilde de
sunulabilir. Böyle durumlarda Tab Index alanını kullanıp form nesnelerine sayılar atayarak
etkinlik durumu sırasını belirlemeniz, formda ilerlerken ziyaretçilerin işini kolaylaştırabilir.
Alternatif olarak Tab Index özelliğini sadece gereken alanlar için ayarlayabilirsiniz. Bir Tab
Index belirlerken 1 sayısıyla başlamanız, ardından 2 sayısını kullanmanız ve bu şekilde
devam etmeniz gerekir. Bu işlemde herhangi bir sayıyı atlamayın.
386 DERS 11
Form nesneleri eklerken erişilebilirlik özelliğini kullanmayacaksanız, sizden bir
not tanımlamanız istenmeyecektir. Belge penceresine form nesnesi için bir not
ekleyebilirsiniz. Ancak bu metin, siz <label> ve </label> etiketlerini elle koda
eklemedikçe ya da Insert araç çubuğunun Forms kategorisinde yer alan Label düğmesini
kullanmadıkça <label> ve </label> etiketlerinin içine alınmaz.
5. OK düğmesine tıklayarak metin alanını ekleyin.
Tek satırlı metin alanı, metin notuyla birlikte forma eklenecektir. Her ikisinin de otomatik
olarak seçili olduğuna dikkat edin.
6. Belge penceresinde, sağında bir yere tıklayarak metin alanının ve notun
seçimini kaldırın. Üzerine tıklayarak sadece metin alanını seçin. Properties
denetçisindeki TextField metin alanında yer alan varsayılan textfield metninin
üzerine fullName yazın.
Bütün alanlarda isim kullanmak gerekir. Dreamweaver otomatik olarak
sayısal bir sırayla genel tipte isimler atar: textfield, textfield2, vs. form
gönderildiğinde metin alanının adı, bu alana girilen bilgiyi tanımlar. Burada
“fullName”, söz konusu alana girilen bilginin ziyaretçinin tam adı olduğunu
belirtir.
İsimlerde boşluk veya özel karakterler kullanmayın. Unutmayın ki bu isimler script’lerle
(CGI script’leri ya da JavaScript gibi) kullanıldığında BÜYÜK/küçük harf duyarlılığı
önemli hale gelir.
Bütün alanları kısa ve açıklayıcı bir şekilde adlandırmak çok önemlidir. Bir sayfada
yanlarında notlarıyla birlikte iki tane metin alanı olduğunu ve bu alanlardan birine ev
numarasının, diğerine de iş numarasının girilmesi gerektiğini düşünün. Eğer bu alanlar
textfield ve textfield2 şeklinde adlandırılırsa bu isimler hangi alana ev numarasını,
hangisine iş numarasını girmek gerektiği konusunda bir ipucu vermezler. Diğer taraftan,
alanlara daha açıklayıcı isimler vererek (işnumarası ve evnumarası gibi) karışıklıkları
önleyebilirsiniz. Ziyaretçiler alan isimlerini görmez ve bu isimlerden etkilenmez. Alanları
adlandırmak sizin ve Web ekibinizin iyiliği içindir.
7. Metin alanı form nesnesi seçili durumdayken Properties denetçisindeki Char
Width metin alanına tıklayın ve 40 yazın. Return (Macintosh’ta) ya da Enter
(Windows’ta) tuşuna basın.
Form Oluşturmak 387
Char width (karakter genişliği), metin alanında görüntülenecek olan görünür karakter
sayısıdır. Metin alanının genişliği kullanılabilir alanı büyüterek yaklaşık 40 karakter
görüntüleyebilir. Metin alanının başlangıçtaki genişliği yaklaşık 24 karakterdir. Metin
alanının asıl boyutları, ilgili metin alanı için kullanılan metnin büyüklüğüne bağlı olarak
tarayıcıdan tarayıcıya farklılık gösterir. Bu da CSS aracılığıyla tanımlanabilir veya Web
tarayıcısının varsayılan değerleri kullanılabilir. Metin alanının yüksekliği de metin
büyüklüğüne bağlıdır.
Bir metin alanı seçili durumdayken Properties denetçisindeki Class
menüsünden istediğiniz stili seçerek bu metin alanına bir CSS stili
uygulayabilirsiniz.
8. Metin alanı form nesnesi seçili durumdayken Properties denetçisindeki Max
Chars metin alanına tıklayın ve 50 yazın. Return (Macintosh’ta) ya da Enter
(Windows’ta) tuşuna basın.
Max Chars (maksimum karakter seçeneği), ziyaretçinin girebileceği toplam karakter
sayısını sınırlar. Başlangıçta bu metin alanı boştur ve ziyaretçinin girebileceği karakter
sayısı sınırsızdır.
Eğer Max Chars değeri Char width değerinden büyükse, ziyaretçiler yazmaya devam
edebilir ve ziyaretçi görünür alanın dışında yazarken metin, alan içinde sola doğru kayar.
Kaydırılabilir alan Max Char değerinde sona erer.
Eğer formunuz bilgileri bir veritabanına gönderiyorsa, maksimum karakter
değerinin, veritabanında buna karşılık gelen alanın maksimum değeriyle aynı
olduğundan emin olmanız gerekir.
9. Ekleme noktasını belge penceresindeki Full Name notunun üzerine yerleştirin.
Etiket Seçici’de <label> etiketini seçin, sağ ok tuşuna bir kez tıklayın ve Return
(Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Insert araç çubuğunda
yer alan Text Field düğmesine tıklayın ve Input Tag Accessibility Attributes
iletişim kutusundaki Label metin alanına Email: yazın. Style alanında Wrap
with label tag seçeneğinin, Position alanında da Before form item seçeneğinin
işaretli olduğundan emin olun, diğer alanları boş bırakın ve OK düğmesine
tıklayın. Metin alanını seçin ve Properties denetçisini kullanarak alanın adını
email, Char width değerini 40 ve Max Chars değerini de 70 olarak ayarlayın.
Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basarak veya belge
penceresinin içine tıklayarak bu değişiklikleri uygulayın.
Bu alan ziyaretçinin e-posta adresini almak için kullanılacaktır.
Yeni bir paragrafı önceki form nesnesini çevreleyen <label> etiketlerinin dışında
oluşturmak önemlidir. Aksi takdirde yeni form nesnesi önceki nesnenin label (not)
etiketleri içinde yer alır ya da etiketler üst üste binebilir veya başka zorluklar çıkabilir.
388 DERS 11
Etiket Seçici’de <label> etiketlerini seçtikten sonra ok tuşlarını kullanıp bu etiketlerin
dışına çıkarak bu durumu önleyebilirsiniz. Bu adımda zaten bunu uygulamıştınız. Bu
nesneleri eklerken Split görünümünü kullanmak işinizi kolaylaştırabilir.
E-posta adresi ve URL gibi bilgilerin girildiği alanlar için Max Char değerini
ayarlarken dikkatli olun. Ziyaretçiler, girecekleri bilginin karakter sayısı Max
Char değerinden daha büyükse URL’i ya da ilgili bilgiyi tam olarak yazamaz,
çünkü sizin belirlediğiniz değerden daha fazla karakter giremezler.
10. email metin alanı seçili durumdayken Properties denetçisindeki Init val metin
alanına Enter Your Email Address yazın.
Init val ya da başlangıç değeri (initial value), ziyaretçi sayfayı yüklediğinde ilgili metin
alanında belirecek olan metni ayarlamanızı sağlar. Init val seçeneği, ziyaretçiye kendisinden
istenen bilgiyle ilgili bir örnek görüntüleyerek yardımcı olabilir. Ziyaretçiler başlangıç
değerini kendi yazdıkları metinle değiştirebilir. Başlangıç değerlerinden, ziyaretçilerden
bilgi girmelerini istemek veya örnek metinler görüntülemek için faydalanabilirsiniz. Her ne
kadar ziyaretçiler bu metni değiştirebilseler de, bu seçeneği dikkatli kullanın. Çünkü formu
hemen doldurup geçmek isteyen ziyaretçiler, içinde metin bulunan bir alanı, daha önce
doldurmuş olduklarını düşünerek kolayca atlayabilirler. Başlangıç değerleri ziyaretçilerin
atlayıp geçmesi durumunda sorun yaratabilir. Çünkü bu değerlerin bulunduğu alanlar
doldurulmuş gibi durur.
11. Ekleme noktasını belge penceresindeki Email notunun üzerine yerleştirin.
Etiket Seçici’de <label> etiketini seçin, sağ ok tuşuna bir kez tıklayın ve Return
(Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Insert araç çubuğunda
yer alan Text Field düğmesine tıklayın ve Input Tag Accessibility Attributes
iletişim kutusundaki Label metin alanına Phone: yazın. Style alanında Wrap
with label tag seçeneğinin, Position alanında da Before form item seçeneğinin
işaretli olduğundan emin olun, diğer alanları boş bırakın ve OK düğmesine
tıklayın. Metin alanını seçin ve Properties denetçisini kullanarak alanın adını
Phone, Char width değerini 40 ve Max Chars değerini de 50 olarak ayarlayın.
Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basarak veya belge
penceresinin içine tıklayarak bu değişiklikleri uygulayın. Dosyayı kaydedin ve
Web tarayıcısında önizleyin.
Bu dosyayı bir sonraki uygulama için açık bırakın.
Form Oluşturmak 389
Normal bir metin alanı Web tarayıcısında girdiğiniz metni siz yazarken görüntüler.
Şifre için kullanılan metin alanı da diğer metin alanlarına benzer, ancak buradaki
metin, siz yazarken ekranda madde imleri veya yıldız şeklinde görüntülenir.
Password (şifre) seçeneği alandaki metni sadece, siz yazarken tepenizde birileri
varsa onların görmesini engellemek için gizler. Verileri şifreleme veya koruma gibi
bir işlem yapmaz. Verileri şifrelemek için Web sunucunuzda bir güvenli sunucu
yazılımının çalışıyor olması gerekir. SSL (Secure Sockets Layer) ile veri
güvenliğini sağlama konusuyla ilgili ayrıntılı bilgi almak için, birlikte çalıştığınız
Web sorumlusuyla ya da sistem yöneticisiyle konuşabilirsiniz. Bir şifre alanı
oluşturmak isterseniz, standart bir tek satırlı metin alanı ekleyin ve Properties
denetçisindeki Type alanında Password seçeneğini işaretleyin. Bu seçenek,
ziyaretçi söz konusu alana giriş yaparken ekranda yıldız işaretlerinin ya da madde
imlerinin görüntülenmesini sağlar. Password seçeneğinin kullanıldığı metin
alanları sadece tek satırlı metin alanı tipinde olabilir. Max Chars değeri,
sunucunuzdaki şifre sınırı değerine eşit olacak şekilde ayarlanmalıdır.
Radyo Düğmeleri Eklemek
Radyo düğmelerini (radio buttons) kullanıcıların bir dizi seçenek arasından sadece birini
seçmesini istediğiniz durumlarda kullanırsınız. Bir seçeneği işaretlediğinizde diğer seçenekler
otomatik olarak geçersiz kılınır. Radyo düğmeleri genellikle kredi kartı seçimi ve Evet ya da
Hayır şeklinde cevaplanan sorular için kullanılır. Buradaki uygulamada tabloya bir radyo
düğmesi grubu ekleyeceksiniz.
1. Ekleme noktasını belge penceresinde Phone notunun bulunduğu konuma
yerleştirin. Etiket Seçici’de <label> etiketini seçin, sağ ok tuşuna bir kez basın ve
ardından Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Bir sonraki adımda bu yeni paragrafa birkaç radyo düğmesi ekleyeceksiniz.
2. Insert araç çubuğunun Forms kategorisinde yer alan Radio Group düğmesine tıklayın.
Aynı işlemi Insert > Form > Radio Group komutunu kullanarak da
gerçekleştirebilirsiniz.
Radio Group iletişim kutusu açılacaktır.
390 DERS 11
3. Radio Group iletişim kutusunda Name metin alanına contact yazın.
Radyo düğmeleri kullanırken aynı gruptaki her bir radyo düğmesi için aynı adı
kullanmanız gerekir. Radyo düğmeleri, sadece tek bir seçeneğin işaretlenmesine izin
verildiğini gösterir.
Radyo düğmelerini birer birer ekliyorsanız (Insert araç çubuğundaki Radio
Button düğmesini ya da Insert > Form > Radio Button komutunu kullanarak),
hepsine aynı ismi vererek bu düğmeleri aynı grubun birer parçası haline
getirebilirsiniz. Birden fazla radyo düğmesi için aynı ismin kullanılması, bu
düğmelerin aynı gruba dahil olduğunu gösterir. Eğer isimler aynı değilse radyo
düğmeleri farklı gruplar olarak değerlendirilir ve radyo düğmeleri kullanmanın
bir anlamı kalmaz. Tek bir radyo düğmesi de ekleyebilirsiniz. Ama ziyaretçinizin
düğmeye tıkladıktan sonra bu düğmenin seçimini kaldırması için tek yolun
formu sıfırlamak olduğunu unutmayın. Bu durumda ziyaretçinin daha önce
diğer form nesnelerine yazarak girdiği ya da seçtiği bilgiler de silinecektir.
CGI ve JavaScript ile birlikte kullanıldığında form nesnelerinin isimlerinin BÜYÜK/
küçük harfe duyarlı hale geldiğini de unutmayın. Örneğin bu durumda “contact” ile
“Contact” aynı olmayacaktır.
4. Radio Buttons listesinde ilk “Radio” örneğine tıklayın ve bu metni Email ile
değiştirin. Buna karşılık gelen Value metin alanında da aynı ismi kullanın.
“Radio” sözcüğünün ikinci örneğine tıklayın ve bunu da Phone ile değiştirin.
Buna karşılık gelen Value metin alanında da aynı ismi kullanın.
Varsayılan durumda her grup (Radio Group) en az iki radyo düğmesi içerir. İstediğiniz
kadar radyo düğmesi ekleyebilirsiniz. Label ya da Value listesindeki bir örneğe
tıkladığınızda ilgili metin vurgulu hale gelir ve bu metni değiştirebilirsiniz.
Artı (+) ve eksi (-) düğmelerini kullanarak yeni girişler ekleyebilir veya mevcut girişleri
silebilirsiniz. Girişleri seçip ok tuşlarının yardımıyla listede yukarıya ya da aşağıya doğru
taşıyarak girişlerin sıralamasını da değiştirebilirsiniz.
Bir form gönderildiğinde buradaki değerler, sunucuda formu işleyen script’e gönderilir.
Ziyaretçinin hangi seçeneği işaretlediğini anlayabilmek için her bir radyo düğmesine farklı
bir değer verdiğinizden emin olun.
5. Lay Out Using alanında Line breaks seçeneğini işaretli olarak bırakın ve OK
düğmesine tıklayarak Radio Group iletişim kutusunu kapatın. En son radyo
düğmesinin altında beliren satır sonunu silin.
Line breaks seçeneği radyo düğmelerini belgenize her bir giriş ayrı bir satırda olacak şekilde
yerleştirir. Table seçeneği ise, her bir giriş ayrı bir satırda olacak şekilde bir tablo ekler.
Form Oluşturmak 391
6. Sayfayı Web tarayıcınızda önizleyin ve radyo düğmelerini her birine tıklayarak
test edin.
Seçmek üzere bir radyo düğmesine tıkladığınızda diğer radyo düğmesinin seçiminin
kaldırılması gerekir. Bunu görmek için dosyayı Web tarayıcınızda önizlemeniz gerekir.
Form nesneleri Dreamweaver’ın belge penceresinde seçilmiş ya da işaretlenmiş olarak
görünmez.
training.html belgesini kaydedin ve bir sonraki uygulama için açık bırakın.
392 DERS 11
Onay Kutuları Eklemek
Onay kutuları (checkboxes), ziyaretçilerin birbiriyle alâkalı bir grup öğe arasından
bir ya da birden fazla öğe seçmesini sağlar. Ziyaretçinin istediği sayıda seçeneği
işaretleyebilmesine izin vermek istediğiniz yerlerde genellikle onay kutularını
kullanırsınız. Eğer ziyaretçinin sadece tek bir seçenek işaretlemesini istiyorsanız,
bundan sonraki uygulamada olduğu gibi radyo düğmelerinden faydalanırsınız. Şimdiki
uygulamada bir dizi onay kutusu ekleyeceksiniz.
1. Ekleme noktasını, Experience And Interests göstergesinin içine yerleştirin,
Etiket Seçici’de <legend> etiketini seçin. Sağ ok tuşuna bir kez basın ve
ardından da Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. I am
interested in specific training segment(s): yazın. Shift+Return (Macintosh’ta)
ya da Shift+Enter (Windows’ta) tuşlarına basarak metinden sonra bir satır sonu
ekleyin. (check all that apply) yazarak bunun sonuna da bir satır sonu ekleyin.
Ders 2’den de hatırlayacağınız gibi satır sonu, ekleme noktasını boş bir satır eklemeden bir
sonraki satıra götürür (normal bir paragraf sonunun yaptığı gibi).
2. Insert araç çubuğunun Forms kategorisinde yer alan Checkbox düğmesine
tıklayın.
Aynı işlem için Insert > Form > Check Box komutunu da kullanabilirsiniz.
Checkbox düğmesi
Input Tag Accessibility Attributes iletişim kutusu açılacaktır.
3. Label metin alanına Anusara Yoga Immersion yazın. Style bölümünde Wrap
with label tag seçeneğini ve Position bölümünde de After form item seçeneğini
işaretleyin. Diğer alanları boş bırakın ve OK düğmesine tıklayın.
Forma, ilgili not metniyle birlikte bir onay kutusu eklenecektir.
4. Sadece onay kutusunu seçin. Properties denetçisinde yer alan CheckBox
name metin alanındaki “checkbox” metninin yerine segment yazın. Checked
Value metin alanına immersion yazın.
Hem not, hem de onay kutusu seçiliyse, Properties denetçisinde onay
kutusu özellikleri görüntülenmez.
Form Oluşturmak 393
Bir ziyaretçi Anusara Yoga Immersion onay kutusunu işaretlerse immersion değeri buna
karşılık gelen onay kutusunun seçili durumda olduğunu gösterir ve segment değeri, onay
kutusu grubunu tanımlar. Bir dizi onay kutusuna aynı ismi vererek bunları bir grup olarak
tanımlayabilirsiniz. Bu onay kutularına ayrı ayrı anlaşılır ve doğru değerler verdiğinizden
emin olun.
5. Anusara Yoga Immersion notundan sonra gelen boşluğun arkasına bir satır
sonu ekleyin. İkiden beşe kadar olan adımları tekrarlayarak yeni onay kutuları
oluşturun ve bunların not metinlerini In-Depth Asana Training & Practice,
Yoga Philosophy Series ve Satsang: Kirtan, Meditation and Discussion
olarak ayarlayın. Her onay kutusu ve her onay kutusuna ait not kendi satırında
olmalıdır. Properties denetçisinde yer alan CheckBox name metin alanındaki
“checkbox” yazısını bütün onay kutularında segment ile değiştirin. Her bir
Checked Value metin alanına sırasıyla asana, philosophy ve satsang yazın.
Ekleme noktasını notlardan sonra gelen boşluğun arkasına yerleştirmek önemlidir. Çünkü
ekleme noktası, onay kutusu ve metni çevreleyen label etiketinin dışına yerleştirilecektir.
Bunu Etiket Seçici’ye bakarak kontrol edebilirsiniz. <p><label> dizisi etiket hiyerarşisinin
sonunda (sağda) yer alıyorsa ekleme noktası hâlâ label (not) etiketlerinin arasında
demektir ve onu taşımanız gerekir. Burada sadece <p> etiketini görürseniz, bir sonraki
onay kutusu için satır sonunu eklemeye hazırsınız demektir.
Ekleme noktasının bulunduğu konuma ait kod hiyerarşisindeki en son etiket, Etiket
Seçici’nin en sağında görüntülenir. Etiket Seçici hiyerarşisi her zaman <body> etiketiyle
başlar. Eğer etiket hiyerarşisi, tamamı görüntülenemeyecek kadar uzunsa Etiket Seçici’nin
sol tarafında (baş taraf) <body> etiketini göremeyebilirsiniz. Daha sonra eklenen etiketlere
yer açmak için Etiket Seçici’deki etiketler sol tarafta gözden kaybolmaya başlar. Diğer
etiketleri de görmek isterseniz, belge penceresini genişleterek Etiket Seçici’ye biraz daha
yer kazandırabilirsiniz.
Tablo, siz form nesneleri eklemeye devam ederken içeriğine yer açmak üzere aşağıya
doğru büyüyecektir. Bu durumda formun kırmızı noktalı çizgisi tabloyu örtüyormuş
gibi görünebilir ve tablonun alt kısmıyla birlikte aşağıya doğru inmeyebilir. Bu durumla
karşılaşırsanız, belge penceresinde tablonun dışında bir yere tıklayarak Dreamweaver’ın
görüntüyü tazelemesini sağlayın.
6. Sayfayı Web tarayıcınızda önizleyin ve her birine tek tek tıklayarak onay
kutularını test edin.
Belgeniz burada gösterilen örneğe benzeyecektir.
394 DERS 11
training.html belgesini kaydedin ve bir sonraki uygulama için açık bırakın.
Liste ve Menü Öğeleri Eklemek
Kaydırılabilir bir liste (scrolling list) ya da menü oluşturarak ziyaretçilerin buradaki
öğelerin arasından seçim yapmasını sağlayabilirsiniz. Kaydırılabilir bir listeyle
ziyaretçilerinize birden fazla bitişik ya da bitişik olmayan öğeyi seçme imkânı
tanıyabilirsiniz. Menülerde ziyaretçiler tek bir seçim yapabilir. Bunların her ikisinde de,
ziyaretçinin seçtiği öğeler vurgulu hale gelir.
1. Experience and Interests alan kümesinin içinde Satsang onay kutusunu
çevreleyen label etiketinden hemen sonra Return (Macintosh’ta) ya da Enter
(Windows’ta) tuşuna basın. Insert araç çubuğunun Forms kategorisinde yer alan
List/Menu düğmesine tıklayın.
Aynı işlemi Insert > Form > List/Menu komutunu seçerek de
gerçekleştirebilirsiniz.
List/Menu düğmesi
Input Tag Accessibility Attributes iletişim kutusu açılacaktır.
Form Oluşturmak 395
2. Label metin alanına What type(s) of yoga have you studied and/or practiced?
yazın. Style alanında Wrap with label tag seçeneği, Position alanında da seçeneği
işaretli olmalıdır. Geri kalan alanları boş bırakın ve OK düğmesine tıklayın.
Forma küçük bir menü ve buna karşılık gelen not eklenecektir. Dreamweaver varsayılan
olarak bir açılır menü ekler.
3. Not metni ve menünün arasına bir satır sonu ekleyin. Sadece menüyü seçerek
Properties denetçisinde bununla ilgili seçeneklerin görüntülenmesini sağlayın.
Properties denetçisinde List/Menu özellikleri görüntülenecektir.
4. Properties denetçisindeki Type alanında List seçeneğini işaretleyin ve Height
değerini 4 yapın. Selections alanındaki Allow multiple onay kutusunu işaretleyin.
Böylece eklediğiniz nesnenin biçimini kaydırılabilir bir liste olarak değiştirdiniz. Form
nesnesini menüden listeye dönüştürebilmeniz için yükseklik (Height) seçeneğini 1’den
büyük bir değere ayarlamanız gerekir.
List ayarı, menülerde olmayan ilâve bir seçeneğe daha sahiptir. Selections bölümündeki
Allow multiple onay kutusunu kullanarak birden fazla seçim yapılmasına izin verebilir ya da
vermeyebilirsiniz. Bu seçenek varsayılan durumda işaretli değildir. Selections bölümündeki
bu kutuyu işaretlerseniz, ziyaretçiler Cmd (Macintosh’ta) ya da Ctrl tuşunu (Windows’ta)
basılı tutup tıklayarak bitişik olmayan birden fazla seçeneği işaretleyebilir. Ziyaretçiler hem
Macintosh’ta, hem de Windows’ta Shift tuşunu basılı tutup tıklayarak bitişik birden fazla
seçim yapabilir. Birden fazla seçim yapılabilmesine izin verecekseniz, ziyaretçilerinize birden
fazla seçim yapabileceklerini (ve bunu nasıl yapacaklarını) bildirmeniz iyi olacaktır. Pek çok
ziyaretçi bu komutları bilemeyebilir. En iyisi, ziyaretçilerinize sitenizle etkileşime girmek
için kullanabilecekleri bilgileri ve araçları sağlamaktır.
Height metin alanına görülmesini istediğiniz satır sayısını girerek kaydırılabilir liste için bir
yükseklik değeri ayarlayabilirsiniz. Height değeri için 1’den büyük bir sayı kullandığınızdan
emin olun. Aksi takdirde kaydırılabilir liste bir menü olarak görüntülenecektir.
396 DERS 11
5. Properties denetçisindeki List/Menu metin alanında yazan select sözcüğünü
yogaTypes ile değiştirin ve ardından List Values düğmesine tıklayın.
List Values iletişim kutusu açılacaktır. Bu iletişim kutusu, hem liste, hem de menü girişleri
için aynıdır.
6. Item Label alanına Anusara yazın ve Tab tuşuna basın. Value alanına anusara
yazın.
List Values iletişim kutusundaki en uzun öğe listenin ya da menünün genişliğini belirler.
Bir listeyi ya da menüyü sürükleme ya da boyutlarını tanımlama yöntemiyle yeniden
boyutlandıramazsınız.
7. Menüye yeni bir seçenek eklemek için Tab tuşuna basın ya da iletişim
kutusunun sol üst köşesindeki artı işaretli düğmeye (+) tıklayın.
List Values iletişim kutusundan bir öğe silmek için eksi işaretli düğmeyi (-) kullanabilirsiniz.
8. Altıncı ve yedinci adımı tekrarlayarak listeye Ashtanga, Bikram, Dynamic
Hatha, Hatha, Integral, Iyengar, Kripalu, Vinyasa, Other Western-style ve Other
Eastern-style öğelerini ekleyin. Value alanındaki değerleri de her bir bölge
adıyla eşleşecek şekilde sırasıyla ashtanga, bikram, dynHatha, hatha, integral,
iyengar, kripalu, vinyasa, otherWest ve otherEast olarak değiştirin.
Listenin sırasını değiştirmek isterseniz Value alanının üstündeki ok düğmelerini
kullanabilirsiniz.
Form Oluşturmak 397
9. OK düğmesine tıklayarak iletişim kutusunu kapatın.
Listede yeni eklediğiniz öğeleri görüntülenecektir.
Properties denetçisinde liste/menü öğeleriyle ilgili Initially selected adında ilâve bir seçenek
vardır. Sayfa yüklendiğinde seçili halde görüntülenmek üzere listedeki öğelerden istediğiniz
birini ayarlayabilirsiniz. Bu seçenek kaydırılabilir listelerde pek tercih edilmeyebilir. Ama menü
öğelerinin ilk satırında “Birini seçin...” gibi bir komutun ya da örnek bir seçimin belirmesi
ziyaretçiler açısından faydalı olabilir.
Başlangıçta seçili halde görüntülenmek üzere bir öğe seçerseniz, bunun seçimini
doğrudan kaldırmak için kullanabileceğiniz herhangi bir yöntemin olmadığını
unutmayın. Bu öğenin seçimini kaldırmak isterseniz, List Values iletişim kutusunu
açmanız, seçilen öğeyi silmeniz ve tekrar listeye eklemeniz gerekir.
10. Listeden sonra bir satır sonu ekleyin ve (select the most appropriate options——make
multiple selections with Cmd-Click on the Macintosh and Ctrl-Click on Windows) yazın.
Öğelerin seçilmesiyle ilgili yardımcı komutlar sunmak her zaman için iyi bir alışkanlıktır.
Bu, özellikle birden fazla seçim yapmayı bilmeyen ziyaretçiler için çok faydalıdır. Böylece
ziyaretçilerinize kolaylık sağlamış olursunuz ve ayrıca ziyaretçilerin formu eksiksiz olarak
doldurma ihtimali de artar.
Çok Satırlı Metin Alanları Eklemek
Ziyaretçilerin metin girebileceği birden fazla satıra sahip metin alanları aracılığıyla
ziyaretçilerinizden daha büyük miktarda bilgi alabilirsiniz. Çok satırlı metin alanları genelde
ziyaretçilerden yorum ve geribildirim almak için kullanılır. Bu uygulamada formun içindeki
tabloya çok satırlı bir metin alanı yerleştireceksiniz.
1. Ekleme noktasını liste kontrolünün altındaki metnin içinde herhangi bir yere
yerleştirin. Etiket Seçici’yi kullanarak <label> etiketini seçin, sağ ok tuşuna bir kez
basın ve ardından Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Ekleme noktası artık olması gereken yerde, yani alan kümesinin içinde, fakat liste kontrolünün
dışındadır.
2. Insert araç çubuğunun Forms kategorisinde yer alan Textarea düğmesine tıklayın.
Çok satırlı bir metin alanını Insert > Form > Textarea komutunu seçerek de
ekleyebilirsiniz.
Textarea düğmesi
398 DERS 11
Input Tag Accessibility Attributes iletişim kutusu açılacaktır. Dreamweaver’da çok satırlı
bir metin alanı textarea olarak adlandırılır.
3. Label metin alanına “Have you had any teaching experience in general? Please
describe.” yazın. Style alanında Wrap with label tag seçeneğinin, Position
alanında da Before form item seçeneğinin işaretli olması gerekir. Geri kalan
alanları boş bırakın ve OK düğmesine tıklayın.
Belge penceresinde çok satırlı bir metin alanı ve buna karşılık gelen not metni belirecektir.
4. Not metniyle çok satırlı metin alanının arasına bir satır sonu ekleyin. Çok satırlı
metin alanını seçin.
Doğrudan notla metin alanının arasına bir satır sonu eklemek için metin
alanını seçin ve sol ok tuşuna bir kez basın, sonra da satır sonunu ekleyin.
Çok satırlı bir metin alanını seçtiğiniz için Properties denetçisinde metin alanı (Text Field)
özellikleri görüntülenecektir.
Tek satırlı bir metin alanını seçip ardından Properties denetçisindeki Type
alanında Multi line’ı seçeneğini işaretleyerek bu alanı çok satırlı bir metin
alanına dönüştürebilirsiniz.
5. Properties denetçisindeki TextField metin alanındaki textarea sözcüğünü
teachingExp ile değiştirin. Char Width metin alanına 40 yazın.
Çok satırlı metin alanları kullandığınızda Properties denetçisinde ilave bir seçenek
görürsünüz. Wrap menüsü sadece çok satırlı metin alanlarında kullanılabilir. Tek satırlı
ve parola metin alanlarında bu menü seçilemez durumdadır. Wrap menüsü, çok satırlı
metin alanına girilen metnin görünür alana sığmaması durumunda bu metnin nasıl
görüntüleneceğini belirler. Bu uygulamada Wrap seçeneğini Default ayarında bırakın.
Wrap menüsündeki seçenekler şunlardır: Default, Off, Virtual ve Physical.
• Default seçeneği, tarayıcının varsayılan ayarını kullanır. Type alanında Multi line’ı
işaretlediğinizde otomatik olarak bu seçenek ayarlanır.
• Off seçeneği, metnin bölünerek bir sonraki satıra geçmesini engeller. Metin, siz
Return ya da Enter tuşuna basana kadar aynı satırda devam eder. Ziyaretçi yazarken
metin görünebilir alanın sınırını aştığında sola doğru kayar.
Form Oluşturmak 399
• Virtual seçeneği, metni bölerek bir sonraki satırdan devam etmesini sağlar. Ama
sözcük sarma özelliği, form gönderildiği zaman verilere uygulanmaz.
• Physical seçeneği, metni bölerek bir sonraki satırdan devam etmesini sağlar ve sözcük
sarma özelliği, form gönderildiğinde verilere uygulanır.
6. Properties denetçisindeki Num Lines metin alanına 4 yazın.
Bu seçenek, kaydırılabilir alanda kaç satırın görüneceğini bildirir. Ziyaretçinin gireceği
satır sayısını sınırlamaz. Ziyaretçi yazı yazarken ayarlanmış olan değeri geçtiğinde metin
yukarıya doğru kaydırılır.
7. Ekleme noktasını çok satırlı metin alanına yerleştirin ve Etiket Seçici’de
<label> etiketini seçin. Sağ ok tuşuna bir kez basın ve ardından da Return
(Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. İkiden altıya kadar olan
adımları tekrarlayarak ikinci bir metin alanı oluşturun. Not metni olarak `What
do you want to gain from this program? If you have specific goals or areas
of interest that you would like to explore, please explain. Please be specific”
cümlelerini atayın. Diğer erişilebilirlik seçenekleri 3 numaralı adımdaki gibi
kalsın. Alanı gain olarak adlandırın. Önceki çok satırlı metin alanı için 5 ve 6
numaralı adımlarda kullandığınız nitelikleri ayarlayın.
Belgeniz burada gördüğünüz örnektekine benzeyecektir.
8. Sayfayı Web tarayıcınızda önizleyin ve farklı seçenekleri işaretleyerek listeyi
test edin.
training.html belgesini kaydedin ve bir sonraki uygulama için açık bırakın.
400 DERS 11
Düğme Eklemek
Formlarda, biri form verisini göndermek (Submit-Gönder), diğeri de formu temizlemek
(Reset) için olmak üzere genellikle iki düğme kullanılır. Submit düğmesi Web tarayıcısına
veriyi göndermesi gerektiğini bildirir. Reset düğmesi ise sayfadaki alanlarda bulunan bütün
bilgileri siler.
Temel arama işlevi için oluşturulan bir formda genellikle sadece tek bir Submit
düğmesi bulunur. Bu da çoğunlukla Search (Ara) ya da Go (Git) şeklinde adlandırılır.
1. Ekleme noktasını, üçüncü alan kümesinde bulunan Send Your Answers metninin
içine yerleştirin. Etiket Seçici’yi kullanarak <legend> etiketini seçin, sağ ok tuşuna bir
kez basın ve ardından Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Insert araç çubuğunun Forms kategorisinde yer alan Button düğmesine tıklayın.
Aynı işlemi, Insert > Form > Button komutunu seçerek de gerçekleştirebilirsiniz.
Input Tag Accessibility Attributes iletişim kutusu açılacaktır.
2. Label metin alanını boş bırakın ve Style alanında No label tag seçeneğini
işaretleyin. Position seçeneklerinin mevcut ayarını değiştirmeyin ve geri kalan
alanları boş bırakın. OK düğmesine tıklayın.
Forma bir Submit düğmesi yerleştirilecek ve Properties denetçisinde düğme özellikleri
görüntülenecektir. Burada erişilebilirlik niteliklerini kullanmak gereksizdir; çünkü not,
düğmenin üzerinde yer almaktadır. Varsayılan olarak kullanılan düğme Submit olduğu için,
bu düğmeyle ilgili seçeneklerde herhangi bir değişiklik yapmanız gerekmez.
3. Ekleme noktasını Submit düğmesinin sağına yerleştirin. Insert araç çubuğundaki
Button düğmesine tıklayın ve ikinci adımı tekrarlayarak erişilebilirlik niteliklerini
Submit düğmesi için kullanılan değerlere ayarlayın.
Forma ikinci bir Submit düğmesi yerleştirilecektir. Aradaki tek fark, bu düğmenin Submit2
olarak adlandırılmasıdır, çünkü iki düğme aynı isme sahip olamaz. Form nesnelerinde aynı
ismi sadece aynı grupta yer alan radyo düğmelerinde ve aynı grupta bulunan onay kutularında
kullanabilirsiniz. Bu uygulamada üzerinde çalıştığınız düğme farklıdır, çünkü diğer
düğmelerle gruplanamaz ve bir sonraki adımda göreceğiniz gibi kendi eylemini içerecektir.
4. İkinci Submit düğmesi seçili durumdayken Properties denetçisindeki Action
seçenekleri arasından Reset Form’u seçin.
Label metin alanında yer alan metin otomatik olarak Reset’e dönüşecektir. Bu düğmenin eylemi,
bütün metin alanlarında, onay kutularında ve radyo düğmelerinde yapılan ayarları sıfırlar ve
bunları orijinal durumlarına (sayfa Web tarayıcısına ilk yüklendiği zamanki durum) döndürür.
Form Oluşturmak 401
Action bölümündeki üçüncü seçenek None’dır. Submit ve Reset seçeneklerinden farklı
olarak None düğme seçeneğine iliştirilmiş bir eylem yoktur. Bu düğme başka bir işlem
gerçekleştirmek için bir script’le birlikte kullanılabilir. Örneğin bir JavaScript rutini,
toplam ya da kazanç hesabı gibi işlemleri gerçekleştirmek için kullanılabilir ve sonuç
değerini ziyaretçiye gönderebilir.
5. Label metin alanında Reset sözcüğünü Clear Form yazarak değiştirin. Button
Name metin alanında varsayılan ismi reset olarak değiştirin.
Düğmeleri açık bir şekilde, ziyaretçinin beklentilerini göz önüne alarak adlandırmak
en iyisidir. Submit ve Reset, ziyaretçilerin ne anlama geldiğini bildiği ve her yerde
kullanıldıkları için standart haline gelmiş form düğmesi notlarıdır. Ziyaretçiler formu
göndermeye kalktıklarında yanlışlıkla tıklamalarını önlemek için Reset düğmesini doğru
dürüst bir konuma yerleştirin ve not metninin açıkça görülmesine dikkat edin.
Insert araç çubuğundaki Image Field düğmesini kullanarak standart
düğmelerin yerine resimlerden de faydalanabilirsiniz. Bunun için ilgili resmi
bir form elemanı olarak ekler ve koda da uygun değeri yerleştirirsiniz
(value=”Submit” gibi). Düğmelerin görünümünü özelleştirmek için resim
kullanmak isteyebilirsiniz. Bu şekilde kullanılan bütün resimlerin açıkça
düğmeleri temsil ettiğinden emin olmak gerekir.
Gizli Alanlar Oluşturmak
Kimi zaman formunuza, ziyaretçiler tarafından görülmeyen ya da ziyaretçi tarafından
doldurulacak bazı bilgileri dahil etmeniz gerekebilir. Böyle durumlarda Web tarayıcısında
görüntülenmeyen gizli alanlardan faydalanabilirsiniz. Gizli alanlar (hidden fields)
genellikle, formun işlenmesi için (isim, sipariş numarası ya da satılan ürünle ilgili başka
bir bilgi almak, form bir e-posta adresine gönderilecekse bir e-posta adresi ve konu
başlığı eklemek, formu doldurduktan sonra ziyaretçilerinizi yönlendirmek istediğiniz bir
sayfanın URL’ini dahil etmek, bilgileri bir formdan başka bir forma aktarmak ya da belirli
alanların ziyaretçi tarafından doldurulmasını sağlamak için) belirli bilgiler gerektiğinde
sunucu taraflı script’lerle birlikte kullanılır. Böyle durumlarda gizli alanların işlenebilmesi
için sunucu taraflı script’ler (server side scripting) gerekir. Sunucu taraflı script’lerin
gerekmediği ya da kullanılamadığı durumlarda gizli alanlarla birlikte JavaScript de
(istemci taraflı script olarak da bilinir) kullanılabilir. İstemci taraflı script (client side
scripting) kullanımında script’leri ziyaretçinin Web tarayıcısı (istemci) işler. JavaScript
konusunu Ders 8’de görmüştük.
402 DERS 11
Form işlenmek üzere gönderildiğinde gizli alanlarla ilişkilendirilmiş herhangi bir script
kullanılmamışsa, forma gömülen gizli alanlar, diğer form nesnelerindeki değerler gibi dahil edilir.
1. Ekleme noktasını tablonun ikinci satırının en altına yerleştirin.
Ekleme noktası şu anda Send Your Answers alan kümesini içeren hücrenin hemen üstündeki
hücrede bulunmaktadır. Gizli alanları belgede istediğiniz yere yerleştirebilirsiniz.
Ekleme noktası ikinci hücrenin alt kısmındaki satırda olduğu için artık Experience and
Interests yazısının bulunduğu alan kümesinin içinde değildir. Bu durum şimdi yaptığımız
uygulamada sorun yaratmaz, çünkü aşağıdaki adımlarda ekleyeceğimiz gizli alan ziyaretçi
tarafından görülmeyecektir. Burada yerleşim önemli değildir.
2. Insert araç çubuğunun Forms kategorisinde yer alan Hidden Field düğmesine tıklayın.
Hidden Field düğmesi
Belgeye bir gizli alan eklenecektir. Gizli alan simgesi, (isimli yer imi simgeleri gibi) görünmeyen
elemanlar için kullanılan görsel bir yardımcıdır. Bu simge de Web tarayıcısında görünmez.
Form Oluşturmak 403
3. Gizli alan seçili durumdayken HiddenField metin alanındaki varsayılan isim olan
hiddenfield’ı webRequest yazarak değiştirin. Properties denetçisindeki Value
metin alanına true yazın.
Burada, bu formun başlığını gizli alan için önceden tanımlanmış bir değer olarak dahil
ediyorsunuz. Sürekli sabit kalan bilgiler bu tür gizli alanlar vasıtasıyla dinamik sayfalara
ve CGI script’lerine aktarılabilir. Bu şekilde ayarlanan değerlerin kullanıldığı gizli alanlar
şifrelenmez ya da güvenlik altına alınmaz. Bunlar Web tarayıcısı aracılığıyla belge kaynak
kodunda kolayca görülebilir. Önemli bilgileri (şifre gibi) bu tür gizli alanlara yerleştirmeyin.
Dinamik sayfalar ya da CGI script’leri aracılığıyla alanın değeri dinamik olarak üretilirken
güvenlik altına alınmış gizli alanlar oluşturulabilir.
Gizli alanların ismi ve değeri genellikle bunları işlemek için kullanılan script’e bağımlıdır.
Örneğin veriyi bir e-posta adresine gönderen bazı script’ler gizli alanın ismi olarak alıcıyı,
değer olarak da verinin gönderilmesi gereken e-posta adresini kullanabilir. Bu isim-değer
çifti, sunucunuzda alıcı alanını işleyen script olmadığı sürece bir işe yaramaz.
Formlarda kullanabileceğiniz bir diğer alan tipi de dosya alanıdır. Bir dosya
alanı kullanarak ziyaretçilerinizin formunuz aracılığıyla size dosya
gönderebilmesini mümkün kılarsınız. Bu özellik, formdaki verilerle ilgili
belgeleri almanız gerektiğinde faydalı olabilir. Örneğin ziyaretçilerin CV’lerini
göndermesini istediğiniz bir iş başvuru formunda bir dosya alanı
kullanabilirsiniz. Dosya alanları kullanıldığında, formla alınan verilerin işlenmesi
ve dosyanın yüklenmesi ya da uygun bir konuma yönlendirilmesi için
sunucudan destek alınır.
Formları Biçimlendirmek
Formları sitenizin görünümü ve genel yapısı açısından daha uyumlu hale getirmek için CSS
stillerinden (Ders 4’te görmüştük) faydalanabilirsiniz.
1. Ekleme noktasını ilk alan kümesindeki Contact Information göstergesinin içine
yerleştirin. Etiket Seçici’de <fieldset> etiketini seçin. CSS Styles panelindeki New
CSS Rule düğmesine tıklayın. Selector Type seçeneği olarak Tag’i işaretleyin. Metin
alanında görünmüyorsa, fieldset’i seçmek için Tag metin alanının sağındaki menüyü
kullanın. Define In bölümünde This document only seçeneğini işaretleyin ve OK
düğmesine tıklayın. CSS Rule definition for fieldset iletişim kutusu açılacaktır.
Formun farklı bölümlerini çevreleyen dış hatların görünümünü kontrol etmek amacıyla
alan kümesi için bir stil oluşturabilirsiniz.
404 DERS 11
2. Category listesinde Box’ı seçin. Padding bölümünde Top metin alanına 5 yazın
ve Same for all kutusunu işaretli olarak bırakın.
Padding ayarı, form nesneleri için biraz boşluk bırakır. Böylece nesneler alan kümesi dış
hattının üzerine gelmez.
3. Category listesinde Border’ı seçin. Style bölümünde, Top menüsünde solid’i
işaretleyin ve Same for all kutusunu işaretli olarak bırakın. Width bölümünde
Top metin alanına 1 yazın, birim olarak pixels seçeneğinin işaretli olduğundan
emin olun ve Same for all kutusunu işaretli olarak bırakın. Color bölümünde Top
metin alanına #CCCC99 yazın ve Same for all kutusunu işaretli olarak bırakın.
OK düğmesine tıklayın.
Her alan kümesinin etrafında birer kenarlık belirecektir.
Form Oluşturmak 405
4. CSS Styles panelindeki New CSS Rule düğmesine tıklayın. Selector Type alanında
Tag’i seçin. Tag metin alanının sağındaki menüyü kullanarak H5’i seçin ve Define
In alanında This Document Only seçeneğini işaretleyin. CSS Rule definition iletişim
kutusunda Type kategorisini seçin ve renk seçeneğini #999999 olarak ayarlayın.
OK düğmesine tıklayın.
Bu stil, formun farklı bölümlerini gösteren göstergeler için kullanılacaktır.
5. Contact Information gösterge metnini seçin. Properties denetçisinde Format
seçeneğini değiştirerek Heading 5 yapın. Diğer iki alan kümesine ait göstergeler için
de aynı stil ayarını kullanın.
Aynı işlemi, ekleme noktasını metnin içine yerleştirip Properties denetçisindeki
Format menüsünden H5’i seçerek de gerçekleştirebilirsiniz. Burada metni seçmeniz
gerekmez. Çünkü başlıklar (headings) metin bloğunun tamamına uygulanır.
Formunuzun renk ve stil açısından Yoga Sangha proje sitesinin geri kalanıyla uyumlu
göründüğüne dikkat edin. Dosyayı kaydedip Web tarayıcınızda önizleyebilirsiniz.
Formların İşlenmesi
Formunuzun bir veritabanına bilgi göndermesi ya da bir veritabanından bilgi alması, bir arama
işlemi gerçekleştirmesi veya diğer bir şekilde veri işlemesi gerekiyorsa, formunuzu işlevsel hale
getirmek için söz konusu verilerle ne yapılacağını ve bu verilerin nasıl değerlendirileceğini
tanımlamanız gerekir. Bu tanımlama işlemi, form seçili durumdayken Properties denetçisindeki
Action ve Method seçenekleri kullanılarak yapılır. Formu seçmek için ekleme noktasını formun
içinde herhangi bir konuma yerleştirin ve Etiket Seçici’de <form#training> etiketine tıklayın.
Formları işlemek için kullanılabilen ve veritabanlarından faydalanan uygulamalar ve dinamik Web
sayfaları geliştirmek için Dreamweaver’ı kullanabilirsiniz. Veritabanıyla çalışma özelliğine sahip
dinamik bir Web sitesi oluşturarak bununla çalışmak için bir sunucu bağlantısı gerekir. Hangi
script dilinin (PHP, ASP, JSP ve ColdFusion gibi) kullanılacağını, sunucunun tipi ve yapılandırma
ayarları belirler. Dinamik sayfalar ve veritabanlarından faydalanan bir site oluşturma konusu bu
kitabın kapsamı dışındadır ve bu dersi tamamlarken formları işlemek üzere dinamik sayfalar veya
CGI script’leri kullanan bir sunucuya erişiminiz olmayabilir. Bu yüzden aşağıda verilen bilgiler
sadece referans malzemesi olarak sunulmuştur. ISS’nize (Internet Servis Sağlayıcı) ya da birlikte
çalıştığınız Web sorumlusuna başvurarak, sunucunuzda kullanılan script’lerle çalışmak üzere
Action ve Method seçeneklerini ayarlamak için gereken bilgilere ulaşabilirsiniz.
• Action seçeneği, Web tarayıcısına form verileriyle ne yapması gerektiğini söyler. Konuma ait
URL veya yolla birlikte ziyaretçi Submit düğmesine tıkladığında bilgileri işleyen sunucu taraflı
uygulamanın (bu genellikle bir CGI script’i ya da bir dinamik sayfadır) ismini tanımlar. CGI
script’leri, ilgili form tarafından gönderilen verileri işleyen Web sunucusunda bulunur.
406 DERS 11
• Method seçeneği, form verisinin nasıl değerlendirileceğini belirler (GET, POST ya
da Default). Form tarafından gönderilen veri, ziyaretçinin girdiği bilgilerden türetilen
bir sürekli metin katarıdır. GET metodu, form içeriklerini, Action metin alanında
tanımlanan URL’e ekler. Bu yüzden bu bilgi Web tarayıcısının adres çubuğunda görünür.
GET, veri aktarımında güvenli bir metot değildir. Kredi kart bilgileri ya da sosyal
güvenlik numaraları gibi önemli bilgilerin aktarılmasında kullanılmamalıdır. GET
metodu sadece sınırlı bir miktarda bilgi gönderebilir. Bunun sebebi, Web tarayıcılarının
ve sunucuların URL uzunluğuyla ilgili getirdiği kısıtlamalardır. Bu sınırlılık farklılık
gösterebilir. Bu yüzden de GET metodu, ziyaretçilerin uzun bilgiler girebileceği
formlar için de iyi bir seçenek değildir.(Uzun formlarda kısıtlamayla belirlenen sınırın
aşılması durumunda bilgilerin geri kalanı kaybedilir.) Diğer yandan POST metodu,
çok daha fazla bilgi gönderebilir ve çok güvenilir ve güvenlidir. Script’lerde form verisi
göndermek için en sık kullanılan metottur. POST, form değerini bir mesajın gövde
bölümünde göndermek için bir HTTP talebi kullanır. Default ise Web tarayıcısının
varsayılan metodunu kullanır. Bu da genellikle GET’tir.
Formları Test Etmek
Form eylemi için, eğer sunucunuzda çalışan bir CGI script’i yoksa, bir “mailto” öğesi
(Ders 3’te gördüğümüz bir e-posta bağlantısı) kullanarak bir formu belirli bir e-posta
adresine gönderebilirsiniz. Bu işlem sadece formları test etmek için yapılmalıdır. Bu
yöntemin çeşitli kusurları vardır (e-posta mesajı gönderecek şekilde yapılandırılmayan
Web tarayıcılarından dolayı ortaya çıkan hatalar ya da bir e-posta programına
bağlanamama ve güvenliğin olmaması gibi). Formları işlemek için her zaman dinamik
sayfalar ya da CGI script’leri kullanmalısınız.
mailto eylemi başlangıç için formunuzu test etmenizi sağlasa da, formu ilgili
sunucu script’leriyle test etme işleminin yerini tutamaz. Sayfalarınızı her
zaman canlı bir ortamda ayrıntılı bir şekilde test edin. Böylece
ziyaretçilerinizin kullanımına sunmadan önce script’lerinizin beklendiği
şekilde çalıştığından emin olabilirsiniz.
1. training.html belgesinde Etiket Seçici’de <form#training> etiketine tıklayarak
formu seçin. Properties denetçisindeki forma ait Action metin alanına mailto:
ve bunun arkasına da e-posta adresinizi yazın. İki nokta üst üste işaretinden
sonra boşluk bırakmayın.
İki nokta üst üste işaretini eklemeyi ve boşluk bırakmamanız gerektiğini unutmayın. Ders
3’te de e-posta bağlantılarını bu şekilde elle eklemiştiniz.
2. Method açılır menüsünden POST’u seçin ve Properties denetçisindeki Enctype
metin alanına text/plain yazın.
Form Oluşturmak 407
Burada kodlama tipini düz metin olarak ayarladınız. Aksi takdirde, gönderilen metin
neredeyse okunamayacak bir şekilde kodlanacaktı.
Enctype seçeneği, formdaki verilerin nasıl kodlanacağını tanımlar. text/plain değeri, her
bir form nesnesine ait bilgiyi ayrı bir satırda biçimlendirir. Bu değeri kullanarak bir e-posta
mesajındaki verilerin daha kolay bir şekilde okunmasını sağlayabilirsiniz. Siz bir kodlama
tipi tanımlamazsanız, Web tarayıcısı verileri biçimlendirmek için varsayılan bir değer
kullanır. Bu varsayılan değer çoğu durumda kullanılması gereken değer olduğu için genelde
sizin bir enctype değeri belirlemeniz gerekmez. Buradaki örnek istisnadır. Çünkü e-posta
mesajında formu test etmek için kullanılacak olan verileri gönderiyorsunuz.
Formunuza bir konu satırı eklemek için Action metin alanındaki değeri aşağıdaki
ile değiştirin: mailto:YourEmailAddress?Subject=Title for Subject goes
here. ?Subject= ifadesi, arkasından gelen metni Konu (Subject) olarak tanımlar.
Konuda boşluk kullanabilirsiniz. Ama tırnak işareti, kesme işareti, nokta ya da
bölü gibi özel karakterler kullanmayın (?Subject= ifadesinde yer alan karakterler
hariç, çünkü bunlar e-posta ile konuyu birbirinden ayırır). Zira bu karakterler
HTML koduyla uyuşmazlık çıkarır. Bu, her Web tarayıcısında çalışmayabilir ve
formun test edilmesi dışında başka bir şey için kullanılmamalıdır.
mailto eyleminin bütün Web tarayıcılarında güvenli olarak çalışmayabileceğini unutmayın.
Bunu sadece test amacıyla kullanın. Eğer Web tarayıcınız e-posta mesajı gönderecek şekilde
yapılandırılmamışsa, formunuzu bu şekilde test edemezsiniz.
3. Dosyayı kaydedin ve Web tarayıcınızda test edin.
Önizleme için kullandığınız tarayıcıya bağlı olarak e-posta mesajı göndermeyle ilgili uyarı
mesajları alabilirsiniz. Bu mesajı onayladığınızda form sonuçları belirttiğiniz e-posta
adresine gönderilecektir.
4. Etiket Seçici’yi kullanarak <form#training> etiketini seçin. Action metin
alanındaki yazıyı silin ve Method seçeneğini GET olarak değiştirin. Dosyayı
kaydedin ve Web tarayıcınızda test edin.
Bu, formlarınızı test etmek için kullanabileceğiniz diğer bir yöntemdir. Burada sonuçlar epostayla gönderilmez. Web tarayıcısında formun bulunduğu sayfa kalır ve formdaki sonuçlar
tarayıcı pencerenizdeki Address (Adres) alanında yer alan URL’e eklenir.
Bu dosyayı kapatabilirsiniz.
408 DERS 11
Sıçrama Menüleri Oluşturmak
Sıçrama menüsü (jump menu), sitenizdeki ya da diğer Web sitelerindeki sayfalara giden
bağlantıları içeren bir menü tipidir. Normal bağlantılara benzer şekilde sıçrama menüsü
de her tip dosyaya (resim ya da PDF dosyaları da dahil olmak üzere) bağlanabilir. Sıçrama
menüsü, sitenizdeki sayfalara bağlantı atamak için kullanımı kolay bir arabirim sunar
(tabii eğer listeyi çok uzun tutmazsanız).
Forma gömülen bir sıçrama menüsü, Web tarayıcısında bir menü listesi gibi görünür.
Önceki kısımda anlatıldığı gibi herhangi bir eyleme ya da yönteme ihtiyaç duymaz. Çünkü
sıçrama menülerinde verilerin gönderilmesi, alınması ya da işlenmesi söz konusu değildir.
1. Lesson_11_Forms/Training klasöründeki training.html dosyasını açın. Ekleme
noktasını sayfanın sağ üst köşesinde yer alan “Anusara Yoga in the Heart of
San Francisco’s Mission District” metninin içinde herhangi bir yere yerleştirin.
Etiket Seçici’de <table.tagline> etiketine tıklayın. Sağ ok tuşuna basın ve
Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basarak yeni bir
satır oluşturun. Choose a Program yazın. Insert araç çubuğunun Forms
kategorisinde yer alan Jump Menu simgesine tıklayın.
Aynı işlemi, Insert > Form > Jump Menu komutunu seçerek de
gerçekleştirebilirsiniz.
Insert Jump Menu iletişim kutusu açılacaktır. Varsayılan durumda menüde “unnamed1”
adında tek bir öğe bulunur. Dreamweaver bu öğeler için otomatik olarak sayısal sırayla
genel tipte isimler atar (unnamed1, unnamed2, vb).
Form Oluşturmak 409
2. Insert Jump Menu iletişim kutusundaki Text metin alanına Pick One yazın.
When selected, go to URL metin alanına # yazın.
Menü öğeleri listesindeki ilk öğe menünün ilk satırında belirecektir. Ziyaretçi menü
listesinde ilk bu öğeyi gördüğü için, ilk satır, listenin kısa bir açıklaması ya da ziyaretçiye
bunun bir sıçrama menüsü olduğunu bildiren kısa bir ipucu niteliğinde olmalıdır.
3. Options alanında Select first item after URL change seçeneğini işaretleyin.
Bu seçim, ziyaretçi bu sayfaya geri döndüğü zaman, menü listesinin listedeki ilk öğeyi
görüntülemesini sağlar. Aksi takdirde listede en son işaretlenen seçenek görüntülenir.
Open URLs in menüsü, Ders 10’da yaptığınız gibi bağlantıları belirli
frame’lere yönlendirmek için kullanılabilir. Bu uygulamada varsayılan Main
Window seçeneğini değiştirmeyin.
4. Yeni bir menü öğesi eklemek için artı işaretine (+) tıklayın. Text metin alanına
Anusara Yoga Immersion yazın, Tab tuşuna basın ve When selected, go to
URL metin alanına immersion.html yazın. In-Depth Asana Training, asana.
html; Yoga Philosophy Series, philosophy.html ve Satsang: kirtan, meditation,
satsang.html değerlerini girerek bu adımı tekrarlayın. İşiniz bittikten sonra OK
düğmesine tıklayın.
Tarayıcı penceresinde bu öğeler seçildiğinde her bir öğe kendisine karşılık gelen sayfaya
bağlanacaktır. Bir bağlantı, ziyaretçi buna karşılık gelen öğeyi seçtiğinde etkinleşir.
Listenize bir Go (Git) düğmesi eklemek isterseniz Insert go button after
menu onay kutusunu işaretleyin.
410 DERS 11
Siz sıçrama menüsünü dahil ettikten sonra Dreamweaver gereken formu otomatik olarak
ekler. Bunu kırmızı noktalı çizgilerden de anlayabilirsiniz. Ekleme noktası satırın sonunda
bulunduğu için sıçrama menüsü metnin hemen altında oluşturulur. Eğer “Choose a
program” metninin sıçrama menüsüyle aynı satırda görünmesini isterseniz, bu metni
formun içine taşımanız gerekir. Tablo kullanımı, formlarınızın yerleşimi üzerinde size
daha fazla kontrol imkânı sağlar.
Menüdeki öğelerin sırasını ayarlamak için yukarı ve aşağı ok düğmelerini
kullanabilirsiniz.
OK düğmesine tıkladığınızda, eklemiş olduğunuz menü çok kısa görünebilir.
Ziyaretçilerin bunu nasıl gördüğünü anlamak için bir sonraki adımda sayfayı Web
tarayıcınızda önizleyeceksiniz.
5. Dosyayı kaydedin ve Web tarayıcınızda önizleyin.
Sıçrama menüsünü oluşturduktan sonra Properties denetçisini kullanarak bazı
değişiklikler yapabilirsiniz. Properties denetçisi sınırlı bir düzenleme imkânı sağlar
(ziyaretçinin göreceği metni ve metnin listedeki sırasını değiştirmek gibi).
Daha ayrıntılı düzenleme imkânı için sıçrama menülerini JavaScript’le birlikte
kullanabilirsiniz.
Formlarınızı Tek Başınıza Oluşturun
Form, Web sitenizi ziyaret eden insanlar hakkında bilgi toplamak için kullanabileceğiniz
mükemmel bir araçtır.
Sitenizin içeriğini gözden geçirin ve ziyaretçilerinizden ne tür bilgiler toplamanız
gerektiğini belirleyin. İşe, ihtiyacınız olan bilgi tiplerini bir taslak şeklinde belirleyerek
başlayın. Formlarla hangi verileri toplayacağınızı belirledikten sonra daha işlevsel ve etkin
bir form oluşturabilirsiniz. Gereken metin alanlarını, menüleri ve düğmeleri oluşturmak
için bu derste öğrendiğiniz teknikleri kullanabilirsiniz.
Formlarınız zamanında ve sık sık test edin. Formların kullanılabilirlik ve işlevsellik
özelliklerini değerlendirin.
Form Oluşturmak 411
Ne Öğrendiniz?
Bu derste şunları öğrendiniz:
• Bir Web sayfasında, üzerine form alanları yerleştirmek üzere bir form oluşturarak
ziyaretçilerinize size bilgi gönderme imkânı sağladınız (Sayfa 379–381).
• Form içeriğini gruplara ayırdınız ve bunların form nesneleri için alan kümeleri
kullandınız (Sayfa 381–382).
• Genişlik ve maksimum karakter sayısı gibi seçenekleri kullanarak tek satırlı metin
alanları eklediniz (Sayfa 383–390).
• Geniş bir ziyaretçi kitlesi tarafından kullanılabilecek bir form oluşturmak üzere
erişilebilir nitelikler kullandınız (Sayfa 384–390).
• Ziyaretçileri tek bir seçenekle sınırlamak için radyo düğmeleri eklediniz (Sayfa 390–393).
• Ziyaretçilerin birden fazla seçim yapabilmelerini sağlamak için onay kutuları
eklediniz (Sayfa 393–395).
• Liste kutuları ve birden fazla öğe içeren menüler eklediniz ve başlangıçta seçili olarak
görüntülenecek bir eleman belirlediniz (Sayfa 395–398).
• Çok satırlı bir metin alanı eklediniz ve satır sayısı, maksimum karakter sayısı ve metin
bölme yöntemiyle ilgili seçenekleri ayarladınız (Sayfa 398–400).
• Ziyaretçilerin formu göndermek ya da formdaki bilgileri silmek için kullanabileceği
Submit ve Reset düğmelerini eklediniz (Sayfa 401–403).
• Ziyaretçilerin görmeyeceği bilgileri forma dahil etmek için bir gizli alan eklediniz
(Sayfa 403–404).
• CSS kullanarak formu biçimlendirdiniz (Sayfa 404–407).
• mailto özelliğine sahip bir formu test ederek doğru çalışıp çalışmadığını kontrol
ettiniz (Sayfa 407–408).
• Ziyaretçilerin site içinde rahatça gezinebilmesini sağlamak için bir sıçrama menüsü
oluşturdunuz (Sayfa 409–411).
412 DERS 11