CSS FORM DESIGN (TASARIM)

FORM sizin web tasarımcısı olarak sayfanıza koyacağınız ve içinde ziyaretçinin dolduracağı boşluklar veya ziyaretcinin yapacağı tercihleri belirteceği kutular bulunan ve en sonunda bu bilgileri size göndereceği bir buton bulunan bir web sayfasıdır.

FORM, bir sayfanın içinde bir bölüm olabileceği gibi, başlıbaşına bir sayfada olabilir.

FORM, ziyaretciye "girdi" yapma imkanı verebilir. FORM, düz bir metin olabilir; resimlerle süslenmiş olabilir. Ne kadar işlenmiş olursa olsun, formlar da bütün HTML etiketleri gibi bir etiketle başlar ve biter.

Bir HTML Form, çeşitli öğeler ile oluşturulur. Bunlar:

• Text Input
• Text Area
• Radio Button
• Check Box
• Drop Down List
• Submit Button

Bu yazımızda HTML ile oluşturmuş olduğumuz İletişim Formuna CSS yardımıyla Formların etiketlerinin yerlerini planlamak(konumlandırmak) ve form elementlerini güzelleştirerek daha göze hoş gelen ve işlevsel bir hala getirmek.

INPUT(Girdi) Boyutlarını belirleme

---

Giriş alanının genişliğini belirlemek için width özelliği kullanın :

input {

        width: 80%;
      }

ÇIKTI:

Yukarıdaki örnek tüm input öğelerine uygulanır. Yalnızca belirli bir input türünü stil vermek istiyorsanız, özellik seçicilerini kullanabilirsiniz:

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

İç ve Dış boşlukları belirleme

---

padding Özelliğini kullanarak input öğelerine iç boşluklarını ayarlayabilirsiniz.

İpucu : Birden çok input alanı belirlediğinizde margin özelliği ile input'ların ara mesafesini ayarlayabilirsiniz.

input[type=text] {

    width: 80%;

    padding: 12px 20px;

    margin: 8px 0;

    box-sizing: border-box;
}

Kenar çizgilerini belirleme

---

border boyutunu ve rengini değiştirmek için border özelliğini kullanın ve yuvarlak köşeler eklemek için border-radius özelliğini kullanın:

input[type=text] {

       border: 2px solid DeepSkyBlue;

       border-radius: 4px;
     }

ÇIKTI:

Yuvarlak köşeli ve soluna 3px border verilmiş özel ve şık bir input kutusu yapalım.

HTML:

 <input type="text" placeholder="websitesi adı">

CSS:

input {
  
  padding:8px 20px;

  border: 1px solid #eee;

  border-left: 3px solid;

  border-left-color:salmon; 

  border-radius: 5px;

  transition: border-color .8s ease-out;
}

input:focus{

  outline:none;

  border: 1px solid #eee;

  border-left: 3px solid #888;

}

ÇIKTI:

Yalnızca alt kenarlık istiyorsanız, border-bottom özelliği kullanın :

CSS:

input[type=text] {

         border: none;

         border-bottom: 2px solid red;
      }

ÇIKTI:

Arka plan rengini belirleme

---

input öğesine bir arka plan rengi eklemek için background-color özelliğini ve metin rengini değiştirmek için color özelliğini kullanın:

HTML:

<input type="text" value="webcebir.com">

CSS:

input[type=text] {

      background-color: #3CBC8D;

      color: white;
   }

ÇIKTI:

Focused(odaklanmış) Inputlar

---

Varsayılan olarak, bazı tarayıcılar, odak aldığında (tıklandığında) girdi etrafında mavi bir anahat ekleyecektir. Bu davranışı outline: none; CSS özelliğiyle kaldırabiliriz. CSS'de :focus sözde sınıfla input alanına odaklandığında görünümüne style vererek etkide bulunabiliriz.

CSS:

input[type=text]:focus { 

        background-color:goldenrod;
      }

ÇIKTI:

input alanına odaklandığında border verelim.

CSS:

input[type=text]:focus {

         border: 3px solid LightSeaGreen ;
     }

ÇIKTI:

Input alanlara simge ekle

---

Input alanlarında bir simge istiyorsanız, background-image özelliği kullanın ve background-position özelliği ile konumlandırın Ayrıca, simgenin input alanından ayırmak için padding (Boşluk) eklemeyide unutmayın.

CSS:

input[type=text] {

    background-color: white;

    background-image: url('searchicon.png');

    background-position: 10px 10px;

    background-repeat: no-repeat;

    padding-left: 40px;

}

ÇIKTI:

Animasyonlu Arama Girişi

---

Bu örnekte, odaklandığı zaman arama girişinin genişliğini animasyonlu büyütmek için CSS transition özelliğini kullanıyoruz.

input[type=text] {

    -webkit-transition: width 0.4s ease-in-out;

    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {

    width: 100%;
}

ÇIKTI

Textarea alanlarının boyutlarını sabitleyin.

---

Textare'nın yeniden boyutlandırılmasını önlemek için resize özelliği kullanın (sağ alt köşedeki "tutucuyu" devre dışı bırakır).

textarea {
    width: 100%;

    height: 150px;

    padding: 12px 20px;

    box-sizing: border-box;

    border: 2px solid #ccc;

    border-radius: 4px;

    resize: none;
}

ÇIKTI:

Açılır liste kutularına style verme

---

Bir açılan liste oluşturmak için select elemanı kullanılır. css kullanarak select etiketine istediğimiz stili verebiliriz.

HTML:

<select  name="il">
    <option value="is">İstanbul</option>
    <option value="an">Ankara</option>
    <option value="ad">Adana</option>
    <option value="er">Erzurum</option>
  </select>

CSS:

select {
    width: 70%;

    padding: 16px 20px;

    -moz-appearance: none;/*firefox oku kaldırır*/

    border: none;

    font-size: 16px;

    border-radius: 4px;

    background-color: #d35400;
}

ÇIKTI:

Buton biçimlendirme

---

Form butonları CSS ile uzunluk, yüksekliği değiştirebilir ve çeşitli renklerde buton oluşturabiliriz.

HTML:

<input type="button" value="Button">

<input type="reset" value="Reset">

<input type="submit" value="Submit">

CSS:

input[type=button], input[type=submit], input[type=reset] { 

    background-color: #4CAF50;

    border: none;

    color: white;

    padding: 18px 36px;

    margin: 5px 3px;

    cursor: pointer;
}

ÇIKTI:

7070

Gönder