CSS Form Örnekleri
Bilgi Bankası
Nurses BİLGİSAYAR > Nurses BİLGİSAYAR > Bilgi Bankası

Yardım ara:


CSS Form Örnekleri

Çözüm

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 textpasswordnumberemail, 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-radiusile 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-imageve 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 selecteleman 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.

 

 

 
Bu içerik sorununuzu çözmenizde yardımcı oldu mu? evet / hayır
Related articles programlanabilir ve programlanamayan ec kbc'yi
entegre
CSS ile Etkileyici Gölge Efektleri
CSS Yanıp Sönme Efekti
HTML CSS Web Site Örnekleri 1
İçerik Detayları
İçerik Numarası: 26
Kategori: Web Tabloları
Eklenme Tarihi: 03-03-2019
Gösterim Sayısı: 334
Verilen Puan (Oylar): Henüz hiçbir puan verilmedi. (0)

 
« Geri Dön