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:

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:

İç 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;
}


Kutu boyutlandırma özelliğini box-sizing ayarladığımızı unutmayın. CSS box-sizing özelliği, bir elemanın toplam genişliğine ve yüksekliğine dolgu ve kenarlık eklememize izin verir.

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:

css input

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:

css input border

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

css input animasyon

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:

css textarea resize

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:

css select style

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:


Mehmet Akif Sert 07/04/2021

Merhaba, Arama kutusuna yazmak için tıkladığımızda, silme işlemi için çıkan 'X' i nasıl kaldırabilirim ? Teşekkürler şimdiden :)

yönetici 08/04/2021

Mehmet, x tuşun üstüne gel sağ tıkla inceleye tıkla html sayfadan yerini bul o etiketleri sil görünmez.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

8631

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.