CSS3 ve jQuery ile Giriş Formu Oluşturma

CSS3 ve jQuery ile Giriş Formu Oluşturma


 
Adım 1 - HTML İşaretleme
 
HTML biçimlendirmesini oluşturmaya başlayalım. Dört girişli bir form oluşturun (kullanıcı adı, şifre, onay kutusu ve gönderim için) ve onay kutusu girişini ve etiketini bir span etiketinde sarın, onay kutusunu stil oluşturmak için span etiketini kullanacağız. Formu ve başlığı bir div etiketi ile tamamlamak ve ona "oturum açma formu" sınıfı vermek için bitirin.
 
Kodlar:
 
 
 
 
 
 
Adım 2 - Genel CSS Stilleri
 
Önce, kullanacağımız unsurlardan tüm kenar boşluklarını, paletleri, kenarlıkları vb. kaldıracağız.
 
Kodlar:
 
 
Ardından şekil konteynırını stil edeceğiz. Göreceli bir konum, sabit genişlik ve yükseklik, arka plan rengi, yuvarlatılmış köşeler ve bazı gölgeler ekleyeceğiz.
 
Kodlar:
 
 
 
Oku yaratmak için önce seçiciyi sayfaya eklemek için seçiciyi kullanacağız.
 
Kodlar:
 
 
Form başlığı için bazı temel stiller (renk, yazı tipi ailesi ve boyut, vb.) ekleyeceğiz .
 
Kodlar:
 
 
 
 
 
Adım 3 - Genel Giriş Stilleri
 
Önce girdilere temel stiller verelim.
 
Kodlar:
 
 
 
 
Sonra kullanıcı ve şifre girişi stil. Gri arka plan degradesi ve bazı gölgeler ekleyeceğiz. Ayrıca, sabit 170px genişlik ve metin için bir renk de ekleyeceğiz.
 
Kodlar:
 
 
 
Fareyle gezinme durumu için yalnızca girdilerin gölgelerini değiştireceğiz.
 
Kodlar:
 
 
 
Aktif durum için CSS3 degrade daha hafif olacak şekilde değiştirelim.
 
Kodlar:
 
 
 
 
 
 
4. Adım - Gönder Düğmesi
 
Float özelliğini kullanarak Gönder düğmesini sağa getirin.
 
Kodlar:
 
 
 
Gezinme durumu için gölgeleri değiştireceğiz ve aktif durum için onları kaldıracağız.
 
Kodlar:

 

Ekle düğmeye yeşil bir geçiş katacağız.

Kodlar:

 

 

 

Adım 5 - Checkbox Styling
 
Şimdi en zor kısmı başlayacağız, çünkü diğer form girişlerini şekillendirmiş gibi CSS kullanarak onay kutusu girişlerini stilleyemiyoruz. CSS kullanarak stil oluşturmayı öğrenilen en kolay yol, onay kutusu girişini bir span etiketi ile değiştirerek elde etmektir. Böylece, span etiketini tıkladığımızda jQuery, onay kutusu girdisini seçili olarak güncelleyecek ve tekrar tıklandığında jQuery, onay kutusu girdisindeki "checked" ı kaldıracaktır .
 
Bazı kullanıcılar JavaScript'i devre dışı bırakmış olabileceğinden, bir geri yükleme eklememiz gerekir. Bunu yapmak için, jQuery ile gövde etiketine bir "js" sınıfı ekleyeceğiz . Dolayısıyla, JavaScript sayfa yüklemesinde etkinleştirilecekse, gövdeye bir "js" sınıfı ekleyecek ve JavaScript devre dışı bırakıldıysa sınıf eklenmeyecektir. Dolayısıyla, yalnızca JavaScript etkinleştirilmiş kullanıcılar, özel stilli onay kutusuna sahip olacaklardır.
 
 
Önce onay kutusu girdisini gizleyeceğiz.
 
Kodlar:
 
 
Sonra span etiketini konumlandırırız.
 
Kodlar:
 
 
 
Şimdi, yayılma alanına bazı temel stiller ekleyeceğiz.
 
Kodlar:
 
 
 
Alana "kontrol" durumu oluşturmak için en küçük bir kutu oluşturacağız ve ortada konumlandıracağız.
 
Kodlar:
 
 
 
Etiketi stil oluşturmak için onay kutusunun sağına getirelim ve bazı temel stiller (yazı tipi, renk, vb.) ekleyelim.
 
Kodlar:
 
 
 

Başlangıçta "js" sınıfına sahip olan tüm stiller yalnızca JavaScript etkinleştirilmişse uygulanır.

 

 

Adım 6 - jQuery
 
Önce kendi sunucunuzda barındırabilmenizi isterseniz öncelikle Google tarafından barındırılan son sürümü kullanarak jQuery kitaplığına bağlanacağız, bu sizin seçiminiz. Sonra HTML dosyanızın altına </ body> kapanış etiketinden hemen önce aşağıdaki kodu ekleyin.
 
Kodlar:

 

Önce "js" sınıfını body etiketine ekleyelim .

Kodlar:

 

Sonra yükleme sırasında varsayılan olarak onay kutusunu "işaretli" hale getireceğiz .

Kodlar:

 

Bu kodla, onay kutusunun işaretli olup olmadığını kontrol edeceğiz ve sonuç yanlışsa, işaretli sınıf span'den kaldırılacak ve sonuç "true" ise kontrol edilen sınıf span etiketine eklenecektir.

Kodlar:

 

 

 

 YUKARI