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.
|
|
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.
|
|
input[type=text] {
width:100%;
padding:12px20px;
margin:8px0;
box-sizing:border-box;
}
|
4. Kenar çizgilerini belirleme;
border Özelliği kullanarak kenar çizgi stilini belirleyin. Dilerseniz border-radiusile köşelerini yuvarlatabilirsiniz.
|
|
input[type=text] {
border:2pxsolidred;
border-radius:4px;
}
|
Yalnızca alt kenar çizgisi bazen iyi bir fikir olabilir. border-bottom Özelliği size bunu sağlayacaktır.
|
|
input[type=text] {
border:none;
border-bottom:2pxsolidred;
}
|
5.Arka plan rengini belirleme;
background Özelliği ile arka plan rengini, color özelliği ile uygun yazı rengi seçebilirsiniz.
|
|
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.
|
|
input[type=text]:focus {
background-color:lightblue;
}
|
Başka bir örnek;
|
|
input[type=text]:focus {
border:3pxsolid#555;
}
|
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.
|
|
input[type=text]{
background-color:white;
background-image:url('ara.png');
background-position:10px10px;
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.
|
|
input[type=text] {
-webkit-transition:width0.4sease-in-out;
transition:width0.4sease-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:12px20px;
box-sizing:border-box;
border:2pxsolid#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 selecteleman seçicisini kullanarak kolaylıkla stil verebilirsiniz.
|
|
select{
width:100%;
padding:16px20px;
border:none;
border-radius:4px;
background-color:#f1f1f1;
}
|
11. Buton biçimlendirme;
|
|
input[type=button], input[type=submit], input[type=reset] {
background-color:#4CAF50;
border:none;
color:white;
padding:16px32px;
text-decoration:none;
margin:4px2px;
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:12px20px;
margin:8px0;
display:inline-block;
border:1pxsolid#ccc;
border-radius:6px;
box-sizing:border-box;
}
input[type=submit] {
width:100%;
background-color:#4CAF50;
color:white;
padding:14px20px;
margin:8px0;
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
*,
*:before,
*:after {
box-sizing:border-box;
}
form {
border:1pxsolid#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:20px20px020px;
}
.bilgi label {
color:#395870;
display:block;
font-weight:bold;
margin-bottom:20px;
}
.bilgi input {
background:#fff;
border:1pxsolid#c6c7cc;
box-shadow:inset01px1pxrgba(0,0,0,.1);
color:#636466;
padding:6px;
margin-top:6px;
width:100%;
}
.islem {
background:#f0f0f2;
border-top:1pxsolid#c6c7cc;
padding:20px;
}
.islem .btn {
background:linear-gradient(#49708f,#293f50);
border:0;
color:#fff;
cursor:pointer;
font-weight:bold;
float:left;
padding:8px16px;
}
.islem label {
color:#7c7c80;
font-size:12px;
float:left;
margin:10px0020px;
}
</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>
|
