CSS Form Stilleri

Web tasarım kursumuzun CSS derslerine formlarla devam ediyoruz. Herkese başarılar dilerim.

CSS Formlar

Bir HTML formunun görünümünü CSS yardımıyla çok büyük ölçüde değiştirebiliriz.

Input Alanı Stili (Girdi Alanı Stili)

Geçen derslerimizde HTML kullanarak form oluşturmayı öğrenmiştik.

Şimdi gördüğümüz öğeleri ve CSS’i kullanarak daha şık ve kullanışlı formlar elde etmeyi öğreneceğiz.

Input alanlarının genişliğini ayarlamak için her zaman yaptığımız gibi width özelliğinden faydalanacağız.

input {
    width: 100%;
}

Yukarıdaki örnek bir HTML belgesindeki tüm input’lar için geçerlidir.
Aynı HTML belgesindeki belirli input türlerine stil vermek isterseniz bir seçici kullanmanız gerekir. Örneğin input[type=text] yalnızca metin alanlarını, input[type=password] yalnızca şifre alanlarını seçer.

Dolgulu Girişler (Padded Inputs)

Oluşturduğunuz formların daha şık ve düzenli durmasını sağlamak için iç dolgu (padding) vermeniz faydalı olacaktır.

Formunuzda birden fazla girdi alanı bulunuyorsa bu alanlar arasında boşluk bırakmanız gerekir. Bunu da margin değeri vererek yapabilirsiniz.

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

box-sizing: border-box; sayesinde dolgu ve kenarlık genişliğe dahil edilir; böylece %100 genişlikteki alan kutusundan taşmaz.

Kenarlık Stili Almış Input

Oluşturduğumuz formların kullanıcıya daha güzel görünmesini sağlamak için kenarlık kalınlığını ve rengini ayarlamak basit ve etkili bir yöntemdir.

Bu örneğin kodları şu şekildedir:

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}

Elbette verdiğimiz bu örnekleri kullanarak ve geçmiş derslerimizi tekrar gözden geçirerek siz de kendinize ait farklı tasarımlar ortaya koyabilirsiniz.

Basit bir örnek olarak, kenarlığı yalnızca alta eklemek için border-bottom özelliğini kullanabilirsiniz.

Renkli Input’lar

Her zaman dediğimiz gibi verdiğimiz örnekler temel seviyededir; kendinizi geliştirmek ve daha gösterişli tasarımlar ortaya çıkarmak sizin elinizde.

Web tasarımlarınızda arka plan rengi ve resmi değişebilir; her zaman aynı arka planı kullanmayacaksınız elbette.

Bu durumlarda formların arka plan renklerini sitenizin arka plan resmine veya rengine uygun seçmeniz daha estetik ve profesyonel bir görünüm elde etmenizi sağlar.

input[type=text] {
    background-color: #81D4FA;
    color: #fff;
}

Simge Kullanılmış Input

Formlarımızın girişlerinde simge kullanmak elbette daha şık ve ilgi çekici olacaktır. Bunu yapabilmek için simgeyi background-image özelliğiyle ekleyip background-position ile konumlandırabiliriz. Yazının simgenin üzerine binmemesi için soldan dolgu veririz.

input[type=text] {
    background-image: url('arama.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.