Bu makalemizde ekrana Ali Veli yazmaktan bir adım daha öteye geçerek, metin kutuları, açılır listeler ve butonlar gibi kontrolleri sayfaya nasıl yerleştireceğimizi göreceğiz.

Aslında anlatılacak çok şey var ama burada bir virgül koyarak, form kontrollerini görmemiz gerekiyor. Aksi taktirde sadece Ali ve Veli'yle programcılığa başlama hevesini koruyamayacağımın farkındayım.

"Form Kontrolleri" isimli makaleyi iki parçaya böldüm. İlk kısmı olan bu makalede, form kontrollerinin çeşitlerini ve bunları ekrana nasıl yerleştireceğimizi inceleyeceğiz. Bu yüzden makalemizin içeriği JavaScript'ten daha çok HTML ve CSS ağırlıklı olacak. İkinci kısım olan bir sonraki makalede ise, sayfaya yerleştirdiğimiz bu kontrolleri JavaScript ile etkileşimli olarak nasıl kullanacağımızı göreceğiz inşallah.








Makalemiz boyunca göreceğimiz HTML elemanlarını aşağıdaki gibi listeleyebiliriz.
  • Metin kutuları (textBox)
  • Şifre kutuları (passwordBox)
  • Onay kutuları (checkBox)
  • Radyo düğmeleri (radioButton)
  • Metin alanları (textArea)
  • Etiketler (label)
  • Açılır listeler (dropDownList)
  • Listeler (listBox)
  • Butonlar (button)
  • Gruplama kutuları (fieldSet)
  • Blok kutuları (div)


Elbette sayfamızda kullanabileceğimiz elemanlar bunlarla sınırlı değil. Örneğin buradakiler gibi kontroller olabileceği gibi, bunlar gibi belki de binlerce çeşit kontrol de mevcuttur. Hatta bir süre sonra, kendi ihtiyacımızı karşılayan kendi özel kontrolleri de yazmaya başlayacağız inşallah. Ama burada önemli olan, kontrollerin kullanım mantıklarını anlamaktır. Yukarıdaki temel kontrolleri anladıktan sonra, ihtiyaç durumunda diğer kontrollerin de anlaşılması çok daha kolay olacaktır.

Yukarıdaki elemanlara tek tek giriş yapmadan önce bilmemiz gereken birkaç ufak nokta var. Öncelikle Web üzerinde çalışan bir uygulama geliştiriyorsak, aşağıdaki üç dili kullanıyoruz demektir.
  • HTML
  • CSS
  • JavaScript

Sonuncusu zaten bizim biricik sevgilimiz. HTML (Hyper Text Markup Language) ise, işlevsel kod barındırmayan bir işaretleme dilidir. Şimdiye kadarki örneklerimizde kullandığımız HTML dokümanı boş bir sayfadan ibaretti. Ancak <body> </body> arasına yazdığımız ifadeler, direk ekranda görüntülenecektir. Hemen bir örnek üzerinde görelim. Aşağıdaki kodları sayfa.html ismi ile masaüstüne kaydedelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

Ali

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Ali yine karşımıza çıktı. Buradan anlıyoruz ki, body içerisine yazdığımız normal metinler direk sayfada gösteriliyor. Ancak HTML için özel anlamı olan ifadeler de vardır. Bunlara HTML Tag'ı ismi verilir. Örneğin <b> </b> tagı içerisinde yazılan metinler, kalın (bold) şekilde ekrana basılır. Yine örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<b>Ali</b>

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Görüldüğü üzere <b> ifadesi direk ekrana yazılmak yerine özel bir şekilde yorumlanarak işlem gördü. Yukarıda listesini verdiğim tüm form elemanları da HTML Tag'larından ibarettir. Birazdan her bir elemanı sayfaya yerleştirmek için eklememiz gereken HTML Tag'ını ve kullanımını göreceğiz.

Bir de CSS dedik. CSS (Cascading Style Sheets) bir stil dilidir. Yani ekrana eklenen HTML elemanının nasıl görüneceğini veya görünmeyeceğini belirler. Örneğin eklenen butonun rengi, ekranda duracağı yer, hatta ekranda 45 derece açıyla durmasını CSS vasıtasıyla söyleriz.

