CSS FORM ÖZELLİKLERİ

Merhaba...

HTML ile hazırlanan formlar CSS ile daha estetik bir görünüme sahip olabilir. CSS'te form elemanları için özel seçiciler kullanılıyorken , formları biçimlendirmek için formlara özgü özellikler bulunmaz. Ancak  mevcut CSS özellikleri form elemanlarına uygulanabilir.  

CSS İLE FORM ELEMANLARI BİÇİMLENDİRME

CSS ile form elemanlarını biçimlendirebiliriz. Örneğin metin kutularının, iç boşlukları,  genişlikleri, kenarlıkları , margin değerleri gibi özellilkeri ile oynayabilir , elemanların çeşitli olaylardaki (focus , valid vs)  özellikleri yada placeholder gibi parametre yazıları biçimlendirelebilir..

GENEL BİÇİMLENDİRME

From elemanlarının  genişlik , margin, padding , border vb gibi özellikleri üzerinde istediğimiz değişiklikleri yapabiliyoruz. Örneğin temel özellikler ile biçimlendirilmiş bazı form elemanları yapalım.

CSS

input  , select , button {
  width:50%;
  color:skayblue;
  padding:.5rem;
  margin :.3rem 0;
  display:block;
  border:1px solid skyblue;
  border-radius:5px;
}

input:last-child {
  border:none;
  border-bottom:3px solid skyblue ;		
  background:none;
}

HTML

<input type="text"   placeholder="Adınız.."> 
<input type="text"   placeholder="Soyadınız.."> 

<select>
   <option> FORM SELECT </option>
   <option> FORM SELECT  </option>
<select>

<button type="submit"> GÖNDER </button>

EKRAN

Yukarıda  metin kutuları , açılır kutu (select) ve buton genel CSS özelliklerini almış olurlar.. Bu şekilde diğer form elemanları da biçimlendirilebilir..

CSS İLE INPUT TÜRÜ SEÇME

Form elemanları için CSS yazılırken , biçimlendirilecek form elemanı için ayrıca seçici belirtebiliryoruz.. Örneğin sadece "TEXT" tipi inputları seçmek yada "NUMBER" tipi inputları seçmek istersek aşağıdaki seçici yapısını kullanmamız gerekir..

CSS

/*Tüm inputlar */
input { padding:1rem;}

 /* sadece text tipi inputlar */
input[type=text] { background-color:#da3d00; color:#fff} 

HTML

   <input type="text" placeholder="Adınız..">
   <input type="number" placeholder="Telefonu Numaranız..">
   <input type="mail" placeholder="Mail Adresiniz.."> 

EKRAN

Yukarıda "TEXT" , "NUMBER" ve "MAIL" tipinde 3 form elemanıda  CSS input seçicisiyle tanımlanan  padding değerini alır.. Ancak input[type=text] ile tanımlanan arka plan ve yazı  rengini sadece tipi "TEXT" olan form elemanı alır.

FOCUS ÖZELLİĞİNİ DEĞİŞTİRME (ANİMASYON)

Formlardaki elelamnlar tıklandığında odaklanmış (focus) olurlar. bu durumda tarayıcılar odağın belli olması için bazı özellikler kullanırlar. Bunları biçimlendirmek için :FOCUS sözde sınıfı kullanılır. Focus gerçekleştiğinde BORDER dışında form elemanlarına özgü olan OUTLINE (dış çizgi) özelliği belirir. Yukarıdaki metin kutuunda görebilirsiniz. Bunu kapatmak için OUTLINE : NONE özelliği kullanılır.

CSS

input:focus {       
	outline:none;
	background-color:#eee;
    width:100%;
}

HTML

<input type="text"   placeholder="Adınız..">  

EKRAN

Yukarıdaki metin kutusu tıklandığında, siyah border görünmeyecek ve arka planı grileşecektir.. Ayrıca trasnition özelliğinden dolayı , metin kutusu animasyon ile 100% genişliğine ulaşacaktır..

PLACEHOLDER YAZISI BİÇİMLENDİRME

Metin kutularında sıkça kullanılan placeholder yazıları ::PLACEHOLDER sözde elemanı ile değiştirilebilir.. Örneğin yukarıdaki metin kutusu iç.in belirlenen "Adınız.." palceholder yazısını kırmızı yapalım..

CSS

input::placeholder { color:orange; } 

HTML

<input type="text"   placeholder="Adınız..">  

EKRAN

METİN KUTUSU İÇERİSİNE SİMGE EKLEME

MEtin kutuları içerisine , arka plan resmi olarak simge eklenebilir. Arka plan resmi olarak simge eklendiğine yazının üzerine gelmemesi için PADDING özelliğinin de ayarlanması gerekir.

CSS

input { 

  background-image: url("ikon.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left:33px;

} 

HTML

<input type="text"   placeholder="Telefon..">  

EKRAN

TEXTAREA BOYUTLANDIRMASINI ENGELLEME

Uzun metin girişleri için kullanılan textarea elemanlarının sağ alt köşesinden uzatarak yada çekerek tekrar boyutlansırılması mümnkün olmaktadır. Ancak CSS RESIZE özelliği  ile bu durum engellenebilir.

CSS

textarea{ 
   width:200px;
   height:150px;
   border:1px solid #4682b4; 
} 

textarea.noresize {
   resize:none;
}

HTML

<textarea> TEXTAREA 1 </textarea>
<textarea class="noresize"> TEXTAREA  2 </textarea>

EKRAN

Yukardıa soldaki normal textarera , sağ alt köşesinden tutularak boyutlandırılabilirken, sağdaki textarea'nın resize özelliği kapatıldığı için boyutlandırılamayacaktır...