Form Tutorials
1. Style Web Forms Using CSS
In this article we’ll look at how you can use CSS to create attractive and usable forms.
2. Fancy Form Design Using CSS
This chapter, which is fresh from The Art and Science of CSS, will explore the ways in which you can design a great-looking form, and provide you with the necessary code, which we’ll work through together.
3. Customizing input boxes (text and others)
This tutorial will show how to change the color of an input box or textarea when they are active. This is very simple and is done using CSS.
4. Prettier Accessible Forms
I wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. So here it is—my attempt at portable, accessible forms.
5. Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Lots of really great information on form layouts and optimization.
6. CSS-Only, Table-less Forms
Most of the CSS-only, table-less forms available suck. So, not wanting to stoop to mediocrity, I decided to take on the task of coming up with something better. This is the result of my efforts. It works in Win/IE6, Firefox v1.0+, Win/Opera v8.0, has minor layout differences in Mac/Safari v1.0.3 and Mac/Safari v1.2, and is usable but fairly buggered in Mac/IE5.2.
7. CSS Tableless Form
This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form.
8. Stylish submit buttons
Most people would concur the default look of submit buttons is rather unattractive. Using CSS and a nice gradient background image, it’s easy to transform a form button from a duck to a swan.
9. Forms markup and CSS – Revisited
Earlier this year I posted an article on a CSS-based form template, originally done for the Sahana interface. It was modified based on the feedback I received from the readers who stumbled upon the article, and the final version made it to the Sahana system. I have come to realize certain shortcomings of that template, hence this modified version.
10. The Form Assembly – Form Layouts
A CSS Stylesheet Collection for Web Forms.
11. CSS Styling of forms, Stu Nicholls
Stu Nicholls demonstratives one of our favorite fun form layouts.
12. Semantic Horizontal Forms
reproduce the registration form at http://www.squarespace.com/signup/ in a semantically correct way with fieldsets, legends, labels and some CSS styling.
13. Trimming form fields
Web forms often ask visitors for non-essential information, but long and complicated forms can seriously hinder the e-commerce sales process. Wouldn’t it be cool to give users the option to hide these optional fields at their own discretion, and with a clever use of Javascript, the DOM and some CSS we can!
14. Badboy Niceforms
Nice rounded and apple like forms layout.
15. Functional Pretty Forms
Forms have been a rough spot when it comes to style. There’s just only so much you can do; the browsers just don’t allow the kind of styling I’d like. The issue is often discussed, and a nice demonstration of the problem can be found over at Roger Johansson’s site. There have also been a few solutions attempted. Until I really started working on this, the best solution I was able to find was at badboy media. But there were problems with that solution, so I went about finding my own way.
16. Subtraction: Free Form for All – Standardkonforme Online-Formulare
All of the blood, sweat and tears that I put into designing that form in XHTML and CSS last week is coming to some good. After much continued fussing, I finally got it to render reliably and consistently across several major Web browsers, so at the very least, my labor satisfied the challenge at hand. But, having heard with near unanimity the general frustration that people feel about forms, I thought I’d do the civic thing and release a genericized version of my work — and let others freely borrow, steal and/or adapt it for their own needs.
17. Form Layout Templates
As the unwanted orphan of web pages, forms are neglected by many and designed by few. Most people are content to put in some text fields, some bold text and a submit button. I’ve come across quite a few tutorials on how to make forms as eye-achingly colourful as possible, and on how to customise form widgets in ways that Safari promptly ignores, but I can’t find any articles telling you how to use semantic, accessible code along with CSS to make better form layout. Layout is where most of the problems lie with forms – grouping objects, labeling fields, helping the user cope with the amount of information that they have to fill in. The only article I could find relating to Standards and form layout was a rather oldish Eric Meyer throwback. So, as a service to the web design community, I have journeyed into the foul depths of forms for the last few days, and come out all the more wiser. Here is the tale of my travels …
18. Form Help without Popups
Thrusting new windows upon visitors of your site is frowned upon, as it goes against device independence by assuming a windowed environment. One situation where developers feel that a new window is appropriate is with web forms. If the visitor requires help on a form field, a new window saves the visitor the trouble of having to leave the form, and possibly losing the data they have entered. This article illustrates a scripting technique to get around the problem without having to open a new window.
19. Fun with forms – customized input elements
Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility.
20. Styling Form Fields
As long as I can remember, forms have always been problematic. They need to be short but complete, good looking but not confusing, informative but not cluttered.
21. Clean and pure CSS FORM design
It’s simpler and faster than use only CSS property “to simulate” a table structure. In any case, for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.
23. Enhance your input fields with simple CSS tricks
We’re all trying to build an effective and good looking web forms. But there are always a new challenges. If you read my previous articles on how to build a better web forms, you could have noticed there are so many details. Label positioning, context highlighting or justifying elements. But, with just a few simple CSS tricks you can make a usual, boring web forms more effective and exciting.
24. Form Highlighting Redux
It seems the form highlighting effect I was experimenting with ended up being fairly well liked overall, so I thought I’d write up an explanation of how this was done, and how you can implement it on your own sites, if you wish.
25. Formal Weirdness
As I described and tweaked my version of reset styling, a fair number of people asked (with varying degrees of politeness) why I didn’t just use a universal selector instead of that big ugly grouped selector. I said that I wanted to avoid styling form controls (inputs, textareas, and so on), and the only way to do that, given the state of selector support in today’s browsers, is to list all the elements I want to reset while leaving out those I don’t want to touch—like all the form controls.
This led to a fair number of questions as to why I’d bother avoiding form controls, and I said it was due to their “inherent weirdness”. By this, I meant that form controls are impossible to describe with current CSS; and if they were treated the way CSS says they should be, we’d all hate the results. Furthermore, the handling of form control styling is going to be a very unstable branch of our field for the foreseeable future. Herein, I scratch the surface of this entire mess. Fair warning up front: this is going to be a long one. Also, as Bette Davis once proclaimed, buckle your seat belts: it’s going to be a bumpy ride.
26. Getting Fieldset Backgrounds and Legends to Behave in IE
I’m sure someone has posted on this issue before I just haven’t found an answer I’m looking for. Jeff Croft has a close answer, but he is trying to solve a different problem. I built off of his exploration for this solution. The “problem” occurs when you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color.
27. Pretty Up Your Forms with CSS
A nice simple and effective form styling tutorial.
28. Push my button
If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can remember. The few times it actually did get some attention, the lowly button was used and abused by the DHTML crowd—forced to accept obtrusive inline event handlers and other such nefarious crimes against semantic markup.
29. reForm: CSS Form Design Template for Any Layout
The reForms technique is a CSS and Javascript solution I’m working on for form design issues. Although it isn’t complete, I’m providing a few code snips from the CSS and HTML that may be useful to other developers.
30. Rediscovering the Button Element
Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.
31. Showing Good Form
arlier this year, I forget exactly when (it’s been a good year), I was building a client site that needed widgets. Building this was a challenge not just in CSS, but in choosing the proper markup – how should such a widget be constructed?
32. Simply Accessible
Designing for accessibility is not just a technical endeavour – like most other pursuits on the web, it involves creative problem solving and experimentation. In this context I mean that we are designing when we produce solutions that are built with intent – they are well thought out and created to be accessible at many levels and (generally) don’t compromise aesthetics and usability.
33. Stylish Buttons
Consider, if you will, the lowly form button…the familiar, dreary workhorse of online forms: Not much to look at, are they? Until recent versions of IE and Mozilla, buttons were simple slabs that looked like bricks in a polished design. Now they’re at least rendered with rounded corners, and with a shadow and rollover effect. Still, you’re stuck with anonymous black-on-beige, and the size is almost always too big for the page. If you’re going to the trouble to control everything else, why stop when it comes to form buttons?
34. Styling form controls
A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems. The short answer is probably disappointing to many: you can’t. Some also argue that you shouldn’t, since doing so may reduce usability. My opinion on that is that light, sensible styling of some form controls can be OK, as long as you don’t overdo it. But what if we don’t think about usability, and just want to see what actually can be styled? I’ve made a few examples that make up a longer answer to the question about styling form controls.
35. Styling even more form controls
This is a follow-up to my previous post about Styling form controls. For some background info and comments, you may want to read that post. In short, this is a reference that shows how differently form controls are rendered by different web browsers and operating systems. It also shows that little can be done to make form controls appear the same across browsers and platforms.
36. Styling form controls with CSS, revisited
Over two years ago, in September 2004, I posted an article called Styling form controls. My intention with that article (and its follow-up, Styling even more form controls) was to show that attempting to use CSS to make form controls look similar across browsers and operating systems in an exercise in futility. It simply cannot be done.
37. Stylin’ Forms
Take out your designer’s scapel and prepare to give forms an extreme makeover without tables. Slight exaggeration, but adding a splash of color and changing the layout dramatically changes a room and the same concept applies to forms. The form code is also accessible.
38. Styling Form Fieldsets, Legends and Labels
Quick and simple form tutorial.
39. The Form Garden
A CSS Stylesheet Collection for Web Forms.
40. Tips For Creating Great Web Forms
Some really great tips or construction professinal wuality web forms.
Form Interactivity
1. AutoSuggest – An autocomplete text field with Ajax
The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).
2. Really easy field validation with Prototype
I wanted a robust javascript validation library that was simple to implement and didn’t require me do any extra work other than creating the form. My favourite idea for a method of doing this is to utilise the field elements’ class attribute to indicate what sort of field it is and hence any validation requirements. There are a few javascript libraries that implement that idea like wForms, but, since I’m currently hell-bent on re-writing all my javascript using Prototype, I thought I’d see how difficult or easy it would be to roll my own. Turns out that this is just the sort of thing that is easy with Prototype. Here’s what I came up with .
3. Scrollable Checklists
Usability and accessibility are all the rage right now and that’s great because it’s slowly making the web a better place. Unfortunately, some of the goodies in our bags of tricks aren’t quite up to snuff when it comes to these two areas. One such goody is the good old select element—specifically with the multiple attribute enabled. How about we do away with them and try something different?
4. Ping-o-matic’s Hover Invitation
Pingomatic uses a hover behaviour, a hover invitation, that works very well to not only invite people to click on something but to educate them that something is indeed clickable. What I am talking about is using hover on a label: label:hover Many people are not aware that labels are clickable, and that may be due to the fact that not everybody uses the label tag when building forms, so the behaviour can be inconsistent. By using label:hover, a person will learn that it is clickable, and your form will become that much easier for that person to use
Form Generators
1. CSS Form Code Maker
This HTML – CSS form generator will create a nice looking layout for forms. The time is now right – to move to ‘tableless’ layout for forms. And at the same time, add a ‘little color’ to the forms.
2. Wufoo – Build HTML Forms, Online Surveys and Invitations
Our HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.
3. Icebrrg – HTML Web forms, surveys, and invitations made chillingly simple
Icebrrg lets anyone easily build online forms for websites and blogs — no programming, software or special skills needed.
4. JotForm – a web based WYSIWYG form builder
JotForm allow you to design your forms online without any prior coding knowledge.
5. Accessible Form Builder
Another online generator for accessible web forms.
6. FormLogix – Create web forms for free
FormLogix is an online form builder tool for creating web databases and web forms.
Our forms may be embedded in your website, blog, or may be used internally.
Forget all you know about databases and forms creation – our form builder
is a WYSIWYG tool and it requires zero coding skills. It enables a user to easily create web forms and web databases such as:Contact us forms, Feedback forms, Events registration forms, Surveys, online Polls, Order forms, Invitations, CRM…
Bir proje geliştirme zaman, en çok kullanılan css formları Giriş, Kayıt ve kullanıcı profilleri olmak eğiliminde olacaktır boyunca iyi bir css form giriş yapıya sahip olmak önemlidir. Eğer çoğu zaman size ideal genel görünümünü tasarımları ve hissetmek için uygun değildir yarattık formların varsayılan görünümünü proje için özel bir şablon geliştirmek için zaman aldıysanız. Biz mevcut form tasarım içine büyük veya nefes hayat arayarak yeni formlar olmalıdır öğreticiler büyük bir liste araya topladık.
Form Rehberler
1. Stil Web Formları CSS kullanma
Bu yazıda size cazip ve kullanışlı formlar oluşturmak için CSS kullanarak nasıl bakacağız.
2. CSS kullanarak Fantezi Form Tasarımı
Sanat ve Bilim CSS taze olan bu bölümde, hangi, muhteşem görünümlü bir form tasarım ve beraber yoluyla çalışacağız gerekli kodu size yollar arayacaktır.
3. giriş kutuları (metin ve diğerleri) Özelleştirme
Bu eğitimde de etkin olduğunda bir giriş kutusu veya textarea rengini değiştirmek için nasıl gösterecektir. Bu çok basit ve CSS kullanılarak yapılır.
4. Güzel Erişilebilir Formlar
Bir doğru bir şekilde işaretlenmiş HTML formu uygulandığında, gerekli düzenin temeli üretecek bir stil ki: Ben herkesin kolayca herhangi bir proje üzerinde yeniden verebilecek bir şey yaratmak istedim. Yani burada o-taşınabilir, ulaşılabilir biçimleri benim girişimi.
5. Erişilebilir CSS Formlar: İki-Sütun Düzeni oluşturma CSS kullanarak
form düzenler ve optimizasyonu konusunda gerçekten büyük bilgi Lots.
6. CSS-Sadece, Tablo-az Formlar
CSS-sadece, masa daha az formları emmek çoğu. Bu yüzden, sıradanlık için öne doğru eğilmek istemeyen, daha iyi bir şey ile geliyor görev almaya karar verdi. Bu benim çabalarının sonucudur. O Win/IE6, Firefox v1.0 çalışır +, Win / Opera v8.0, minör düzeni farklılıklar vardır Mac / Safari v1.0.3 ve Mac / Safari v1.2, ve fakat kullanışlı oldukça Mac/IE5 içinde buggered olduğunu. 2.
7. CSS Tableless Formu
Bu kendi hafif form uygulamak için bir şablon olarak kullanabileceğiniz bir tablosuz CSS şeklidir. Bu form için iki sütun düzeni oluşturmak için yüzen bir arada ve negatif kenar boşlukları kullanır.
8. Şık düğmeleri
Insanların çoğu oldukça çirkin olan düğmeleri, varsayılan görünüm hemfikir olacaktır. güzel bir degrade arka plan görüntüsü ve CSS kullanarak, bir kuğu bir ördek bir form düğmeye dönüştürmek kolaydır.
9. CSS Formlar biçimlendirme ve - Revisited
Bu yılın başlarında Aslında Sahana arabirimi için yapılan bir CSS tabanlı bir form şablonu ile ilgili bir makale yayınlanmıştır. O, ben makale sendeledi okuyucuların alınan yorumlarına dayanarak güncellenmiştir final sürümü Sahana sistemine yaptı. Ben o şablonu, dolayısıyla bu değiştirilmiş bir versiyonu bazı eksiklikleri gerçekleştirmek için geldim.
10. Form Meclisi - Form Layouts
Web Formları için CSS Stil Koleksiyonu.
11. CSS, formların Stu Nicholls Styling
Stu Nicholls demonstratives bizim favori eğlence form düzenlerinden birini.
12. Anlamsal Yatay Formlar
fieldsets, efsaneler, etiketler ve bazı CSS stil ile bir anlamsal olarak doğru bir şekilde http://www.squarespace.com/signup/ de kayıt formu yeniden.
13. form alanları Düzeltme
Web formları genellikle, ama gerekli olmayan bilgi için ziyaretçi sormak uzun ve karmaşık formlar ciddi e-ticaret satış süreci sürebiliyor. Bu, kullanıcıların kendi takdirine göre bu isteğe bağlı alanlar gizleme seçeneği vermek şık olmaz ve biz CSS Javascript, DOM ve bazı akıllı kullanımı ile!
14. Badboy Niceforms
Güzel yuvarlak ve form düzeni gibi elma.
15. Fonksiyonel Pretty Formlar
Bu tarz gelince Formlar kaba bir nokta olmuştur. sadece sadece bu kadar yapabileceğiniz var; tarayıcılar sadece ben istiyorum styling türlü izin vermez. Konu sık sık tartışılan sorunun güzel bir gösteri Roger Johansson'un sitesinde üzerinde bulunabilir. Ayrıca olmuştur birkaç çözüm çalıştı. Gerçekten, bu konuda çalışmaya başladı gününe kadar bulabildim iyi çözüm badboy medya oldu. Ama bu çözüm ile ilgili sorunlar Ben kendi yolumu bulmaya gittim vardı.
16. Çıkarma: Herkes için Ücretsiz Form - Standardkonforme Online-Formulare
kan, ter ve gözyaşı XHTML bu form tasarımı koymak ve CSS geçen hafta tüm iyi geliyor. kadar devam mızmızlanıyor sonra, nihayet en azından, bu yüzden birkaç büyük Web tarayıcılar arasında güvenilir ve tutarlı hale getirmek için aldım, benim iş eldeki meydan memnun. ve diğerleri serbestçe ödünç verir, çalmak ve / veya uyum, kendi ihtiyaçları için - Ama, yakın oybirliği insanlar formları hakkında hissettiğim genel hayal kırıklığı ile dinledikten sonra, ben sivil bir şey yapmak istiyorum ve işimin bir genericized sürümünü düşünce .
17. Form Düzeni Şablonları
istenmeyen web sayfaları yetim olarak, formları birçok kişi tarafından ihmal edilir ve birkaç tarafından tasarlanmıştır. Çoğu insan, bazı metin alanlarında bulunan bazı kalın metin koymak ve gönder düğmesi içeriğini oluşturmaktadır. Ben göz achingly mümkün olduğu kadar renkli olarak formlar, nasıl yapılacağı ve Safari derhal yok saydığı şekilde form widgets özelleştirmek için nasıl tamamen birkaç öğreticiler rastlamak, ama ben bir makale nasıl anlamsal kullanmak için söylüyorum bulamıyorum ile birlikte daha iyi bir form düzen yapmak için CSS erişilebilir kodu. Nesneleri gruplama alanları etiketleme, kullanıcı onlar Standartlar ve Form düzeni ile ilgili bulabildiğim tek makale içeri doldurmak zorunda bilgi miktarı ile baş yardımcı oldukça yaşlıca Eric oldu - Düzen problemlerin çoğunu formları ile yalan nerede Meyer gerileme. Bu nedenle, web tasarımı topluma bir hizmet olarak, ben, son birkaç gün için formların faul derinliklerine yolculuk ve tüm daha akıllı çıkar. Burada benim seyahatlerin hikaye ...
18. Popup'lara olmadan Formu Yardım
bir pencere ortamı üstlenerek cihaz bağımsızlık aykırı olarak sitenizin ziyaretçileri üzerine yeni pencereler sokmak üzerine, hoş olduğunu. geliştiriciler yeni pencerede uygun olduğunu düşünüyorsanız bir durum web formları ile. ziyaretçisi bir form alanında yardım gerektiriyorsa, yeni bir pencere ziyaretçi ve form terk etmek zorunda muhtemelen onlar girdiniz veri kaybetme derdinden kurtarır. Bu yazıda yeni bir pencere açmaya gerek kalmadan sorunu halletmenin bir betik teknik göstermektedir.
19. formları ile Fun - özelleştirilmiş giriş elemanları
Hiç web sitenizin geri kalanı ile HTML formlarının bakmak maç istedi? stucturally temiz biçimlendirme ve erişilebilirlik koruyarak Bu makalede, HTML formları için özelleştirilmiş arka uygulamak gösteriyor.
20. Form Alanları Styling
Sürece Hatırladığım olarak, formlar her zaman sorunlu olmuştur. Onlar kısa ama tam, iyi görünümlü ama kafa karıştırıcı değil, bilgilendirici ama darmadağın olmamak gerekir.
21. Temiz ve saf CSS FORMU tasarım
Bu ve basit daha hızlı sadece CSS özelliğini kullanmak bir tablo yapısı "taklit" dan. Her durumda, CSS sevenler için, bu yazının html tablolar kullanmadan saf CSS form tasarımı hakkında bir öneri göstermektedir.
22. formlara CSS uygulama
23. basit CSS hileler ile geliştirin giriş alanları
Hepimiz etkili ve iyi görünümlü web formları oluşturmak için çalışıyoruz. Ama her zaman yeni bir zorlukları var. Daha iyi bir web formları nasıl yapılacağını benim önceki yazıları okursanız çok bilgi var fark olabilirdi. Etiket konumlandırma, bağlam vurgulama veya elemanları haklı. Ama, sadece birkaç basit CSS hileler ile bir olağan, sıkıcı web formları daha etkili ve heyecanlı yapabilir.
24. Form Redux Highlighting
Ben de genel sevdim oldukça olarak sona erdi deneme idi etkisi vurgulayarak form görünüyor, bu yüzden, ben bu yapıldı nasıl bir açıklama yazmak düşündüm ve nasıl isterseniz, kendi sitelerinde uygulayabilirler.
25. Resmi TUHAFLIK
Ben açıklandığı gibi sıfırlanır ve stil benim sürümü tweaked, daha adil bir dizi neden sadece o büyük çirkin gruplandırılmış seçici yerine evrensel bir seçici kullanımı yoktu (nezaket değişen derecelerde) sordu. Ben, bugünün tarayıcılarda seçici destek devlet verilen terk ederken ben sıfırlamak istediğiniz tüm öğeleri listesi için bu işi yapmak için tek yol, ve ben (girdiler, textareas, vb) form denetimleri styling önlemek istediğini söyledi O dışarı dokunmak istemiyorum tüm form denetimleri gibi.
Bu ben form denetimleri kaçınarak rahatsız ediyorum neden olarak soru adil bir numarası neden, ve bunu kendi "doğal weirdness" nedeniyle olduğunu söyledi. hepimiz sonuçları nefret ediyorum, ve CSS şekilde olmaları gerektiğini söylüyor tedavi olsaydı, bu, ben form denetimleri mevcut CSS ile tarif etmek imkansız olduğu anlamına geliyordu. Ayrıca, form denetimi styling ele öngörülebilir gelecekte alanımızın çok dengesiz bir dal olacak. Burada, ben tüm bu karmaşa yüzeyini çizmeyin. Adil ön uyarı: Bu uzun bir olacak. Ayrıca, Bette Davis kez ilan olarak, kemerlerinizi toka: bir engebeli sürüş olacak.
26. Fieldset arka planlar ve Efsaneler Başlarken IE Behave için
Ben sadece ben arıyorum bir cevap bulamadı önce emin kimse bu konuda yazmamış değilim. Jeff Croft yakın bir cevabı var, ama farklı bir sorunu çözmek için çalışıyor. Bu çözüm için yaptığı araştırma kapalı yaptı. "Sorun" Eğer bir fieldset etiketi ve bir efsane etiketiyle bir form bina ne zaman ve ardından stili bir arka plan rengi ile fieldset oluşur.
27. CSS ile Form Pretty Up
Güzel basit ve etkili form şekillendirme öğretici.
28. benim tuşuna basınız
Ben yeterince saygı almaz düşünmek bir unsur varsa, o lazım düğme olacak's. O kadar ben bildim bileli için dersler ve form örnekleri olarak girişe ikinci keman's. Birkaç kez aslında biraz dikkat mü asılıyor düğme kullanılmış ve istismar ile DHTML kalabalık göze batan inline olay işleyici ve semantik biçimlendirme karşı benzeri hain suçları kabul etmek zorunda.
29. reform: Herhangi Düzen Formu Tasarım Şablonu CSS
Reformlar tekniği ve CSS I form tasarım konularında üzerinde çalışıyorum Javascript çözüm. o tam olmasa da, diğer geliştiriciler için yararlı olabilir CSS ve HTML birkaç kod snips veren kulüpler.
30. Düğme Element Yeniden Keşfetmek
kullanıcılar için tutarlı bir arayüz oluşturmak her uygulama tasarımcısı için sürekli bir mücadeledir. Web Bina tutarlılık tarayıcılar ve işletim sistemleri arasında görsel render farklılıkları ve çılgınca ve neredeyse keyfi ne olabilir farklıdır çünkü yapılamaz özellikle zordur. Hiçbir yerde bu daha fazla rezil Gönder düğmesini standart bir görünüm için savaşta tüm form elemanları ve bunların en büyük kaybeden uğraşıyoruz zaman daha belirgin hale gelir.
31. Iyi Formu gösteriliyor
arlier bu yıl, ben bir müşteri yerinde inşa edildi (iyi bir yıl oldu) tam olarak ne zaman unutmak gerekli aletler. Bina bu ancak uygun işaretleme seçiminde değil, sadece CSS bir meydan okumaydı - böyle bir widget inşa nasıl olması gerektiği?
32. Sadece Erişilebilir
erişilebilirlik için tasarlama sadece teknik bir çaba değildir - web üzerinde en çok diğer takipçiliği gibi, bu çözme ve deneme yaratıcı problem içerir. onlar iyi düşünülmüş ve pek çok düzeyde ve erişilebilir olması oluşturdu (genellikle) uzlaşma estetik ve kullanılabilirlik yoktur - bu bağlamda ben biz niyet ile inşa edilen çözümler üretmek zaman tasarımı anlamına gelir.
33. Şık Düğmeler
Değil bakmak çok şey var, bunlar: eğer sen asılıyor şeklinde düğme ... online formları tanıdık, kasvetli beygir, düşünün? ve son sürümleri kadar IE ve Mozilla, düğmeler cilalı bir tasarım tuğla gibi görünen basit bir plaka vardı. Şimdi onlar, en azından köşeleri yuvarlatılmış hale konum ve bir gölge ve rollover efekti ile. Yine de seni ve anonim siyah-on-bej saplanmışsın boyutu sayfa için neredeyse her zaman çok büyük. Eğer düğmeler form geldiğinde durdurmak, neden her şeyi kontrol etmek sorun gidiyoruz?
34. Stil form denetimleri
sık sık css-posta listesi tartışmak gibi forumlarda sorulan bir soru nasıl platformlarda tutarlı bir şekilde stil form denetimleri etmektir. Çoğu zaman, soru sadece bu işi yapmak için çalıştı ve tarayıcıları ve işletim sistemleri üzerinde render fark ettim biri tarafından istenir. Kısa cevap muhtemelen hayal kırıklığı birçok: yapamazsın. Eğer gerektiğini Bazıları da, iddia kullanılabilirlik azaltabilir bunu yaparken bu yana. Bence bu o ışık, bazı form denetimleri ve mantıklı stil olarak bunu aşırıya kaçmayın sürece Tamam olabilir. Ama ne biz, kullanışlılık düşünmek yoksa sadece aslında tarz ne olabilir görmek istiyorum? Ben form denetimleri şekillendirme hakkında soruya uzun bir cevap oluşturan bir kaç örnek yaptım.
35. daha da form denetimleri Styling
Bu bir takip formu kontrol Styling hakkında benim önceki posta. bazı arka plan bilgi ve yorumlar için, söz konusu yazı okumak isteyebilirsiniz. Kısacası, bu form denetimleri farklı web tarayıcıları ve işletim sistemleri tarafından nasıl oluşturulacağını farklı gösteren bir referanstır. O da küçük form denetimleri tarayıcılarda ve platformlarda aynı görünmesini sağlamak için ne yapılabilir olduğunu göstermektedir.
36. CSS ile Styling form denetimleri, yeniden gözden
İki yıl önce, 2004 Eylül ayında, bir makale form denetimleri Styling denilen yayınlanmıştır. Bu yazının (ve onun kadar, hatta daha fazla form denetimleri Styling izleyin) ile Niyetim çalışırken form denetimleri boşuna bir egzersiz tarayıcıları ve işletim sistemleri arasında benzer görünmesi için CSS kullanmak için göstermekti. Basitçe yapılamaz.
37. Yarat Formlar
senin tasarımcının scapel çıkarın ve formlar tablolar olmadan aşırı bir makyaj vermek için hazırlar. Biraz abartılı, ama bir renk cümbüşü ekleyerek ve düzeni büyük ölçüde değişen ve bir oda değişiklikleri aynı kavramı formları için de geçerlidir. Form kodları da erişilebilir.
38. Form Fieldsets, Efsaneler ve Etiketler Şekillendirici
Hızlı ve basit bir form öğretici.
39. Form Bahçe
Web Formları için CSS Stil Koleksiyonu.
40. Ipuçları Büyük Web Formları oluşturma için
Biraz gerçekten büyük ip uçlarına ya da inşaat profesyonel wuality web formları.
Form Etkileşimi
1. AutoSuggest - Ajax ile bir otomatik tamamlama metin alanına
AutoSuggest sınıf bir metin alanına önerilen değerler popdown menü ekler. Kullanıcı ya, alana girmek için bir öneri doğrudan tıklatabilir veya yukarı ve aşağı ok tuşlarını kullanarak listede gezinmek, sekme tuşunu kullanarak bir değer seçerek. öneri listesi değerlerine (bir PHP komut dosyası veya benzeri) XML olarak verilmektedir.
2. Prototip ile Gerçekten kolay saha doğrulama
Ben ve uygulanması basit bana ekstra bir çalışma formu oluşturmak dışında fazla ihtiyacı olmadı sağlam bir javascript kütüphanesi doğrulama istedi. Bunu yapmanın bir yöntemi için en sevdiğim fikir alanında tür o nedenle herhangi bir doğrulama gereksinimlerini ne olduğunu göstermek için alan elemanları 'class özniteliği kullanmaktır. Ben yeniden Prototip kullanarak tüm javascript yazarken şu anda hell-bent olduğumdan beri wForms gibi bu fikri uygulayan birkaç javascript kütüphaneleri vardır, ama, ben bunu kendi rulo olacağını ne kadar zor veya kolay göreceğimi düşünmüştüm . Bu prototip ile kolay şey sadece sıralama olduğunu kapatır. Burada ile geldi budur.
3. Kaydırılabilir Denetim
Kullanılabilirlik ve erişilebilirlik ve şu anda tüm öfke olduğunu yavaş yavaş web daha iyi bir yer yapma, çünkü harika. Ne yazık ki, hileler bizim torbalarda goodies bazıları bu iki alanda söz konusu olduğunda enfiye oldukça yukarı değildir. Böyle bir goody eski seçin element-özellikle ile birden fazla özelliği etkinleştirilmiş iyidir. Hakkında onları ortadan kaldırmak ve farklı bir şeyler denemek?
4. Ping-o-matic's Hover Davet
Pingomatic bir hover davranışı kullanır, sadece insanlar ama bir şey tıklamaya onları eğitmek için bir şey gerçekten tıklanabilir olduğunu davet değil, çok iyi çalışan bir hover daveti. etiket: ne konuşuyorum ilgili bir etiket üzerinde hover kullanıyor hover Birçok kişi etiketler ve tıklanabilir olduğunu bildiren yapı oluşturur, bu nedenle davranış tutarsız olabilir değilken herkes etiket etiketini kullanır gerçeğine bağlı olabilir farkında değil . etiket kullanarak: hover, bir kişi ve o, tıklanabilir olduğunu öğreneceksiniz form olacak o kadar o kişinin kullanımı daha kolay
Form Jeneratörler
1. CSS Form Kodu Maker
Bu HTML - CSS form jeneratör formları için bir güzel düzen oluşturur. formlar için 'tablosuz' düzen taşımak - Şimdi tam zamanı hakkıdır. Ve aynı zamanda formları için bir 'küçük renk' ekleyin.
2. Wufoo - HTML Formları, Online Araştırmaları ve Davetiyeler Build
Bizim HTML form üreticisi size tek bir kod satırı yazmadan ihtiyacınız veri, kayıt ve online ödeme toplayabilir böylece iletişim formları, çevrimiçi anketler ve davetiyeler oluşturmanıza yardımcı olur.
3. Icebrrg - HTML Web formları, anketler ve davetiyeler chillingly basitleştirildi
Icebrrg herkesin kolayca web siteleri ve bloglar için online formlar oluşturmanıza olanak sağlar - programlama, yazılım ya da özel yetenek gerekiyordu.
4. JotForm - WYSIWYG form oluşturucu web tabanlı bir
JotForm Eğer formları önceden kodlama bilgisi olmadan online tasarım sağlar.
5. Erişilebilir Form Builder
erişilebilen web formları için bir online jeneratör.
6. FormLogix - ücretsiz web formları oluşturun
FormLogix web veri tabanları ve web formları oluşturmak için bir online form oluşturucu bir araçtır.
Bizim formları veya web sitesi, blog gömülü olabilir dahili kullanılabilir.
formumuzu oluşturucu - veritabanları ve formlar yaratma konusunda bildiğim tek şey unutun
WYSIWYG araçtır ve sıfır kodlama beceri gerektirir. Bir kullanıcı kolaylıkla gibi web formları ve web veritabanları oluşturmanıza olanak tanır: İletişim formları, geri bildirim formları, Etkinlikler kayıt formları, Anket, online Anketler, sipariş formları, Davetiyeler, CRM ...