Yazar: Merhaba değerli web tasarım meraklıları!
Bu yazımda html form elemanlarını nasıl css ile şekillendireceğimizi ve hangi özellikleri nasıl kullanabileceğimizi anlatmaya çalışacağım.
Html form elemanlarımızda yer alan; butonlar, text alanları, check box alanları, radio butonlar gibi bölümleri css ile özelleştirmeyi sizlere anlatacağım.
Bir önceki css yazılarımı okuduysanız html elemanlarına nasıl stil özelliği kazandırdığımızı farketmişsinizdir. buradada aslında pek farklı bir durum söz konusu olmayacaktır.
Peki o zaman sırasıyla form elemanlarını incelemeye başlayalım:
input elemanlarını özelleştirmek ile işe başlıyoruz. imput elemanlarını özelleştirmek için şu özellikleri kullanabiliriz:
border: kenarlıkları belirlemek için kullanırız. solit ve radius değerlerini alırlar.
textarea:
bu kısımda metnimize genişlik , yükseklik değerleri kazandırabiliriz. elbetteki tasarımınıza göre farklı özellikler kazandırabilirsiniz örneğin renklendirme, arka plean renklendirmesi, font özellikleri gibi bir çok özellik ekleyebilirsiniz.
örnek bir css input ve submit özelleştirmesi için css kodları yazalım daha iyi anlayacaksınız.
örnek css kodları:
input[type=text] {
border: 2px solidblack;
border-radius: 4px;
}
textarea {
width: 100%;
height: 150px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
resize: none;
}
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;
}
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Evet arkadaşlar bir önceki html elementlerinde nasıl özelleştirme yapıyorsak bu şekildede bu özelleştirmeleri kullanabildiğimizi görmüş olduk. aslında hiçbir farklı yok demiştik.
Bir diğer önemli form elemanımız ise radio butonlardır. burada ise biraz farklılıkların olduğunu söylemeliyim peki bu farklı özelleştirme nasıl oluyor ona bakalım.
<label class=”container”>One
<input type=”radio” checked=”checked” name=”radio”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Two
<input type=”radio” name=”radio”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Three
<input type=”radio” name=”radio”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Four
<input type=”radio” name=”radio”>
<span class=”checkmark”></span>
</label>
bu kısmın normal html komutları olduğunu biliyoruz zaten burada span ve label etiketlerini kullandık şimdi css ile buluşturalım ve beraber inceleyelim.
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
.container:hover input ~ .checkmark {
background-color: #ccc;
}
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: “”;
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
css kısmını incelediğimizde class seçimlerini fark etmişsinizdir. burada container classlarımızı tanımlayarak css özelleştirmemizi tamamlıyoruz.
şuanda belki burada daha önce karşılaşmadığımız css komutlarını görmüş olabilirsiniz ancak bunlara ilerleyen yazılarımızda değineceğiz. bu şekilde radio butonlarınızı özelleştirebilirsiniz.
bir sonraki form elemanımız ise, check box’lardır peki bu elemanlarımızı nasıl özelleştirebiliriz şimdi ona bakalım.
yukarıdaki radio butonları nasıl özelleştiriyorsak check box’larıda o şekilde özelleştirebiliriz aslında yukarıdaki gibi bir html ve css üzerinde görelim bunu.
örnek:
<label class=”container”>One
<input type=”checkbox” checked=”checked”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Two
<input type=”checkbox”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Three
<input type=”checkbox”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Four
<input type=”checkbox”>
<span class=”checkmark”></span>
</label>
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
.container:hover input ~ .checkmark {
background-color: #ccc;
}
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: “”;
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
gördüğünüz gibi her iki eleman özelleştirme arasında pekte bir fark yok. şimdi son olarak sizlere basit bir form örneği yazarak bu konuyu burada bitirmek istiyorum.
css basit form örneği:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title> css html form örneği </title>
<style>
#form-alan
{
width: 600px;
margin-top: 25px;
}
#form-alan input, #form-alan textarea
{
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#form-alan textarea
{
height: 90px;
}
#form-alan textarea:focus, #form-alan input:focus
{
border: 2px solid #900;
}
#form-alan input[type=”submit”]
{
width: 100px;
float: right;
border:3px solid #2980b9;
background: #fff;
color:#2980b9;
}
label
{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
</style>
</head>
<body>
<div id=”form-alan”>
<form method=”post” action=””>
<label for=”Ad”>Ad:</label>
<input type=”text” name=”Ad” id=”Ad” />
<label for=”Soyad”>Soyad:</label>
<input type=”text” name=”Soyad” id=”Soyad” />
<label for=”Email”>Eposta:</label>
<input type=”text” name=”Email” id=”Email” />
<label for=”Mesaj”>Mesaj:</label><br />
<textarea name=”Mesaj” rows=”20″ cols=”20″ id=”Mesaj”></textarea>
<input type=”submit” name=”kaydet” value=”Kaydet” />
</form>
</div>
</body>
</html>
css form özellikleri ve kullanımı başlıklı yazımda sizlere aktaracağım bilgiler bunlardan ibarettir. anlayamadığınız bir yer olursa soru ve sorunlarınızı yorum olarak bana iletebilirsiniz. iyi bloglamalar herkese
Bir önceki yazımız olan css tablo özellikleri ve kullanımı başlıklı makalemizde css tablo örnekleri, css tablo özellikleri ve css tablo tasarımı hakkında bilgiler verilmektedir.