CSS'de Yığılmış Form Nasıl Oluşturulur

CSS, stil sayfası dilleri olarak bilinen benzersiz bir dil sınıfına aittir. Esas olarak web sayfanızın sunumunu tanımlamak için kullanılır. HTML, sayfanızın nasıl yapılandırılacağını belirlemenize izin verirken, onu biçimlendirmek için kullanılan CSS'dir. Aksi takdirde, oldukça çekici olmayan bir web sitesine sahip olursunuz.

CSS'ye odaklanmak, özellikle kullanıcı deneyiminizi geliştirmek söz konusu olduğunda, web sitenizin çekiciliğini artırmanın en iyi yollarından biridir. Bu şekilde trafiğinizi de artırabilirsiniz. Yeni başlayanlar için yığılmış bir form kullanabilirsiniz.

Yığılmış Form Nedir?

Yığılmış form, etiketlerinizi ve girdilerinizi yatay bir düzende yerleştirmek yerine birbirinin üzerine yerleştirebileceğiniz özel bir form oluşturmanıza olanak tanır.

İşte bunu nasıl yapabileceğiniz.

HTML'yi kodlayın

HTML öğesini kullanın, , bilgilerinizi işlemek için. İlgili alanlar için etiketler ekleyin ve ilgili giriş alanlarını atayın. Bu örnekte, kullanıcılardan formun giriş türüyle birlikte tam adlarını ve e-posta adreslerini vermelerini istiyoruz. Metin aracılığıyla bir açılır menü oluşturulur. kimliği seç sektörlerini seçmelerine yardımcı olmak.

  
  
  
  
What Is a Stacked Form?
  
Here's how you create a stacked form.
  
  
Full Name  
  
Email Address  
  
Department  
  
Information Technology  
Customer Support  
Sales

Ancak, bu kod parçasını çalıştırmak, alanları dikey olarak istiflemeden yalnızca mülayim bir form üretecektir. Ve işte burada CSS eklemeniz gerekecek.

intel hd grafik ayrılmış video belleğini artırın

CSS Bölümünü Kodlayın

Şimdi ayrı bir stil sayfası oluşturun ve bunu HTML'nize body etiketinden önce ekleyin:

Ardından, HTML'nizin gövdesini, giriş türlerini ve kapsayıcısını seçin ve bunları CSS aracılığıyla biçimlendirin. Bu, yazı tipi ailesi, genişlik, dolgu, kenar boşluğu, görüntü, kenarlık vb. gibi farklı CSS özelliklerini denemeyi ve tercih ettiğiniz değerleri eklemeyi içerecektir. Bu şekilde, tam tercihlerinize uygun bir yığılmış form elde edeceksiniz. İşte bir örnek.

  
body {  
font-family: Calibri;  
}  
input[type=text], select {  
width: 25%;  
padding: 12px 20px;  
margin: 8px 10;  
display: list-item;  
border: 4px double #39A9DB;  
border-radius: 8px;  
box-sizing: border-box;  
}  
input[type=submit] {  
width: 25%;  
background-color: #F8E2E6;  
color: #0000FF;  
padding: 12px 18px;  
margin: 20px 0;  
border: none;  
border-radius: 6px;  
cursor: pointer;  
}  
div.container {  
border-radius: 10px;  
background-color: #39A9DB;  
padding: 40px;  
}

Aşağıdaki çıktıyı kontrol edin.

Artık CSS'de Yığılmış Bir Form Oluşturabilirsiniz

Bu makale ile CSS'de yığılmış bir form oluşturmayı öğrendiniz. Pratik yaparak formlarınızı iyileştirebilecek ve web sitenizi daha kullanıcı dostu hale getirebileceksiniz.

dikkat sim sağlanmadı mm#2

Programlama oyununun adı 'pratik'tir. Şık bir web tasarımcısı ve daha verimli bir web geliştiricisi olmak için sergi projeleriyle CSS becerilerinizi her gün geliştirin.

Paylaş Paylaş Cıvıldamak E-posta 10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu Örneği

CSS ile ilgili yardıma mı ihtiyacınız var? Başlamak için bu temel CSS kodu örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın.

Sonrakini Oku İlgili konular

Programlama
Web Geliştirme
CSS

Yazar hakkında Usman Gani(4 Makale Yayınlandı)

Usman, birçok işletmenin dijital platformlarda organik büyümesine yardımcı olan bir içerik pazarlamacısıdır. Hem programlamayı hem de yazmayı seviyor, bu da teknik yazmanın çok hoşlandığı bir şey olduğu anlamına geliyor. Usman, çalışmadığı zamanlarda TV şovları izlemek, kriket izlemek ve veri analitiği hakkında okumak için zaman harcamaktan hoşlanıyor.

Usman Ghani'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın