Web Tasarımında Formları Nasıl Tame Edilir
Formlar genellikle programlamanın en ağrılı HTML öğelerinden biri olarak kabul edilir. Ancak form tasarımı ve gelişimi, sıçramalar ve sınırlar ile ilerlemiştir; Bir zamanlar olduğu kadar neredeyse değil.
Sektörün muazzam ilerleme kaydetmesine rağmen, bazı engellerin hala var olduğu söyleniyor. Sonunda, formları doldurabilir; Sadece biraz iş gerektiriyor.
Bu gönderide, en çok kullanılan form kontrollerine ve web sitelerinizdeki formların dağıtımı konusunda size yardımcı olacak farklı araçlara ve eklentilere göz atacağız.
Diğer yararlı kaynaklara ilişkin başka ipuçlarınız veya bağlantılarınız varsa bunları yorumlarda paylaşabilirsiniz.
Kontrolleri yıkmak
Onları iki kepçeye ayırarak başlayalım, çünkü bazı form kontrolleri ile çalışmak hiç sorun olmadı.
Dostu kontroller
Çalışması en kolay olan kontroller temel giriş kutusu, metin alanı ve butonu. Standart CSS ile iyi çalışırlar ve neyse ki en yaygın form öğeleridir. Daha zor olanları kullanmanız gerekmiyorsa, şanslısınız demektir.
CSS3 yuvarlatılmış köşeler, alt gölgeler ve degradeler ilerledikçe, en yaygın stillerin çoğu artık daha da kolay. Bu kontrollerden korkacak bir şeyiniz yok.
Sorunsuz kontroller
Diğer bazı form kontrolleri boyunda büyük bir ağrı olabilir. Örneğin, son derece stilize edilmiş bir açılır kapanır denetimi tasarlarsanız, geliştirici muhtemelen sizinle sohbet etmek isteyecektir. Stil seçenekleriniz oldukça kısıtlı olacak: kenarlık rengi, dolgu, arka plan rengi, bu tür şeyler. Bundan daha fazla stile ihtiyacınız varsa, onlar için büyük bir sorun yaratmadığınızdan emin olmak için geliştiriciye danışmanızı öneririm.
Sorunlu form kontrolleri şunları içerir:
- çoklu seç
- açılır menüyü seç
- onay kutuları,
- radyo düğmeleri
- dosya yükleme.
Formlar için modern araçlar
Belirtildiği gibi, form kontrollerini şekle sokmanıza yardımcı olacak birçok inanılmaz araç mevcuttur.
resmileştirmek Temel form kontrolleri ve stilleri sürekli olarak tarayıcılar arasında davranmaya yönelik gizli silahınızdır. Ve varsayılan stilleri temiz ve güzel. Bu harika kütüphane, aynı zamanda, çok çeşitli JavaScript kitaplıkları ile mükemmel şekilde çalışır. jQuery , Dojo ve mooTools .
Form kontrolü değişimi
Bir forma bazı radikal şeyler yapmak isterseniz, yardımcı araçlar mevcuttur. Web formlarını evcilleştirmek için mükemmel bir taktik, gerçek kontrolü gizlemek ve tamamen üretilmiş olanla değiştirmek. Bu, formun nasıl oluşturulduğu konusunda çok daha fazla kontrol sağlar.
Bunun en güzel örneği üniforma , kaygan formlar oluşturmak için jQuery eklentisi. Üç farklı temada geliyor. Özel bir tema oluşturmak istiyorsanız, sadece servisin CSS jeneratörü eklentiyi kolayca ciltlemek için.
Başka bir jQuery eklentisi Niceforms . Üniformanın kullanışlı yeniden şekillendirme işlevselliğine sahip olmasa da, ihtiyaçlarınıza göre çok iyi bir şekilde uyarlanabilecek temel bir stil sunar.
Son olarak, ticari jQuery uzantısı var Wijmo . Burada ilgilenen modül burada form dekoratör Aslında kullanmakta serbesttir. Bazı daha sorunlu kontrolleri ele alıyor: onay kutuları, radyo düğmeleri ve açılır kapanır. Daha büyük bir ticari kütüphanenin parçası olmak, bu araç, en başta güçlü olan bazı faydalar getiriyor belgeleme ve ödenen destek . Son olarak, derisini işleme şeklini seviyorum; kullanır jQuery UI ThemeRoller özel tasarımların işlerini kolaylaştırmak.
İcat formu kontrolleri
Son olarak, ihtiyacınız olanı yapan bir form kontrolü yoksa, birini icat edebilirsiniz! Çok zeki bazı insanlar bunu çoktan yapmışlar ve belki de araçlarından biri zaten sizin ihtiyaçlarınıza uyar.
kaydırıcılar
Standart HTML'den (ama HTML5'in bir parçasıdır) eksik olan bir şey temel bir kaydırma kontrolüdür. Bunun da dahil birçok cevabı var Wijmo'dan biri , dayalı jQuery UI kaydırıcısı .
Yükleyiciler
Kullanıcıların karşıya yükleme için bir dosya seçebilmelerini sağlamak için dosya giriş kontrolünü kullanabilseniz de, özellikle dosya yüklemeleri web siteniz için kritikse, biraz daha cazip bir şey isteyebilirsiniz. En iyi çözümlerden biri Uploadify . Kullanıcıların birden fazla dosya seçmesine ve ilerlemeyi görüntülemesine izin verir. Çeşitli düzen ve işlevsellik seçenekleri ile birlikte gelir.
Kaydırıcı tarzı onay kutuları ve radyo düğmeleri
Bir popüler UI öğesi (iPhone sayesinde), yandan yana kayan açma / kapama düğmesidir. İle Bu kullanışlı jQuery eklentisi Temel bir onay kutusunu veya radyo düğmesini tek bir dönüştürebilirsiniz. İster icat edilmiş bir form kontrolü ister bir form değiştirme aracı olsun, kullanıcıların seçenekleri açıp kapamasını sağlamak için harika bir yoldur.
Yaratıcı düğmeler
jQuery UI temel kontroller üzerinde ilginç bir şeydir. Ne etiketliyor? düğmeleri düğmelere, radyo düğmelerine ve onay kutularına dayalı seçenek kümeleri yapmak için de kullanılabilir. Bunu yaparken, bu denetimleri farklı bir görsel forma dönüştürüyorsunuz. Aşağıdaki resimde bir dizi düğme olarak biçimlendirilmiş bir dizi radyo düğmesi bulunmaktadır.
HTML5 Formları
HTML5, web formlarına çok heyecan verici olanaklar getirdi. Bu makalenin kapsamı dışında olsa da, hala geçerli. İşte size yardımcı olacak bazı temel kaynaklar:
- “ Bir delilik formu , HTML5'e Dalış;
- “ HTML5 Formlarıyla Eğlenceli Richard Shepherd;
- “ HTML5 Formları Wufoo;
- “ HTML5 Formları ile Alan Günü Var , ”Inayaili de León.
Sonuç olarak, form kontrolleri temel bir web sitesinin geliştirilmesinde en kritik engellerden biridir.
Sınırlamaları anlayan, araçları bilen ve kolay tweaks için fırsatları tanıyan bir tasarımcı, sonuç olarak en alt çizgiyi geliştirecek bilinçli kararlar alabilecektir.