HTML5 Formlarına Giren Bir Tipler Giriş Tarih, Renk ve Aralık
Formlar her yerde web sitelerinde bulunur. Facebook, Twitter, Google - sadece birkaçı için - bir form aracılığıyla siteye giriş yapmamızı veya siteye kaydolmamızı istiyor, aslında sosyal sitelerde tweet atmak ve güncellemek için bir form kullanıyoruz. Kısacası, Form, bir web sitesine etkileşime girebilmek için çok önemli bir bölümdür..
Girdiler ile bir web formu oluşturulmuştur, geçmişte, girdi türleri için sadece birkaç seçeneğimiz vardır; gibi Metin, parola, radyo, onay kutusu ve Gönder. Şimdi, HTML5 büyük gelişmelerle geliyor ve teknik özelliklere birçok yeni giriş türü getiriyor.
Yani, bu yazıda yeni ilginç parçalardan bazılarını kazacağız. HTML5 Formları onları denemek gerektiğini düşünüyoruz; hadi onları kontrol edelim.
Tarih Seçici
Bakmak istediğimiz ilk şey tarih seçici. Tarih seçmek, kayıt formunda, özellikle de bazı sitelerde veya uçuş ve otel rezervasyonu gibi uygulamalarda bulabileceğiniz yaygın bir şeydir..
Tarih seçici oluşturmak için birçok JavaScript Kütüphanesi vardır. Artık HTML5 girişi ile çok daha kolay bir tane oluşturabiliriz tarih, aşağıdaki gibi;
tarih seçici HTML5'te temel olarak JavaScript Kitaplıklarının yaptıklarına çok benzer şekilde çalışır; alana odaklandığımızda bir takvim belirecek ve ardından tarihi seçmek için aylar ve yıllar arasında gezinebiliriz..
Ancak, şu anda tarih Chrome, Opera ve Safari adındaki giriş türü, bu giriş türünü biraz farklı gösterir; bu, kullanıcı deneyiminde tutarsızlığa neden olabilir ve işte bu şekilde göründüğü gibi;
Yukarıdaki ekran görüntüsünden bir bakışta görebileceğiniz bazı önemli farklar; Opera gün adının üç harfli İngilizce kısaltmasını kullandı - Sun, Mon, Thu, vb. Chrome yerel dilimi kullanırken Safari bir yandan da tuhaf çalışıyor, takvimi göstermiyor hiç.
Ayrıca bazı yeni giriş türleri daha spesifik olarak tarih veya saati seçin; ay, hafta, zaman, datetime ve datetime-yerel, anahtar kelimenin kendisinin ne yaptığını söylemek için oldukça açıklayıcı olduğundan eminiz..
Bunların tümünü aşağıdaki bağlantıdan işlem halinde görüntüleyebilirsiniz, ancak Opera 11 ve üzeri sürümlerde görüntülediğinizden emin olun, çünkü yazarken, bu giriş türlerinin tümünü destekleyen tek tarayıcıdır..
- Datepicker Demosu
Renk seçici
Renk seçici bu CSS3 gradyan jeneratörü gibi bazı web tabanlı uygulamalarda sıklıkla ihtiyaç duyulur, ancak bu süre zarfında web geliştiricileri hala bu işi yapmak için jsColor gibi bir JavaScript Kütüphanesine güvenirler. Ancak şimdi HTML5 ile yerel bir tarayıcı renk seçici oluşturabiliriz renk giriş tipi;
Bir kez daha, tarayıcılar, bu durumda Chrome ve Opera, bu giriş türünü biraz farklı kılar;
Opera, ilk önce tıkladığınızda temel renk seçeneğini ve mevcut açılan rengin hex formatını bir açılır pencerede gösterirken, Chrome renk paleti tıklandığında doğrudan yeni bir pencerede açılır.
Ayrıca, varsayılan rengi değer aşağıdaki gibi özellik;
Bu şekilde, desteklenmeyen tarayıcılarda görüntülendiğinde, giriş Bir metin alanına dönüşecek ve kullanıcılara alana ne girilmesi gerektiğine dair bir ipucu verebilecek olan varsayılan değer görünecektir..
Renk Değerini Göster
Sadece kopyalamak için Photoshop'u açmak yerine büyü renk biçiminde, bu girdi türünde işi yapmak için gerçekten basit bir araç oluşturabilirsiniz, çünkü oluşturulan renk onaltılıdır ve bu gerçekten kolay olur;
İlk önce kimliği ekleriz renk seçici girişe boş bir de ekleriz div kimliğiyle HexColor değeri içermesi yanında.
İle bağlantılı olan jQuery'e ihtiyacımız var. kafa Belgemizin Sonra renk değerini ve yeni eklenenleri saklıyoruz. div bir değişkende, bunun gibi;
var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); Başlangıç değerini al #renk seçici;
hexcolor.html (renkli);
… Ve son olarak, seçilen renk de değiştirildiğinde değeri değiştirin;
$ ('# colorpicker'). on ('change', function () hexcolor.html (this.value);); Bu kadar; şimdi harekete geçirelim.
- Renklendirici Demo
menzil
menzil giriş türü, jQuery UI'da bulabileceğimiz bir aralıktaki sayıyı seçmek için tarayıcıya bir kaydırıcı eklememize izin verir..
Yukarıdaki kod parçacığının uygulanması temel menzil giriş tipi. Kaydırıcı yönünü CSS kullanarak aşağıdaki gibi dikey olarak da değiştirebiliriz;
giriş [type = range] genişlik: 20 piksel; yükseklik: 200px; -webkit-görünüm: kaydırıcı-dikey;
Ek olarak, min ve maksimum sayıların aralığı, örneğin;
Aşağıdaki kod parçasında min sıfıra ve 225 en fazla için. Açıkça belirtilmediğinde, tarayıcı varsayılan olarak 0 en azından 100 en fazla.
Numarayı Göster
Yine de bir kısıtlama var, sayı görünmez, tarayıcıdaki kaydırıcıdan üretilen sayıyı / değeri göremiyoruz. Numarayı görüntülemek için biraz JavaScript veya jQuery eklememiz gerekir ve işte bunu nasıl yapıyoruz;
İlk önce boş ekleriz div girişin yanındaki div yeterince bir kutu gibi görünüyor bu yüzden.
Sonra, yukarıdaki kodla aynı işlemi yapacak olan aşağıdaki kodu güçlü renk seçiciye koyun. şimdi kaydırıcıdan değeri alıyoruz.
$ (function () var val = $ ('# slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider'). change (function ( ) output.html (this.value););); Şimdi demosunu görebilirsiniz. Sadece bir hatırlatıcı, bu tarayıcılarda gösterimi izleyin - Firefox ve IE’nin desteklemediğinden Chrome, Opera ve Safari menzil şu anda giriş türü.
- Range Demo
Son sözler
HTML5'in birçok yeni giriş türü sunarak hayatımızı çok daha kolaylaştırdığı açıktır. Ancak diğer HTML5 özellikleri gibi, özellikle eski tarayıcılarda destek çok sınırlıdır, bu yüzden bu yeni özellikleri dikkatli kullanmalıyız, özellikle bu yazıda tartıştığımız yeni giriş türlerini kullanmalıyız; Tarih, Renk ve Çeşit.
Ama nihayetinde, şimdi daha fazla görüş sahibi olduğunuzu umuyoruz HTML5 Formları. Bu yayını okuduğunuz için teşekkür ederiz ve hoşunuza gittiğini umuyoruz.
- gösteri
- Kaynak İndir
Daha fazla okuma
Aşağıda, HTML Formlarına daha fazla girmeniz için faydalı bağlantılar verilmiştir..
- HTML5'teki yeni form özellikleri - Opera Dev.
- HTML5 Formlarının Şimdiki Durumu - Wufoo
- HTML5 Form Nitelikleri - w3school.org
- HTML5 formlarını ne zaman kullanabilirim? - CanIUse.com
