Tasarım Kodlama

CSS Formlar

Bir HTML formunun görünümü CSS ile büyük ölçüde geliştirilebilir.

Bu derste HTML form elemanlarının CSS kullanılarak nasıl biçimlendirebileceğinizi öğreneceksiniz.

 

Input (Giriş) Alanlarını Biçimlendirme:

Input ile giriş alanının genişliğini belirlemek için width özelliğini kullanabiliriz.

Sayfamızda aşağıdaki gibi bir form oluşturalım.

Herhangi bir CSS uygulamadığımızda aşağıdaki gibi bir görüntü oluşacaktır.

Şimdi Form elemanları için CSS ile genişlik biçimlendirmesi uygulayalım.

Yukarıdaki CSS kodları tüm input kontrolleri için genişlik değerinin %100 olmasını sağlayacaktır. Pencere boyutunun değiştirildiğinde kontrollerimizin genişliği pencereye göre ayarlanacaktır.

Yukarıdaki örnek tüm <input> öğelerine uygulanır. Yalnızca belirli bir giriş türünü biçimlendirmek istiyorsanız, özellik seçiciyi kullanabilirsiniz:

  • input [type = text] – sadece metin alanlarını seçer.
  • input [type = password] – sadece şifre alanlarını seçecektir.
  • input [type = number] – sadece sayı alanlarını seçer.
  • vb..

Aşağıdaki örnekte sadece metin girişi için olan kontroller, yani <input type=text..> kontrolleri için genişlik ayarlaması yapalım.

 

Yukarıdaki örnekte biçimlendirme sadece text kontrolleri için uygulandığından submit butonu genişlik stilinden etkilenmemiştir.

İç ve Dış Boşlukları Belirleme (margin, padding)

padding Özelliğini kullanarak form öğelerinin iç boşluklarını tayin edebilirsiniz. Aynı zamanda margin özelliği ile form öğelerinin birbirine olan mesafelerini ayarlayabiliriz.

Örnek:

Form Kontrollerine Kenarlık (Border) Ekleme:

Form kontrolleri için border özellliği kullanarak kenarlıklar ekleyebilir ve yine border-radius özelliği kullanarak verilen kenarlıkları ovalleştirebiliriz.

Örnek:

 

İsterseniz sadece alt kenarlık verebilirsiniz. Burada dikkat etmeniz gereken şey alt kenarlık verilmeden önce border: none; özelliği verilmelidir.

CSS ile Form Elemanlarına Arkaplan (background) ve Yazı Rengi (color) Özelliklerini Uygulama

Girdiye bir arka plan rengi eklemek için background-color özelliğini ve metin rengini değiştirmek için color özelliğini kullanın:

Örnek:

 

CSS ile Form Kontrolüne Odaklanıldığında Stil Verme:

Varsayılan olarak, bazı tarayıcılar odaklandığında (tıklandığında) girişin çevresine mavi bir anahat ekler. Bu davranışı outline: none; biçimi ile etkisiz hale getirebilirsiniz.

Odaklandığında giriş alanıyla bir şeyler yapmak için  :focus seçicisini kullanın:

Örnek 1: text nesnesine tıklandığında arkaplan renginin değişmesini sağlayalım.

Örnek 2: Odaklanılan text nesnesinin border rengini değiştirelim.

 

Form Öğesine Arkaplan Resmi Verme

Form elemanlarına bazı durumlarda simge eklemek görünümü güzelleştirecektir. Bunun için  background-image ve background-position özelliği kullanın. Ayrıca, simgenin alanını ayırmak için padding özelliği ile sol iç boşluğu ayarlamayı ihmal etmeyin.

Form Elemanları İçin Animasyon Uygulama

Form giriş elemanlarına odaklanıldığında geçiş efektleri verebiliriz.

Bu örnekte, odaklandığında arama girişinin genişliğini arttırmak için CSS geçiş özelliğini kullanacağız.

CSS ile textarea Biçimlendirme

Textarea‘ nın yeniden boyutlandırılmasını önlemek için resize özelliğini kullanın (sağ alt köşedeki “boyutlandırıcıyı” devre dışı bırakın):

 

 

CSS ile select Açılır Menü Biçimlendirme

 

 

Button Biçimlendirme

Yorum yap