CSS'i bir elemana eklemenin pek çok yolu vardır ancak şimdilik kafa karıştırmamak amacıyla satır içi kullanımına bir örnek veriyorum.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<button style="width:300px;color:#ff0000;">Test</button>

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Yukarıdaki örnekte ekrana bir buton ekledik ki, bunun kullanımını aslında birazdan göreceğiz. Burada odaklanılması gereken yer style="xxxxx" ifadesi. CSS kodlarını, HTML elemanının "style" özelliğine yazarız. Biz burada butona bir genişlik verdik ve yazı rengini değiştirdik. Vakti geldikçe, bilmemiz gereken CSS kodlarını anlatacağım. Şimdilik sadece göz dolgunluğu olması açısından gösteriyorum.

Artık makalenin asıl konusu olan form elemanlarına geçebiliriz.


Metin kutuları (textBox)

En temel ve en çok kullanılan form kontrolü ile başlıyoruz. Metin kutuları, kullanıcıdan veri almak için kullanılır. Bu veri örnek olarak, yeni üye olduğu bir forum için kullanıcı adı olabileceği gibi, internet bankacılığına girişteki müşteri numarası da olabilir. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

Adi Soyadi : <input type="text" />

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Örnekte de görüldüğü gibi, sayfaya bir metin kutusu eklemek için kullanmamız gereken HTML tagı "<input />" şeklindedir. Bu tagın ayrıca bir kapatma tagı yoktur.


Şifre kutuları (passwordBox)

Bu kontrol aynı metin kutusuna benzer ancak içerisine yazdığımız veriler direk gözükmek yerine maskelenmiş şekilde gözükür. Girildiğinde başkaları tarafından gözükmemesi gereken verileri almak için idealdir. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

Sifre : <input type="password" />

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Bu kontrol için de yine "<input />" tagını kullanıyoruz ancak bu sefer tagın "type" özelliğine "password" değerini atıyoruz, hepsi bu kadar. Böylece tarayıcı bizim için metin kutusunu maskeliyor.


Onay kutuları (checkBox)

Onay kutuları, kullanıcıdan evet/hayır cevabını almak için kullanılır. Örneğin "sözleşmeyi okudum ve onaylıyorum" veya "Metnin bir kopyasını da bana mail olarak gönder" gibi. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<input type="checkbox" /> Kabul Ediyorum

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Benzer şekilde, bu kontrol için de "<input />" tagını kullanıyoruz ancak tagın "type" özelliğine "checkbox" değerini atıyoruz. Böylece tarayıcı bizim için sayfaya bir onay kutusu yerleştiriyor.


Radyo düğmeleri (radioButton)

Radyo düğmeleri, birden fazla seçenekten sadece birinin seçilmesi gereken durumlarda kullanılır. Örneğin "cinsiyet erkek/kadın" veya "Sayfanın arka fonu sarı/kırmızı/mavi olsun" gibi. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<input type="radio" name="color" value="Sari" /> Sari<br>
<input type="radio" name="color" value="Kirmizi" /> Kirmizi<br>
<input type="radio" name="color" value="Mavi" /> Mavi

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Yine "<input />" tagı karşımıza çıkıyor ancak tagın "type" özelliğine "radio" dediğimiz gibi, bir de her radyo düğmesine birer "value" ve ortak bir "name" özelliği ekliyoruz. Bunun ne işe yaradığını bir sonraki makalede göreceğiz inşallah.


Metin alanları (textArea)

Metin alanlarını, metin kutularının birden fazla satır kabul eden hali gibi düşünebilirsin. Genellikle adres gibi nispeten daha uzun metin girilmesi gereken yerlerde kullanılır. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

Mesaj :<br>
<textarea cols="20" rows="5"></textarea>

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Örnekte de görüldüğü gibi, bu kez "input" değil, "textarea" şeklinde yeni bir tag kullandık. Input'tan farklı olarak, bu tagın bir de kapanış tagı bulunuyor. Özellik olarak "cols" ile kaç sütun genişliğinde, "rows" ile kaç satır yüksekliğinde olacağını bildiriyoruz.


