- Katılım
- 7 May 2010
- Konular
- 10,579
- Mesajlar
- 58,614
- Çözüm
- 219
- Online süresi
- 10mo 29d
- Reaksiyon Skoru
- 16,721
- Altın Konu
- 444
- TM Yaşı
- 16 Yıl 1 Ay 7 Gün
- Başarım Puanı
- 691
- MmoLira
- 19,925
- DevLira
- 601
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
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
Bilgilerinizi işlemek için HTML öğesini, <form> kullanın. İlgili alanlar için etiketler ekleyin ve ilgili giriş alanlarını atayın. Bu örnekte, kullanıcılardan formun giriş türü metniyle birlikte tam adlarını ve e-posta adreslerini vermelerini istiyoruz , oysa sektörlerini seçmelerine yardımcı olmak için select id aracılığıyla bir açılır menü oluşturulur.
Kod:
<!DOCTYPE html>
<html>
<body>
<h3>What Is a Stacked Form?</h3>
<p>Here's how you create a stacked form.</p>
<div class="container">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="firstname" placeholder="Type your full name">
<label for="email">Email Address</label>
<input type="text" id="email" name="email" placeholder="Type your email ">
<label for="dept">Department</label>
<select id="country" name="country">
<option value="IT">Information Technology</option>
<option value="CS">Customer Support</option>
<option value="Sales">Sales</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>Ancak, bu kod parçasını çalıştırmak, alanları dikey olarak istiflemeden yalnızca yumuşak bir form üretecektir. Ve işte burada CSS eklemeniz gerekecek.
CSS Bölümünü Kodlayın
Şimdi ayrı bir stil sayfası oluşturun ve bunu HTML'nize body etiketinden önce ekleyin:
Kod:
<head> <link rel="stylesheet" href="StackedForm_CSSPart.css"> </head>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.
Kod:
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.Programlama oyununun adı "pratik". Şı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.
- Katılım
- 19 Ara 2020
- Konular
- 1,566
- Mesajlar
- 6,953
- Çözüm
- 12
- Online süresi
- 2mo 25d
- Reaksiyon Skoru
- 2,468
- Altın Konu
- 122
- TM Yaşı
- 5 Yıl 5 Ay 23 Gün
- Başarım Puanı
- 282
- MmoLira
- -119
- DevLira
- 80
Paylaşım için teşekkürler Kirvem 
Konu Sahibi
Konu Sahibi
- Katılım
- 7 May 2010
- Konular
- 10,579
- Mesajlar
- 58,614
- Çözüm
- 219
- Online süresi
- 10mo 29d
- Reaksiyon Skoru
- 16,721
- Altın Konu
- 444
- TM Yaşı
- 16 Yıl 1 Ay 7 Gün
- Başarım Puanı
- 691
- MmoLira
- 19,925
- DevLira
- 601
Rica ederimPaylaşım için teşekkürler Kirvem
