CSS Formlar (Forms)

CSS Formlar (Forms)

Girdi (Input) Alanları

Girdi alanının genişliğini belirlemek için width özelliğini kullabilirsiniz.

Örnek:

input {
  width: 100%;
}

Yukarıdaki örnek tüm <input> öğeleri için geçerlidir. Yalnızca belirli bir girdi türüne stil vermek istiyorsanız, öznitelik seçicileri kullanabilirsiniz:

• input[type=text] - sadece metin alanlarını seçer.
• input[type=password] - sadece şifre alanlarını seçer.
• input[type=number] - sadece sayı alanlarını seçer.

Dolgulu Girdiler

Metin alanına boşluk eklemek için padding özelliğini kullanabilirsiniz.

İpucu: Birbiri ardına çok sayıda girdiniz olduğunda, bunların dışında daha fazla boşluk eklemek için biraz kenar boşluğu (margin) ekleyebilirsiniz.

Örnek:

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

NOT: box-sizing özelliğini border-box olarak ayarlamayı unutmayın. Bu, dolgunun ve nihayetinde sınırların, öğelerin toplam genişliğine ve yüksekliğine dahil edilmesini sağlar.

Kenarlıklı Girdiler

Kenarlık boyutunu ve rengini değiştirmek için border özelliğini ve yuvarlatılmış köşeler eklemek için border-radius özelliğini kullanabilirsiniz.

Örnek:

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Renkli Girdiler

Girdiye bir arka plan rengi eklemek için background-color özelliğini ve metin rengini değiştirmek için color özelliğini kullanabilirsiniz.

Örnek:

input[type=text] {
  background-color: #f00;
  color: white;
}

Girdilere Odaklanma (Focus)

Varsayılan olarak, bazı tarayıcılar, odaklandığında (girdi alanına tıklandığında) girdinin etrafına mavi bir anahat ekler. Bu davranışı, anahat ekleyerek kaldırabilirsiniz: outline: none;

Odaklandığında giriş alanıyla bir şeyler yapmak için :focus seçicisini kullanabilirsiniz.

Örnek:

input[type=text]:focus {
  background-color: lightblue;
}

Girdi Alanına İkon/Resim Ekleme

Girdinin içinde bir simge istiyorsanız, background-image özelliğini kullanın ve onu background-position özelliğiyle konumlandırın. Ayrıca, simgenin alanını ayırmak için büyük bir sol dolgu (padding) eklediğimize dikkat edin.

Örnek:

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

Metin Alanları (Textareas)

İpucu: Metin alanlarının yeniden boyutlandırılmasını önlemek için resize özelliğini kullanabilirsiniz.

Örnek:

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Açılır Liste 

Örnek:

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Girdi Butonları

Örnek:

input[type=button], input[type=submit], input[type=reset] {
  background-color: #f00;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}