Etiketler (label)

Şimdiye kadar sayfaya eklediğimiz form kontrollerinin soluna veya üstüne, o kontrolün ne işe yaradığını gösteren küçük birer kelime ekledik. "label" kontrolü de tam olarak bu iş için kullanılır ama küçük bir farkla. Normalde sayfadaki metinlere tıklandığında bir şey olmazken, label kontrolüne tıklandığında, ilişkili olduğu kontrol seçili hale gelir. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<label for="name">Adi :</label><input type="text" id="name" /><br>
<label for="surname">Soyadi :</label><input type="text" id="surname" />

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Örneğimizde iki adet metin kutusu ve bunların solunda da birer label kontrolü bulunuyor. Şimdiye kadarki örneklerden farklı olarak, metin kutularına "id" özelliği ekledik. Bir sonraki makalemizde daha geniş bir şekilde göreceğiz inşallah ancak "id" özelliği ile bir anlamda kontrollere isim veririz ve daha sonradan bu isim üzerinden kontrollere ulaşarak çeşitli işlemleri gerçekleştiririz.

Burada label kontrollerinin "for" özelliğine, ilişkili olmasını istediğimiz metin kutusunun "id" özelliğini atadık. Böylece label kontrollerine tıklandığı takdirde, ilişkili olduğu metin kutusu seçildi.


Açılır listeler (dropDownList)

Birkaç başlık öncesinde radyo düğmeleri kontrolünü görmüştük ve birden fazla seçenekten sadece birinin seçilmesi istendiği durumlarda kullanıldığını söylemiştik. Seçenek sayısı fazla olmadığı durumlarda bu kontrolün kullanılmasında bir sıkıntı yoktur ancak, örneğin "yaşadığı şehir" gibi fazla sayıda seçeneğin bulunduğu durumlarda radyo düğmeleri kullanılamaz. Bunun yerine açılır listeler tercih edilir. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

Kan Grubu :
<select>
    <option value="0+">0 rh+</option>
    <option value="A">A rh+</option>
    <option value="B">B rh+</option>
    <option value="AB">AB rh+</option>
</select>

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Görüldüğü gibi bu kontrol ile sayfada az bir yer kaplayarak daha fazla veriyi sunma imkanına kavuşuyoruz. Bunun için bir "select" tagı ve seçenek sayısınca da "option" tagı yazıyoruz. Burada option tagının "value" özelliği, her bir seçeneğin gözle görülmeyen değeridir ve bir sonraki makalede işimize yarayacak inşallah.


Listeler (listBox)

İşin aslı, bu kontrolün bir önceki kontrolden, yazım olarak pek bir farkı bulunmuyor. Sadece birden fazla seçim yapılabileceğini gösteren "multiple" özelliğini "select" tagına ekliyoruz. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

Kan Grubu :
<select multiple>
    <option value="0+">0 rh+</option>
    <option value="A">A rh+</option>
    <option value="B">B rh+</option>
    <option value="AB">AB rh+</option>
</select>

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Burada, bir önceki örneğimizden farklı olarak kullanıcıya birden fazla seçeneği ctrl veya shift tuşları ile seçme özgürlüğünü kazandırmış oluyoruz.


Butonlar (button)

İşte metin kutuları kadar çok kullanılan bir diğer temel kontrol daha. Butonlar, kullanıcının talebi üzerine ihtiyaca yönelik işlemleri başlatmak için kullanılır. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<button>Test</button>

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Görülüğü gibi, sayfaya bir buton eklemek için "button" tagından faydalanıyoruz. İki tag arasına yazılan metin de butonun üzerine yazılıyor. Butona tıklandığında bir aksiyonu gerçekleştirme işini bir sonraki makalede göreceğiz.


Gruplama kutuları (fieldSet)

