Bölüm 7

Formların Düzenlenmesi

Sayfa 4


<button>, <select>, <optgroup> ve <option>Elementleri

<button> Elementi

<button> Elementi, <input> elementinin "button" tipine benzer düğmeler oluşturur. Bu düğmeler, belge çözümleyicilerde aslında biraz daha güzel olarak görüntüleneceği belirtilmesine rağmen, uygulamada aynı şekilde görüntülenir. Her iki yöntemle de oluşturulan düğmeler, belge çözümleyicilerce, rollover tipinde, yeterince gözalıcı ve basma etkisi yapan düğmeler olarak görüntülenir. Bu düğmeler, birçok büyük şirketin Web dahil geniş ölçüde kullanılmaktadır. JavaScript kullanımı ile değişik şekillerden yararlanarak oluşturulan rollover düğmeleri de çok çekici olabilmelerine rağmen, uygulamada özellikle üç konuda sakıncası olduğundan eskisi kadar yaygın kullanılmamaktadır. Bu sakıncalardan ilki, özel rollover düğmeleri içeren Web sayfalarının, içerdikleri Javascript program adımlarından dolayı, hacımlarının genişlemesi ve iletim şürelerinin artmasıdır. Bu sakınca eskiden de vardı ve iletişim bant genişliği bugünkünden daha dar olmasına karşın, rollover düğmelerinin kullanımına engel sayılmıyordu. Windows XP Service Pack 2 altında çalışan Internet Explorer 6.029 SP1 artık script kodu içeren Web sayfalarını çözümledikten sonra, sayfayı görüntülemeden önce, "bu sayfanın açılması işletim sistemine zarar verir" gibi alarm verici bir uyarı mesajı görüntülemektedir. Kullanıcıların tamamına yakın büyük bir çoğunluğu tarafından kullanılan IE belge çözümleyicisinde bu mesajın verilmesi, en azından sayfalarında bir script programına rollover düğme oluşturmaktan başka bir gereksinmeleri olmayan kullanıcıların, JavaScript rollover düğmelerinden uzaklaşmalarına neden olmuştur. Aslında belki doğrusu da budur. İletişim bant genişliği için ücret ödendiği günümüz koşullarında, Web sayfalarının gereksiz yere yüklenmesi doğru bulunmayabilir. Bundan başka resimlerle metin kısımlarının yükleme hızları farklı olduğundan, rollover resimleri yükleninceye kadar, sayfanın görüntüsü güzel olmayabilmektedir. Ayrıca, bir çok kullanıcı da saf HTML düğmelerini de yeterince güzel bulmakta ve başka bir seçenek aramamaktadır. Bu konuda seçim yazarlara kalmıştır.

DTD deki <button> elementi tanımı,

 

 

şeklindedir. Buradan, <button> elementinin başlangıç ve sonuç iminin kullanımının zorunlu olduğu, içeriğinin boş olabileceği veya akış grubu ( blokdüzey ve satıriçi) elementlerden oluşabileceği, fakat çapa elementi, form kontrol grubu elementleri(<input>, <select>, <textarea>, <label> ve <button>), <form> ve <fieldset> elementlerinden birini içeremeyeceği anlaşılmaktadır. Sözdizimi:

<button                                  (Başlangıç imi : gerekli )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

type="(button | submit| reset)" [YZ]

name=CDATA [YZ]

value= CDATA [YZ]

disabled [YZ]

tabindex = Sayı [YD]

accesskey = Karakter [YD]

onfocus = "Script"  [TB] 

onblur = "Script"  [TB] 

>

İçerebileceği elementler :<anchor> elementi, form kontrol grubu elementleri(<input>, <select>, <textarea>, <label> ve <button>), <form> ve <fieldset> elementleri dışında, akış grubu ( blokdüzey ve satıriçi) elementleri

</button>                                  (Bitiş imi : gerekli )

şeklindedir.

<button> Elementini içerebilecek elementler : Blokdüzey ve satıriçi elementler (<button> dışında).

<button> Elementinin Nitelikleri

<button> Elementinin nitelikleri, <input> elementinin bazı nitelikleri ile tamamen aynıdır. Bu nedenle yeniden incelenmemişlerdir. Sadece, type niteliği üzerine bir hatırlatma yapmakla yetineceğiz. Eğer, <button> elementi, bir <form> elementinin içeriğinini oluşturuyorsa, ve formu sunma veya yenileme yaplılacaksa type nitelik değeri için "submit" ve "reset" değerleri kullanılabilir. Diğer durumlarda type nitelik değeri için "button" değeri kullanılmalıdır.

