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.
|
1 2 3 4 5 |
input , select { } |
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.
|
1 2 3 4 5 |
input , select { width: 100%; } |
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.
|
1 2 3 4 5 6 7 8 |
input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } |
4. Kenar çizgilerini belirleme;
border Özelliği kullanarak kenar çizgi stilini belirleyin. Dilerseniz border-radius ile köşelerini yuvarlatabilirsiniz.
|
1 2 3 4 5 6 |
input[type=text] { border: 2px solid red; border-radius: 4px; } |
Yalnızca alt kenar çizgisi bazen iyi bir fikir olabilir. border-bottom Özelliği size bunu sağlayacaktır.
|
1 2 3 4 5 6 |
input[type=text] { border: none; border-bottom: 2px solid red; } |
5.Arka plan rengini belirleme;
background Özelliği ile arka plan rengini, color özelliği ile uygun yazı rengi seçebilirsiniz.
|
1 2 3 4 5 6 |
input[type=text] { background-color: #3CBC8D; color: white; } |
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.
|
1 2 3 4 5 |
input[type=text]:focus { background-color: lightblue; } |
Başka bir örnek;
|
1 2 3 4 5 |
input[type=text]:focus { border: 3px solid #555; } |
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.
|
1 2 3 4 5 6 7 8 9 |
input[type=text] { background-color: white; background-image: url('ara.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; } |
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.
|
1 2 3 4 5 6 7 8 9 10 |
input[type=text] { -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } |
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)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; } |
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.
|
1 2 3 4 5 6 7 8 9 |
select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; } |
11. Buton biçimlendirme;
|
1 2 3 4 5 6 7 8 9 10 11 |
input[type=button], input[type=submit], input[type=reset] { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; } |
Örnek;
Yukarıda öğrendiğimiz bu bilgiler ışığında aşağıdaki gibi bir form gerçekleştirelim;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <style> input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 6px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: yellow; padding: 20px; } </style> <body> <h3>CSS ile Form</h3> <div> <form action="yazilimbilisim.net"> <label for="ad">Adınız</label> <input type="text" id="ad" name="ad" placeholder="Adınız.."> <label for="soyad">Soyadınız</label> <input type="text" id="soyad" name="soyad" placeholder="Soyadınız.."> <label for="meslek">Mesleğiniz</label> <select id="meslek" name="meslek"> <option value="yazilim">Yazılımcı</option> <option value="tasarim">Web Tasarımcı</option> <option value="grafik">Grafik</option> </select> <input type="submit" value="Submit"> </form> </div> </body> </html> |
Ö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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html> <head> <style> *, *:before, *:after { box-sizing: border-box; } form { border: 1px solid #c6c7cc; border-radius: 5px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden; width: 240px; } fieldset { border: 0; margin: 0; padding: 0; } input { border-radius: 5px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; } .bilgi { padding: 20px 20px 0 20px; } .bilgi label { color: #395870; display: block; font-weight: bold; margin-bottom: 20px; } .bilgi input { background: #fff; border: 1px solid #c6c7cc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); color: #636466; padding: 6px; margin-top: 6px; width: 100%; } .islem { background: #f0f0f2; border-top: 1px solid #c6c7cc; padding: 20px; } .islem .btn { background: linear-gradient(#49708f, #293f50); border: 0; color: #fff; cursor: pointer; font-weight: bold; float: left; padding: 8px 16px; } .islem label { color: #7c7c80; font-size: 12px; float: left; margin: 10px 0 0 20px; } </style> </head> <body> <form> <fieldset class="bilgi"> <label>Kullanıcı <input type="text" name="ad"> </label> <label>Şifre <input type="password" name="sifre"> </label> </fieldset> <fieldset class="islem"> <input class="btn" type="submit" name="submit" value="Giris"> <label> <input type="checkbox" name="hatirla"> Beni Hatırla </label> </fieldset> </form> </body> </html> |
[…] […]