HTML5 Formları ile HTML5 Öğretici Giriş Sayfası

HTML5 birçok özellik ve iyileştirme getiriyor web formları, tanıtılan yeni özellikler ve giriş türleri var web geliştiricilerin hayatlarını kolaylaştırmak ve web kullanıcılarına daha iyi bir deneyim sunmak için.

Yani, bu yazıda kullanarak bir giriş sayfası oluşturacağız HTML5 formları yeni eklenen özelliklerin nasıl çalıştığını görmek için.

• gösteri
• Kaynak İndir

HTML5 Girişi

Aşağıdaki işarete bir göz atalım.

 
 
 
 
E-posta 
 
Parola 
 
 
 
 
 
 

Daha önce HTML formlarıyla çalışıyorsanız, bu tanıdık gelecektir. Ancak, orada farklılıkları da fark edeceksiniz. Girişler var tutucudur ve gereklidir HTML5'teki yeni özellikler olan özellikler.

Yer tutucu

tutucudur öznitelik, giriş yaparken kaybolacak olan girişte ilk metni vermemizi sağlar. odak devlet veya dolduruluyor. Önceden, JavaScript ile yapardık, ama şimdi bu yeni özellik ile çok daha kolay hale geliyor.

Gerekli özellik

gereklidir öznitelik alanı zorunlu hale getirecek ve bu nedenle form gönderilmeden önce boş bırakılmamalıdır, bu nedenle kullanıcı alanı doldurmazsa, aşağıdaki hata görünecektir.

CSS3'te yeni seçici de tanıtıldı, :gereklidir ile alanları hedeflemek gereklidir bağlıyor. İşte bir örnek;

 giriş: gerekli sınır: 1 piksel katı kırmızı;  

E-posta Giriş Türü

İlk giriş tipi E-posta hangisi aslında yeni bir alan türü HTML5'te de eklendi. E-posta türü alanında temel e-posta adresi doğrulama verecektir. Kullanıcı alanı bir e-posta adresiyle doldurmazsa, tarayıcı aşağıdaki bildirimi gösterir;

E-posta giriş türlerini kullanmak, iPhone ve Android kullanıcıları gibi mobil kullanıcılar için daha iyi bir deneyim sunabilir. e-postayla optimize edilmiş ekran klavyesi adanmış “@” e-posta adresini daha hızlı yazmanıza yardımcı olan düğme.

Dezavantajları

HTML5'te sunulan yeni form özellikleri güçlü ve uygulaması kolaydır, ancak yine de bazı alanlarda yetersizdir. Örneğin;

tutucudur nitelik, sadece modern tarayıcılarda desteklenir - Firefox 3.7+, Safari 4+, Chrome 4+ ve Opera 11+. Yani, desteklenmeyen tarayıcılarda çalışması için ihtiyacınız olursa, bu polyfilleri Modernizr ile birlikte kullanabilirsiniz..

Aynı şey ile gider gereklidir nitelik. Hata bildirimi kişiselleştirilemez, hata devam eder “Lütfen bu alanı doldurun” ziyade “Lütfen Adınızı giriniz”, bu özellik desteği ayrıca en son tarayıcılarla sınırlıdır.

Dolayısıyla, gerekli alanı doğrulamak için JavaScript kullanmak (şimdiye kadar) daha iyi bir seçenektir.

 validateForm () var x = document.forms ["login"] ["kullanıcı adı"]. değer; if (x == null || x == "") alert ("Lütfen kullanıcı adını giriniz"); false döndürmek;  

Formları Şekillendirme

Tamam, şimdi giriş formumuzu CSS ile dekore edelim. İlk önce arka plana ahşap bir desen vereceğiz. html etiket.

 html background: url ('wood_pattern.png'); yazı tipi boyutu: 10pt;  

Ardından, varsayılan dolguyu ve kenar boşluğunu kaldırmamız gerekir. ul tamamını saran etiket girişler ve yüzer li sola, böylece girişler yan yana yatay olarak görüntülenir.

 .loginform ul padding: 0; marj: 0;  .loginform li görüntüleme: satır içi; şamandıra: sol;  

Biz yüzer beri li, Ebeveynler çökecek, bu yüzden ebeveynin etrafındaki şeyleri clearfix hack ile temizlememiz gerekecek..

 label display: block; renk: # 999;  .cf: önce, .cf: after content: ""; ekran: masa;  .cf: after clear: both;  .cf * zoom: 1; : odak anahat: 0;  

CSS3'te olumsuzlama seçicisine sahibiz. Yani, hedeflemek için kullanacağız. girişler dan başka Gönder bu durumda hangisi e-posta ve şifre girişini hedefleyecektir;

 .loginform girişi: değil ([type = gönder]) dolgu: 5 piksel; sağ kenar: 10px; sınır: 1px katı rgba (0, 0, 0, 0.3); sınır yarıçapı: 3px; kutu-gölge: inset 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);  

Son olarak, biz küçük bir stil dekorasyon verecek Gönder düğme, aşağıdaki gibi.

 .loginform girişi [type = teslim] sınır: 1px katı rgba (0, 0, 0, 0.3); arkaplan: # 64c8ef; / * Eski tarayıcılar * / arka plan: -moz-doğrusal-gradyan (üst, # 64c8ef 0%, # 00a2e2% 100); / * FF3.6 + * / arkaplan: -webkit-gradient (doğrusal, sol üst, sol alt, renk durdurma (% 0, # 64c8ef), renk durdurma (% 100, # 00a2e2)); / * Krom, Safari4 + * / arka plan: -webkit-linear-gradyan (üst, # 64c8ef 0%, # 00a2e2% 100); / * Chrome10 +, Safari5.1 + * / arkaplan: -o-doğrusal-gradyan (üst, # 64c8ef 0%, # 00a2e2% 100); / * Opera 11.10+ * / arkaplan: -ms-linear-gradyan (üst, # 64c8ef 0%, # 00a2e2% 100); / * IE10 + * / arka plan: doğrusal gradyan (aşağıya doğru, # 64c8ef% 0, # 00a2e2% 100); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; dolgu maddesi: 5px 15px; kenar boşluğu: 0; kenar boşluğu: 15px; sınır yarıçapı: 3px; metin-gölge: 1 piksel 1 piksel 0 piksel rgba (0, 0, 0, 0,3);  

İşte bu, şimdi giriş formunu aşağıdaki bağlantılardan deneyebilirsiniz.

• gösteri
• Kaynak İndir

Son sözler

Bu derste HTML5 formlarında birkaç yeni özelliğe baktık:tutucudur, gereklidir ve E-posta Basit bir giriş sayfası oluşturmak için giriş türleri. Ayrıca, özelliklerin dezavantajlarını da yaşadık, bu nedenle uygulanacak daha iyi bir yaklaşıma karar verebiliriz..

Bir sonraki yazıda yeni bir HTML5 form özelliği daha arayacağız, bu yüzden bizi izlemeye devam edin.