<button> Elementinin Uygulanması

<button> Elementi ile oluşturulan düğmelerin işlevselliği <input> elementinin "button", "submit" ve "reset" düğmeleri türleri ile tamamen aynıdır, fark <button> elementinin içeriğinin olmasıdır. İçerik olarak aşağıdaki örnekte olduğu gibi bir resim konulabilir. Yine de <button> elementinin içeriğindeki resmin güzel bir görüntü oluşturması koşullara bağlıdır. Internet Explorer ile elde edilecek sonuç, ortalanan resmin iki tarafından taşan bir rollover düğmesi görüntüsü olurken, Netscape Navigator önyüzü resim ile kaplı çok güzel bir rollover düğmesi oluşturmaktadır. Örnek :

Bu sayfa değişik belge çözümleyicilerle görüntülenerek düğmenin görüntü farkları incelenebilir. Bu tür düğmeler, değişik belge çözümleyicilerle değişik görüntüler oluşturduklarından, kullanımları yaygınlık kazanamamıştır. <button> Elementi kullanımı ile yukarıdaki örnekte olduğu gibi her türlü script programına veri sağlanması olanağı bulunmaktadır. Burada <input> elementi ve <button> elementinin kullanım koşulları eşdeğerdir. Normal görünümlü düğmeler için, <input> elementi yeterlidir. Değişik görünüşlü resimli düğmeler oluşturmak istendiğinde <button> elementi kullanılabilir. <button> Elementinin içeriğinde <map> elementi bulunabilmesine karşın, bu resimlere, görüntü haritalarının ilişkilendirilmesi yöntemi açıklanmamıştır. Bu konuda, şimdilik görüntü haritalarının, <button> elementi dışında, kendine özgü kullanımı ile yetinmek gerekecektir.

 

<select>, <optgroup> ve <option> Elementleri :

 

<select> Elementi :

Bu üç element seçenekli menüler oluşturarak, seçilen değerleri veri olarak script programlarına gönderirler. DTD de <select> elementi tanımı,

 

 

şeklindedir. Bu bilgilerden, <select> elementinin, başlangıç ve bitiş imlerinin kullanımları zorunlu, içeriği en az bir olmak üzere istendiği kadar <optgroup> veya <option> elementinden oluşmalıdır. <select> Elementinin sözdizimi,

<select                              (Başlangıç imi : gerekli )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

name=CDATA [YZ]

size=CDATA [YZ]

disabled [YZ]

multiple [YZ]

tabindex =Sayı [YD]

onfocus = "Script"  [TB] 

onblur = "Script"  [TB] 

onchange = "Script"  [TB] 

>

İçerebileceği elementler :En az bir tane olmak üzere, istendiği kadar <optgroup> veya <option> elementi

</select>                        (Sonuç imi: gerekli)

şeklindedir.

<select> Elementini içerebilecek elementler : Blokdüzey ve satıriçi elementler (<button> dışında).

<select> Elementinin Nitelikleri

name=CDATA [YZ] Bu nitelik, <select> kontrolüne bir isim verir.

size=CDATA [YZ] Bunitelik, <select> elementi kaydırmalı liste kutusu halinde görüntülendiğinde, görünebilecek seçenek sayını belirtir. Belge çözümleyiciler, <select> elementini mutlaka kaydırmalı liste kutusu halinde görüntülemezler, bazıları açılan listeler halinde görüntüleyebilirler. size Niteliği, çoklu seçim listelerinde seçilmiş verilerin bazılarını saklı tutabilir. Kullanıcılar bu durumdan tedirgin olur ve seçtikleri verileri, bir kaç kez kontrol etmek durumunda kalırlar. Uzun ve tek seçimli listelerde ise, size niteliği listenin görünen boyunu kısıtlayarak sunumun güzel görünmesini sağlar.

multiple [YZ] Bu nitelik, belirtildiğinde çoklu seçimlere olanak sağlar. Belirtilmediğinde, <select> elementi ile sadece tekli seçimler yapılabilir.

<optgroup> Elementi :

Bu element, birbirleri ile ilgili seçeneklerin bir seçenek grubu halinde biraraya toplanmasını sağlar. DTD deki tanımı,

 

 

şeklindedir. Buradan <optgroup> elementinin başlangıç ve bitiş imlerinin kullanımının zorunlu, içeriğinin en az bir tane olmak üzere, istendiği kadar <option> elementinden oluşması gerektiği görülebilir. <optgroup> elementinin sözdizimi,

<optgroup                          (Başlangıç imi : gerekli )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

