CSS WEB

CSS Form Örnekleri

Internet dünyasında web uygulamaları giderek daha da önem kazanmakta ve Formlar ile kullanıcı ile etkileşim inanılmaz derecede kolay hale getirmektedir. Herhangi bir tarayıcıda oldukça zengin kullanıcı arabirimleri sağlayan web sayfaları oluşturmak için CSS’in gücünden faydalanabilirsiniz. Bir HTML formunun görünümü, CSS ile büyük ölçüde geliştirilebilir.

1. Elemanları seçme;

input, select, button ile başlayan çeşitli HTML form elemanlarına sahibiz. Bunlardan bir kısmı kullanıcıdan bilgi almak amaçlı olarak kullanılır. Örneğin text, password, number, email, select gibi kontrolleri sayabiliriz. Web sayfalarınızda oluşturacağınız formları CSS ile biçimlendirebilmek için işe seçici kullanarak başlamalısınız. Bu noktada eleman seçici kullanmak uygun olacaktır.

2. Boyutlarını belirleme;

CSS width Özelliğini kullanarak form öğelerinizin genişliklerini, form alanı için kullanacağınız bölüme göre ayarlayınız.

3. İç ve dış boşlukları belirleme;

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

4. Kenar çizgilerini belirleme;

border Özelliği kullanarak kenar çizgi stilini belirleyin. Dilerseniz border-radius ile köşelerini yuvarlatabilirsiniz.

Yalnızca alt kenar çizgisi bazen iyi bir fikir olabilir. border-bottom Özelliği size bunu sağlayacaktır.

5.Arka plan rengini belirleme;

background Özelliği ile arka plan rengini, color özelliği ile uygun yazı rengi seçebilirsiniz.

6. Odaklanıldığında, formun stilini kontrol altında tutun.

Varsayılan olarak, bazı tarayıcılar, bir form öğesi odak aldığında (tıklandığında) öğenin etrafına mavi bir çerçeve ekler. Bu davranışı “outline: none;" CSS bildirimi ile kaldırabilirsiniz .  “focus” sözde sınıfını kullanarak, form öğesi odak aldığında, görünümüne stil ekleyerek etkide bulunabilirsiniz.

Başka bir örnek;

7. Arka plan resmi kullanımı;

Bir form öğesinin içinde bir simge istiyorsanız, 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.

8. Animasyon uygulama;

Bu örnekte transition Özelliğini, form öğesi odak alırken genişliğini hareketlendirmek için kullanıyoruz . transition Özellliği CSS ile animasyonlar yapmak için kullanılır.

9. Metin alanlarının boyutlarını sabitleyin.

resize Özelliğini, metin alanlarının yeniden boyutlandırılmasını önlemek kullanabilirsiniz. (sağ alt köşedeki “tutucu” yı devre dışı bırakır)

10. Açılır liste kutularını biçimlendirme;

Açılır liste kutuları HTML select bildirimi ile oluşturulur. CSS seçicisinde select eleman seçicisini kullanarak kolaylıkla stil verebilirsiniz.

11. Buton biçimlendirme;

Örnek;

Yukarıda öğrendiğimiz bu bilgiler ışığında aşağıdaki gibi bir form gerçekleştirelim;

Örnek;

Aşağıda, şimdiye kadar üzerinde bulunduğumuz şeyleri göstermek için birçok farklı öğe ve öznitelik içeren eksiksiz bir giriş formu örneği verilmiştir.

 

 

CSS Dersleri – Yazılım Bilişim Programlama için bir cevap yazın X