A-PDF Split DEMO : Purchase from to remove the watermark

Transkript

1 A-PDF Split DEMO : Purchase from 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.

2 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

3 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

4 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

5 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 iletişim kutusu açılacaktır. Fieldset Form Oluşturmak 381

6 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

7 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

8 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

9 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

10 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

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

12 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 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ı , 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

13 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 metin alanı seçili durumdayken Properties denetçisindeki Init val metin alanına Enter Your 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 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

14 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

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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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