disabled [YZ]

label=text [YD]

>

İçerebileceği elementler :En az bir tane olmak üzere, istendiği kadar <option> elementi

</optgroup>                        (Sonuç imi: gerekli)

şeklindedir.

<optgroup> Elementini içerebilecek elementler : Sadece <select> elementi.

<optgroup> Elementinin Nitelikleri

label=text [YD] Bu nitelik, <optgroup> elementine bir etiket metni sağlar.

<option> Elementi

Bu element, <select> elementi ile birlikte bir menü seçeneği sağlar. DTD deki tanımı,

 

 

şeklindedir. Bu bilgilerden, <option> elementinin başlangıç iminin zorunlu, bitiş iminin isteğe bağlı, içeriğinin seçilebilecek bir seçenek olduğu anlaşılır. <option> Elementinin sözdizimi,

<option                        (Başlangıç imi : gerekli )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

selected [YZ]

disabled [YZ]

label=text [YD]

value=CDATA [YD]

>

İçerebileceği elementler :Yok. Sadece bir tane pcdata formunda seçilebilir seçenek metni içerebilir .

</option>                        (Sonuç imi: isteğe bağlı)

şeklindedir.

<option> elementini içerebilecek elementler : Sadece <select> ve <optiongroup> elementleri.

<option> Elementinin bitiş iminin kullanımı isteğe bağlı olmasına karşın, kodların okunabilirliğinin artması için bitiş iminin kullanılmasında yarar bulunmaktadır.

<option> Elementi, <select> menüsü altında bir seçilebilir bir seçenek sağlar. Başarılı bir kontrol oluştuğunda, form ile birlikte sunucuya sunulan değer, kontrolun geçerli niteliğinin değeridir. Geçerli nitelik, eğer kullanıcı tarafından değiştirilmemişse value niteliğinin belirttiği başlangıç değeridir. Kullanıcı tyarafından seçilmişse, geçerli değer, içeriğinin değeridir. Bir script programını tarafından değiştirlmişse, geçerli değer herhengibir değer olabilir. Ön seçimli olmayan veya kullanıcı tarafından seçilmemiş bir kontrol başarılı bir kontrol oluşturamaz ve değeri sunucuya aktarılamaz. Script programları görünen ve görünmeyen kontrolleri duruma göre seçebilir ve değerlerini değiştirebilirler. Bu nedenle Web uygulamalarında güvenlik ve güvenirlik olağanüstü önem taşımaktadır.

<option> Elementinin Nitelikleri

selected [YZ] Bu Boole tipi (true/false) nitelik belirtildiğinde, kontrol ön seçimli duruma gelir.

disabled [YZ] Bu nitelik, kontrolun değerinin seçilemeyeceğini belirtir. Bu niteliğin bazı belge çözümleyicilerde değerlendirilmediğini ve kontrolün seçilebilir kaldığı konusunda, kullanıcılar uyarılmaktadır.

label=text [YD] Bu nitelik, seçeneğin belge çözümleyicide gerçek içerik yerine gösterilmesi için kısaltılmış bir metin sağlar. Seçeneğin seçilimesi sonunda, sunucuya döndürülecek olan değer daima gerçek içerik olacaktır. label Niteliği, bazen yararlı olabilirse de genellikle yanıltıcı olabilir. Kullanıcı, hiç düşünmediği bir değeri sunucuya kendi seçeneği gibi bilmeden aktarabilir. Bu nitelik şu anda hiçbir belge çözümleyici tarafından desteklenmemekte ve kullanımı da uygun karşılanmamaktadır.

value=CDATA [YD] Bu nitelik, seçeneğin başlangıç değerini belirtir. Bir form kontrolonünün bir başlangıç bir de sonuç değeri vardır. Başlangıç değeri value niteliği ile belirlenir ve formun her yüklenmesi (load) veya yeniden başlamasında (reset), kontrol başlangıç değerine geri döner. Geçerli değer ise, form sunucuya sunulduğunda (submit), kontrolun sunucuya aktardığı değerdir. Formun yüklenmesinde geçerli değer daima başlangıç değeridir. Formun dolduruluşu sırasında, kullanıcı etkisi veya bir script programının çalışması ile kontrolun değeri değişmiş olursa, geçerli değer değişmiş olur. Aksi halde form sunucuya sunulduğunda, kontrolün geçerli değeri yine başlangıç değeri olarak kalır. Eğer kontrolün value niteliği belirlenmemiş ise, kontrolun başlangıç değeri, içeriğinin değeri olarak kabul edilir.

Ön Seçim Yapılması Zorunluğu

