Tarz Etiketleri Olan Bir Form
CSS ile Form Etiketi Nasıl Stillendirilir. Bir web sayfası formundaki çeşitli alanları ve giriş alanlarını etiketlemek için kullanılan bir form öğesi, etiket öğesidir. Basamaklı Stil Sayfası kuralları kullanılarak biçimlendirilebilir.
Aşama 1
Etiket öğelerini girişteki resimde göründükleri şekilde biçimlendirmek için "for" özniteliğiyle etiket öğesini kullanmanız gerekir. Ayrıca, "giriş" öğesinin kendisini eklemeden önce etiket öğesini kapatmanız gerekir. Şekilde gösterilen tam formun HTML'si.
Günün Videosu
Adım 2
Etiket öğelerini biçimlendirmek için etiketlerin sola kayan blok düzeyinde öğeler olarak görüntülenmesini sağladım. Ardından, girdi alanlarının hepsinin etiketlerden eşit uzaklıkta olması için etiketlere bir genişlik atadım. Bir renk atadım ve metni kalın yaptım. Etiketten sonra iki nokta üst üste (: ) eklemek için oluşturulan içeriği kullandım. (İki nokta her tarayıcıda görünmeyebilir.)
İşte CSS:
etiket { renk: #B4886B; yazı tipi ağırlığı: kalın; Ekran bloğu; genişlik: 150 piksel; yüzer: sol; } etiket: sonra { içerik: ": " }
Aşama 3
Tam olması için, etiket öğeleri kenarlıklı bir alan kümesiyle çevrelendiğinden, alan kümesine stil vermek için kullanılan CSS'yi de göstereceğim.
İşte o CSS:
fieldset { border: 1px katı #CCA383; genişlik: 400 piksel; arka plan: #FFE8EF; dolgu: 3 piksel; } fieldset efsanesi { arka plan: #CCA383; dolgu: 6 piksel; yazı tipi ağırlığı: kalın; }
4. Adım
Etiket öğelerini biçimlendirmek için başka birçok şey yapabilirsiniz. Benim örneğim bunu yapmanın sadece bir yolu.
Form HTML'si
İhtiyacınız Olan Şeyler
Çalışan bir HTML bilgisi
Çalışan bir CSS bilgisi
