Neler Öğreneceğim?
- Bootstrap Formlar
- Bootstrap ile Temel Form Örnekleri
- Bootstrap ile Bitişik Öğeli Formlar
Gereksinimler
- Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
English
The structured forms that come with Bootstrap provide great ease of use. You can create forms faster by using form items that Bootstrap has created, especially for forms that you will do for different purposes, such as a contact form or this. In addition, many different form items allow you to create different types of forms without depending on an item.
The use of forms takes an important place on web sites. Communication forms have become a necessary structure for web sites. You can do this with forms and surveys, or if you are working with the database, if your CSS knowledge is not very good, you can use these forms to work with visual richness.
In the form items that come with Bootstrap, the items have different sizes. In addition, forms are presented in many different ways, such as adding icons, horizontal positioning, side-by-side positioning.
As a design, I can say that things are beautiful. But you can export your own design by not using this design but by creating a separate CSS file.
Thanks to the icon system that comes with Bootstrap, we are able to release the images from your site slowly and to make our pages open more quickly. Thanks to "Glyphicons", a very large icon library, we will be able to use more functional and faster.
Türkçe
Formlar
Bootstrap ile gelen yapılandırılmış formlar çok büyük kullanım kolaylığı sağlıyor. Özellikle iletişim formu veya bunun gibi farklı amaçlar için yapacağınız formlarda Bootstrap'ın oluşturmuş olduğu form öğelerini kullanıp, formlarınızı daha hızlı oluşturabilirsiniz. Ayrıca birçok farklı form öğesi sayesinde bir öğeye bağlı kalmadan farklı çeşitlerde formlar oluşturabilirsiniz.
Formların kullanımı web sitelerinde önemli bir yer kaplar. Iletişim formları web siteleri için gerekli bir yapı olmuştur. Bununla kalmayıp formlar ile anketlerde yapabilirsiniz veya veritabanı ile işlemleriniz varsa CSS bilginiz pek iyi değilse bu formları kullanıp görsel zenginliğe sahip çalışmalar yapabilirsiniz.
Bootstrap ile gelen form öğelerinde, öğelerin farklı boyutları bulunuyor. Ayrıca formlara ikonlar ekleme, yatay konumlandırma, yan yana konumlandırma gibi birçok farklı kullanım tarzı sunulmaktadır.
Tasarım olarak öğelerin güzel olduğunu söyleyebilirim. Fakat bu tasarımı kullanmayıp ayrı bir CSS dosyası oluşturarak kendi tasarımınızı aktarabilirsiniz.
Bootstrap ile gelen ikon sistemi sayesinde resimlerin sitenize kattıgı yavaşlıktan kurtulmuş olup sayfalarımızın daha hızlı açılmasını sağlıyoruz. Çok geniş bir ikon kütüphanesi olan "Glyphicons" sayesinde daha işlevsel ve daha hızır kullanım sağlamış olacağız.
TEMEL FORM ÖRNEĞI
Bu başlık altında, temel seviyede nasıl Bootstrap formları meydana getirebiliriz bundan bahsedeceğiz. Bu bölümde temel kodunu sürekli kullanıyor
olacağız.
Kodlarımızın sağlıklı olarak çalışabilmesi için temel form kodunun içine diğer form kodlarımızı eklememiz gerekmektedir.
İlk olarak ana form kodumuzu yapılandırıyoruz:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Temel Form Örneği</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<form role="form">
</form>
</div>
</body>
</html>
Görüldüğü gibi temel etiketimizi oluşturup form kısmının oluşturulmasını sağladık. Bu kod sayesinde form kısmının oluşur. Ardından ara elementleri bu Kod arasına yerleştiririz. Görüldüğü gibi formun görevine yani "role" kısmına "form" etiketini verdik.
Şimdi ise temel formun kodlarını yazalım:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Temel Form Örneği</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">E-Posta Adresiniz</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Lütfen e-posta adresinizi giriniz. (Kimseyle paylaşılmayacaktır.)">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Şifreniz</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Lütfen şifrenizi giriniz.">
</div>
<div class="form-group">
<label for="exampleInputFile">Dosya Ekle</label>
<input type="file" id="exampleInputFile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Onaylıyormusunuz ?
</label>
</div>
<button type="submit" class="btn btn-default">Gönder</button>
</form>
</div>
</body>
</html>
Bu kısımda yer alan kodlar aslında temel HTML kodlandır. Fakat CSS ile yapılandırıldığı için, farklı şekilde çıktı vermektedir.
Yaptığımız işlemleri ise aşağıdaki gibi sıralayabiliriz:
- ilk olarak temel "form" kodumuzu ekledik.
- Ardından her kutu için "form-group" adlı sınıfa sahip "div" etiketleri oluşturduk.
- Label etiketleri ile, üst kısımda başlık oluşturulmasını sağladık.
- Input etiketleri sayesinde açıklama kısmının yapılmasını sağladık.
- Input etiketlerinin işlevlerine göre, tiplerini belirledik.
- InputFile sayesinde dosya ekleme kutusu oluşturduk.
- checkBox ekleyerek onay işareti yapılmasını sağladık.
- Son olarak formun gönderilmesi için Button öğesini ekledik.
Resimde kare içine aldığım kısmın ingilizce olduğunu görebilirsiniz. Burada belirtmek istediğim husus o kısmın kullandığınız işletim sisteminin diline göre yapılandığıdır. Benim sistemim ingilizce olduğu için o kısımda ingilizce olarak çıktı vermiş. Ayrıca, kullandığımız işletim sistemine göre o butonun stili değişmektedir, bu kısım HTML varsayılanı olduğu için kullandığınız işletim sistemine göre şekillenmektedir. Bu yüzden siz farklı bir platformda bu kodu denediğiniz zaman farklı bir çıktı alırsanız şaşırmayın.
Bu formların bir diğer özelliği ise bilgi girilecek alana tıklandığında gelen mavimsi renkte olan efekttir. Bu efekt sayesinde kullanıcı tıklama yaptığında, en azından hangi satırda olduğunun farkına varabiliyor. Bu efektler otomatik olarak gelmektedir, en başta belirttiğim gibi mutlaka CSS dosyasını projenize yerel veya online (URL) olarak eklemeniz gerekmektedir. Bu sayede tüm değişkenlerin çıktısını elde edebilirsiniz, aksi taktirde formlarınız şekillenmeyecektir. Hatta hiçbir öğeniz çalışmayacaktır.
Tıklandığında ise görünüm aşağıdaki gibi olacaktır:
Resimde görüldüğü gibi tıklanma yapılan kısım mavi renge dönüştü.
Ayrıca bir diğer detay ise "Gönder" butonunda yer alan "hover" detayıdır. Üzerine gelince öğe koyulaşmaktadır. Bu detayi diğer buton öğelerinde de
görebilirsiniz.
Ayrıca kutularda bulunan açıklama metinleri herhangi bir yazı girildiği anda silinmektedik
Bitişik Öğeli Formlar
Bu başlık altında diğer sayfada gördüğümüz alt alta olan formu, nasıl yan yana yapacağımızdan bahsedeceğim. Eğer sayfanıza daha uygunsa bu uygulamayı tercih edebilirsiniz veya dikey olarak daha az yer kaplamasını istiyorsanız bu formu tercih edebilirsiniz.
Ayrıca burada ikonlar göreceksiniz. Diğer bölümlerde tekrar bu ikonlara değineceğiz.
Kodlarımız aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bitişik Öğeli Formlar</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">E-Posta</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Giriniz...">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Şifre</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Giriniz...">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Beni hatırla !
</label>
</div>
<button type="submit" class="btn btn-default">Giriş Yap</button>
</form>
</div>
</body>
</html>
Kodlarınmızı inceleyecek olursak, görüldüğü üzere ilk olarak temel "form" etiketimizi girdik, fakat bu sefer öğelerin yan yana olması için ek olarak sınıf atadık.
Bununla birlikte "for" kodlarımızı 1 iken 2 yaptık, kod mantığı açısından "exampleInputPassword1" iken "exampleInputPassword2" yaptık. Bunların haricinde başka bir değişiklik bulunmamaktadır. Isterseniz öğe sayısını daha fazla yapabilirsiniz.
Bu form örneğimizde diğer örneklerde buıunan "hover" efekti yer almaktadır. Bu hover rengi varsayılan olarak eklenmiştir. Isterseniz CSS dosyası oluşturup bu renkleri değiştirebilirsiniz. Bu efekt hem görsel açıdan hem de kullanım açısından siteye güzel bir yön vermektedir.
Posted on Utopian.io - Rewarding Open Source Contributors