Sayfamızdaki kontrollerin sayısı, kullanıcıların ekrana bakarken yaşadığı tedirginliğin şiddeti ile doğru orantılıdır. Bu tedirginliği mümkün mertebe önleyebilmek için, uygun şekilde kontrolleri gruplamamız ve kullanıcılara ekran üzerinde hakimiyet hissi kazandırmamız gerekir. Bunun için kullanılan en temel yöntemlerden birisi gruplama kutularıdır. Örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<fieldset>
<legend>Kullanici Bilgileri</legend>
<label for="name">Adi :</label><input type="text" id="name" /><br>
<label for="surname">Soyadi :</label><input type="text" id="surname" />
</fieldset>

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Birbirleri ile alakalı olan kontrolleri, "fieldset" tagı ile grup içerisine alırız. Ayrıca grubun sol-üst kısmına başlık yazmak için de, fieldset tagı içerisinde "legend" tagını kullanırız.


Blok kutuları (div)

Geldik makalemizdeki son kontrole. İşin aslı bu bir form kontrolü değil, HTML tagı. Ancak form kontrolleri ile birlikte çok sık kullanıldığı için makale kapsamına almak istedim. "div" tagı, aynı frameset tagı gibi kontrolleri gruplamak için kullanılır. Ancak bir farkla; div tagı normal şartlar altında ekranda gözükmez.

"Madem ekranda gözükmüyor, niye kullanıyoruz?" sorusu buraya gayet iyi yakışıyor. Aynı metinler için kullandığımız "span" tagı gibi, bazen (aslında çoğu zaman) bir grup elemanı bir yere taşımak, gizlemek ve çeşitli etkilere maruz bırakmak için gruplamak isteriz ancak gruplamak için kullandığımız bileşenin sayfada yokmuş gibi gözükmemesini isteriz.

İşin doğrusu div tagı, modern webin tuğlası olarak görülebilir. Standart bir sayfada ortalama 50-60 tane div tagı bulunması gayet muhtemeldir. Haydi bir de örnek üzerinde görelim.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<div style="border: 1px solid;width: 250px;">
<label for="name">Adi :</label><input type="text" id="name" /><br>
<label for="surname">Soyadi :</label><input type="text" id="surname" />
</div>

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


"Gözükmez" dedik ama burada gözükmesi için taga özellikle "style" verdim ki neden bahsettiğimizi anlayabilelim. Eğer ki style özelliğini kaldırırsan, halen sayfada olmasına karşın gözle gözükmeyecektir.


Böylece temel form kontrolleri makalesinin sonuna geldik. Bir sonraki makalede, burada gördüğümüz kontroller ile program yazmaya geçmeden önce öğrendiklerimizi özetlemeye çalışalım.
  • Web üzerinde çalışan bir uygulama geliştiriyorsak, aşağıdaki üç dili kullanıyoruz demektir.
    • HTML
    • CSS
    • JavaScript
  • HTML bir işaretleme dili, CSS ise bir stil dilidir. Her ikisi de JavaScript gibi program yazılabilen diller değil, ekranda hangi bileşenlerin nasıl görüneceğini tarifleyen dillerdir.
  • Bu iki dil ile sayfaya eklediğimiz bileşenlere JavaScript üzerinden erişerek ihtiyaç duyulan program fonksiyonalitesini kazandırırız.
  • Sayfaya eklenebilecek form kontrollerinin sayısı oldukça fazla olmasının yanında, en temel kontrolleri şu şekilde sıralayabiliriz.
    • Metin kutuları (textBox)
    • Şifre kutuları (passwordBox)
    • Onay kutuları (checkBox)
    • Radyo düğmeleri (radioButton)
    • Metin alanları (textArea)
    • Etiketler (label)
    • Açılır listeler (dropDownList)
    • Listeler (listBox)
    • Butonlar (button)
    • Gruplama kutuları (fieldSet)
    • Blok kutuları (div)
  • Tüm bu kontroller, kendilerine ait HTML Tag'ları vasıtasıyla sayfaya eklenirler.


Geri
Döngüler
İleri
Bu en son makaledir

Yorum Gönder

  1. makalelerin devamı olacakmı hocam

    YanıtlaSil
  2. ikinci kısımı bekliyoruz hocam.

    YanıtlaSil
  3. Harika bir anlatım olmuş teşekkürler, keşke javascript de css ve html kadar anlaşılabilir olsa..

    YanıtlaSil

 
Top