Seçenekli menüler, birden çok <option> elementi içeriyorsa ve multiple veya size nitelikleri belirtilmemişse, bazı belge çözümleyiciler doğru olmayan şekilde bir seçeneği seçilmiş kabul edebilirler. Bunun önlenmesi için, ya bu niteliklerden birinin belirtilmesi, veya seçeneklerden birinin ön seçimli olarak bildirilmesi gerekir. Eğer ön seçimli olarak bildirilecek uygun bir seçenek bulunmazsa, bir dolgu seçeneği (dummy option) kullanılabilir.

Seçenek menülerinin belge çözümleyicilerce doğru çözülmeleri için, her menünün bir ön seçimli seçeneği olmasına dikkat edilmesi gerekmektedir.

Seçenek Menülerinin Uygulanması :

Herşeyden önce, seçenek menülerinin uygulanmasında, en az iki (<select> ve <option>) bazen de üç (<select>, <optgroup> ve <option>) elementleri kullanılacaktır. Bu uygulamanın iyi tasarlanmış olması için, tüm bu elementlerin niteliklerinin doğru olarak belirtilmesi gerekmektedir.

Seçenek kontrolleri, önce <select> elementi belirtilerek başlanacaktır. Bu elementin nitelikleri arasındaki, name niteliği, kontrolun başarılı olması durumunda sunucuya aktarılacak değişken adını oluşturur. multiple Niteliği, çoktan seçimin diğer seçenekleri dışayıp dışalamayacağını belirtir. Yani multiple niteliği belirtilirse, çoktan çoklu seçim, belirtilmezse çoktan tekli seçim yapılabileceği bildirilir. size Niteliği, seçenek menüsünün açılan listesinde kaç tane satır bulunacağını belirtir. Diğer satırlar, bir kaydırma çubuğu makanizması ile kullanıcının seçimine sunulurlar.

<optiongroup> Elementinin işlevi, label niteliği yardımı ile kullanıcıya kolaylık sağlayacak bir alt menü gösterimine olanak sağlamasıdır.

<option> elementin label niteliği belge çözümleyicilerde henüz desteklenmemektedir. Önseçimli seçenekler varsa, bunların belirtilmesi gerekir. Birden çok seçeneğin seçilemediği durumlarda, birden çok önseçimli seçeneğin bulunmamasına dikkat edilmelidir. Sadece seçilmiş seçenekler başarılı kontroller oluşturur ve değerleri sunucuya aktarılabilir. Aksi halde hiçbir değer sunucuya yüklenmez. Önseçimli seçenekler ise, başarılı kontroller oluşturmanın ilk koşulu olan seçilmişlik koşuluna önden sahip olmuş ve değerinin sunucuya aktarımı hazır olan kontrollerdir. Formu içeren dosyanın sunucu ile ilişki kurabilecek bir konumda olması koşulu da gerçekleşirse, ön seçimli kontroller, otomatik olarak başarılı kontrol olurlar ve form sunucuya sunulduğunda değer aktarımları gerçekleşir. iletişimin yükünü arttırmamak için, gerekli olmadığı durumlarda, seçenekleri önseçimli olarak belirtmemekte yarar bulunmaktadır.

İlk önce basit bir uygulama ile seçenek menülerinin kullanımı için bir örnek verelim:

Hangi ev hayvanınız var ?

Bu örnek, multiple niteliği bildirilmemiş olduğundan tekli bir seçim listesidir. size ve multiple nitelikleri belirtilmediği için, sunucuya yanlış bir veri gönderilmesini engellemek amacı ile önseçimli bir dolgu verisi kullanılmıştır. Bu dolgu verisi sunucuya aktarılsa bile hiçbir etki etmeyecek şekilde belirlenen ilk ön seçimli seçenektir ve aynı zamanda bir mesaj olarak da görev yapmaktadır.

Bu seçenek listesinin, çoklu seçime olanak sağlayan şekli aşağıda görülmektedir.

Hangi ev hayvanınız var ?

Aşağıda, aynı listenin tek seçimli ve sadece 3 satırı görüntülenen bir şekli görülmektedir.

Hangi ev hayvanınız var ?

Bu örnekte ise, seçenekler iki seçenek grubunda toplanmıştır :

Tüm bu örnekler, Internet Explorer 6.02 SP2, Mozilla 1.7, Mozilla Firefox 1.5 beta, Opera 8 da ne Netscape 8 de düzgün bir şekilde görüntülenebilmektedir.

 

 

Wednesday, October 5, 2005 17:48

validate in W3C !Valid HTML 4.01!