Neler Öğreneceğim?
- YORUM KUTUSU YAPMA
- RADIO VE CHECKBOX BUTONLARI
- CHECKBOX KULLANIMI
- RADIOBUTTON KULLANIMI
- ÖĞELERİN YANINA YAZI YAZMA
- DISABLED KOMUTU
- SELECT KODU
- ALT MENÜLÜ SELECTS KODU
- ALT MENÜSÜZ SELECT KODU
Gereksinimler
- Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
YORUM KUTUSU YAPMA
Günümüzde artık blog modası oldukça ileri seviyeye geldi. Bir gün içerisinde birçok blog sitesini ziyaret edebiliyoruz. Bunların hepsinde yorum kutuları bulunuyor.
Bu zamana kadar birçok işlevsel boyutlandırma kodu görmüştük, bu kısımda tekrar bize yardımcı olacak bir kod ile karşı karşıyayız. Bu kod sayesinde yorum kutusunun büyüklüğünü yani yazılabilecek satır sayısını kolaylıkla küçültüp büyültebileceksiniz.
Yorum kodu için gerekli olan kodlarımız aşağıdaki gibidir :
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Yorum Kutusu</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<textarea class="form-control" rows="5"></textarea>
</div>
</body>
</html>
Bu kısımda bize yardımcı olan kısım "rows" kısmıdır. Görüldüğü üzere yazıyor, bu "5" sayısı kaç satırlık bir yorum kutusu olacağını belirler.
Kodumuzun çıktısı aşağıdaki gibi olacaktır :
Görüldüğü gibi "5" satırlık bir yorum paneli ortaya çıkmıştır. Kutumuz bu şekilde belirsiz bir hale geldi, yani kullanıcı yorum kutusu olduğunu anlamayabilir. Bu yüzden "placeholder" komutu sayesinde ufak bir açıklama ekleyebiliriz.
Yeni kodumuz aşağıdaki gibidir :
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Yorum Kutusu</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container"><br />
<textarea class="form-control" rows="5" placeholder="Bir yorumu esirgemeyin."></textarea>
</div>
</body>
</html>
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır:
Görüldüğü gibi ufak açıklama geldi fakat yazımızı yazdığımızda bu belirteç otomatik olarak ekrandan gidecektir.
Örnek olarak "row" değerini "15" yaptığımızda çıktı aşağıdaki gibi olacaktır :
Görüldüğü gibi girilebilecek satır sayısı 15 oldu.
RADIO VE CHECKBOX BUTONLARI
Bu butonları aslında birçok programlama dilinden biliyor olabilirsiniz. Özellikle web sitelerinde gündelik hayatta oldukça gördüğümüz iki öğe olduğunu söyleyebilirim.
Bu öğelerden özellikle "CheckBox" genelde karşımıza "Beni Hatırla" metni ile karşımıza çıkıyor. Bazı sitelerde "Sözleşme koşullarını kabul ediyor musunuz?" gibi yazılı metinlere onay verirken de kullanılıyor. Bununla beraber resmi ve önemli işlerde mutlaka onay almak için gerekli bir öğe olduğunu belirtmemde fayda var. Özetle onay almak için kullanılıyor diyebiliriz.
Kodların kullanımında "div" etiketine sınıf vererek ve ara element olarak "input" ve "label" etiketlerini kullanarak öğeler' oluşturacağız.
CHECKBOX KULLANIMI
İlk olarak "CheckBox" öğesini nasıl kullanabiliriz bundan bahsedeceğim.
Bu aşamada ilk olarak bir "div" etiketi açıp sınıf oluşturmamız gerekiyor.
Kodlar aşağıdaki gibidir :
<div class="checkbox">
......
</div>
Görüldüğü gibi "CheckBox" öğemiz için "checkbox" isimli bir sınıf tanımladık.
Bu kısımda önemli olan div etiketidir, çünkü bu "div" etiketi sayesinde diğer kodlarımız yapılanacak.
Diğer kodlarımız ise aşağıdaki gibidir:
<div class="checkbox">
<label>
.....
</label>
</div>
Label kodumuzu "div" etiketinin içine ekledik.
Son aşamada kodlarımız aşağıdaki gibidir:
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
Görüldüğü gibi son olarak "input" kodumuzu ekleyerek "CheckBox" öğemizi oluşturduk.
Şunu belirtmek istiyorum. Kullandığımız "div" etiketi "CheckBox" içindir o etiketin üstüne herhangi başka bir "div" etiketi ekleyebilirsiniz. Bu sayede iç içe kullanım oluşmuş olacaktır.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır :
Tıklama yapıldığında ise resimdeki gibi olacaktır :
RADIOBUTTON KULLANIMI
RadioButton öğesi de birçok yerde karşılaştığımız bir öğedir ve görsel olarak yuvarlak bir görünüme sahiptir.
Bu kısımda yer alan kullanım mantığı "CheckBox" öğesi ile aynı mantığa sahiptir. Sadece sınıf isimleri değişiyor.
Gerekli olan kodlarımız aşağıdaki gibidir :
<div class="radio">
<label>
<input type="radio">
</label>
</div>
Görüldüğü gibi "sınıf" ve "tip" olarak "radio" yazdık.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır:
Görüldüğü üzere ekranda boş bir yuvarlak belirdi.
Tıklandığında ise çıktı aşağıdaki gibi olacaktır:
Görüldüğü gibi çıktısı resimdeki gibidir. Burada belirtmem gereken önemli bir husus var. Bu butonlar kullandığınız işletim sistemine göre stil almaktadır.
ÖĞELERİN YANINA YAZI YAZMA
Bu iki öğeyi kullandığımızda sadece öğeyi gördük. Şimdi ise bunların yanına nasıl kolayca yazı yazabiliriz bundan bahsedeceğiz.
Kodlarımızı yazarken "label" etiketini daha önceden kullanmıştık. Şimdi ise tekrar "label" etiketini kullanacağız. Aslında yapacağımız işlem çok basit, sadece "input" etiketinin alt satırına sağ tarafta gözükmesini istediğimiz yazıyı ekleyeceğiz.
Gerekli olan kodlarımız ise aşağıdaki gibidir :
<div class="container">
<div class="checkbox">
<label>
<input type="checkbox">
Beni her zaman hatırla...
</label>
</div>
</div>
Görüldüğü gibi "input" etiketinin hemen altına yazmak istediğimiz yazıyı yazdık.
Kodun çıktım ise aşağıdaki gibi olacaktır:
Görüldüğü gibi yazımız "CheckBox" öğesinin sağ tarafına yerleşti.
Şunu belirtmeliyim ki bu kullanımın aynısını "RadioButton" öğesinde de kullanabilirsiniz.
DISABLED KOMUTU
Bu komut sayesinde "RadioButton" veya "CheckBox" öğenizi deaktif edebilirsiniz. Yani hem mantıksal açıdan, hem görünümsel açıdan devre dışı edildiğini kullanıcı görebilecek, bununla beraber o kısma gelince fare imleci yani "cursor" blok işaretine dönüşecektir.
Disabled komutu sadece burada geçerli olmayacaktır, ilerleyen sayfalarda "input" etiketleri içinde nasıl bu komutu kullanabiliriz bundan bahsedeceğiz.
Kodlarımız ise aşağıdaki gibidir :
<div class="container">
<div class="radio disabled">
<label>
<input type="radio">
Beni lütfen hatırla....
</label>
</div>
</div>
Kodumuz çok basit bir kullanıma sahip. Sadece "radio" sınıfının yanına bir boşluk vererek "disabled" yazdık.
Kodun çıktısı ise aşağıdaki gibi olacaktır :
Resimde görüldüğü üzere fare imleci üzerinde bir yuvarlak blok işareti belirdi. Bu sayede kullanıcı için bu alanın kullanılmaz olduğunu belirtmiş olduk.
SELECT KODU
Bu kod seçim yapmak için kullanılan bir koddur. Kullanım tarzı ise örneğin; bir çiçek mavi renk olsun, diğeri kırmızı olsun gibi. Bu çiçekler arasından
kullanıcının seçim yapmasını bu kod ile sağlayacağız.
select kodları iki kısımda inceleniyor. Daha doğrusu iki çeşit türü bulunuyor. Bunlardan bir tanesi alt menülü diğeri ise alt menüsüz.
ALT MENÜLÜ SELECTS KODU
Bu kodda olan mantık, ilk veriyi ana kutuda göstermektir ve diğer verileri ise tıklandığı zaman açılır menü ile göstermektir.
Gerekli kodlarımız ise aşağıdaki gibidir :
<div class="container">
<select class="form-control">
<option>Mavi Çiçek</option>
<option>Kırmızı Çiçek</option>
<option>Sarı Çiçek</option>
<option>Mavi Çiçek</option>
</select>
</div>
İlk olarak temel kodumuz olan kodunu yazdık ve sınıf olarak birçok yerde kullandığımız "form-control" kodunu yazdık. Daha sonra ise seçilecek verileri "option" kodu ile ekledik ve bu sayede ilk kutuda "Mavi çiçek" verisinin görülmesini sağladık.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır :
Görüldüğü gibi sağ tarafta kırmızı renk ile vurguladığım kısım ile açılır menüyü kullanabilirsiniz. İsterseniz kutuda yer alan herhangi boş bir yere tıklayarak da aynı işlemi yapabilirsiniz.
Alt menünün çıktısı ise aşağıdaki gibi olacaktır :
Görüldüğü gibi ana kodu yazılı olan -mavi Çiçek" en başta gözüküyor ve ayrıca seçim alt menüsü işletim sistemine göre şekillenmiştir. Resimde göründüğü gibi mavi çiçeğin sol tarafında "tik" işareti var. Yani ilk satırda yer alan veri varsayılan veri olarak kabul ediliyor.
ALT MENÜSÜZ SELECT KODU
Diğer başlığımızda alt menülü bir seçim formu yaptık. Bu sefer ise verilerin direkt olarak bir form kutusunda gözüktüğü, alt menüsüz selects menüsünü
oluşturacağız.
Bu kullanımı alanınız yeterli ise veya az veriniz varsa kullanabilirsiniz. Fakat çok veriniz var ise diğer kullanımı yapmanız daha iyi olacaktır. Çünkü verileri direkt sıraladığı için alan işgaline yol açıyor.
Web sitelerinde, örneğin ülke seçin gibi şeyler görürüz işte bunların hepsi "selects" ile yapılmaktadır.
Gerekli olan kodlarımız aşağıdaki gibidir :
<div class="container">
<select multiple class="form-control">
<option>Kola</option>
<option>Soda</option>
<option>Gazoz</option>
<option>Kahve</option>
<option>Çay</option>
</select>
</div>
Bu kısımda, ek olarak çoklu kullanım olması için "multiple" kullandık ve verilerimizi aynı şekilde "option" kullanarak ekledik.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır :
Resimde gözüktüğü üzere verilerimiz tek bir form kutusu içerisinde gözükmüştür.
Seçim yaptığımızda ise çıktı aşağıdaki gibi olacaktır :
Bu kısımda kırmızı olan yer işletim sistemine göre şekillenmiştir, Kodlarda "Çay" yazmıştık fakat bu çıktıda görünmedi. Bunun nedeni bu kısım "4" adet veriye kadar destek vermektedir. Devamı için "Alt Menülü" yapıyı kullanabilirsiniz. Zaten dediğim gibi bu kullanım az sayıda seçim verisi varsa kullanılacak bir kullanım tarzıdır, bu yüzden çok fazla sayıda seçim verisini desteklemez.
Posted on Utopian.io - Rewarding Open Source Contributors