24 Mayıs 2011 Salı

Web Sayfasına Textbox (Yazı Kutusu) Eklemek

Textboxlar web sitelerinin kullanıcı kayıt formlarında veya üye giriş panellerinde sıkça rastladığımız, üyelerin ya da üye olacak ziyaretçilerin ad, soyad kullanıcı adı, şifre v.b. bigilerini toplamak için kullanılan HTML form elemanlarıdır. Web sayfasına textbox; için < input type="text" / > tagı ile eklenir. Bu tagın genel kullanılış biçimi şu şekildedir,

< input maxlength="40" name="ad" title="Adını Yaz" type="text" value="Kullanıcı Adı" width="150" height="20" / >

Daha iyi anlaşılması açısından bu tag'ın nasıl kullanıldığını bir örnek üzerinde gösterelim.

Kullanıcı Adı : < input type="text" name="ad" value="e-mail adresiniz" title="Kullanıcı Adını Yaz" maxlength="40" width="150" height="20" / > < br/ >
Şifre : < input maxlength="15" name="ad" title="Şifreni Yaz" type="password" value="" width="150" height="20" / >

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir,

Kullanıcı Adı :

            Şifre :

Son olarak bu tag içindeki parametreleri de açıklayalım.

name : Textbox'u isimlendirmek için kullanılır. Burdan alınan bilgilerin sunucudaki programda işlenmesi için gereklidir.

maxlenght : Textbox'a girilecek karakter sayısını kısıtlamak için kullanılır.

height : Kutu yüksekliğini belirlemek için kullnılır.

width : Kutu genişliğini belirlemek için kullanılır.

value : Textbox'a ilk değerini vermek için kullanılır. Buraya yazdığınız yazı kutu içinde görüntülenir. Kullanıcını kutuya herhangi bir değer(ad, soyad bilgisi, şifre gibi)girdiği zaman başlangıç değeri değişir ve yeni değer işlenmek üzere sunucuya gider.

title : Kullanıcı fare ile kutu üzerine geldiğinde görüntülenmek istenen bilgi mesajı için kullanılır.

Not : Verdiğim kod örneğinde turuncu ile işaretlediğim yer dikkatinizi çekmiştir. Eğer "type" parametresine değer olarak "password" girerseniz browser kullanıcının girdiği şifreyi göstermez onun yerine yıldız veya içi dolu dairecikler koyar.


23 Mayıs 2011 Pazartesi

Web Sayfasına Radiobutton Eklemek

İnternette gezinirken uğradığınız sitelerin kayıt formlarında sıklıkla karşılaştığınız daire şeklindeki onay kutucukları hepinizin dikkatini çekmiştir. "radiobutton" adı veriilen bu elemanlar kullanıcılara çoktan seçmeli sorular sormak için kullanılırlar. Genelde medeni durum, cinsiyet gibi tek cevap gerektiren sorular sorulurken kullanılırlar. Bu tip elemanlar site sahiplerinin ziyaretçilerle ilgili bilgi toplamalarını kolaylaştırır. Ayrıca günümüzde oldukça yaygınlaşmış olan alışveriş sitelerinde de kulanıcılar için ürün seçimi, fiyat aralığının belirlenmesi, marka seçimi gibi konularda kolaylık sağlar. Gelin şimdi bu minik elemanın nasıl kullanıldığına bir bakalım ;

Radiobuttonlar web sayfalarına < input type="radio" / > tagı ile yerleştirilir. Bu tagın genel kullanımı şu şekildedir,
Siteye kaydolmak isteyen bir ziyaretçinin cinsiyetinin sorgulanması

Lütfen cinsiyetinizi belirtiniz:
< input type="radio" name="cinsiyet" value="k" title="Birini Seçin" />Kadın < br/ >
< input type="radio" name="cinsiyet" value="e" title="Birini Seçin" />Erkek < br/ >

Bu kodlamanın sonucu şu şekilde görüntülenir,

Lütfen cinsiyetinizi belirtiniz:
Kadın
Erkek

Bu tag içindeki parametreleri de açıklayalım.

name : Radiobutonları gruplandırmak için kullanılır. Bu şekilde kullanıcının iki seçenekten yalnızca birini seçebilmesi sağlanır. İsimler farklı olursa iki seeçenek de işaretlenebilir. Bu da kullanıcı bilgilerinde karmaşaya yol açar. Bu yüzden aynı türden seçmeli sorularda radyobutonlara verilen isimler de aynı olmalıdır.

value : Radyobutondan yapılan seçimle ilgili bir değerin sunucuya aktarılması için kullanılır. Aktarılan değer sunucuda işlenir ve veri tabanına kaydedilir. Mesela bu örnekte erkek seçilirse sunucuya "e" değeri yollanmış olur.

title : Fare ile radiobutton üzerine gelindiğinde görüntülencek bilgi mesajı için kullanılır.