19 Forms tips, tutorials, techniques & resources
Web Form Design: Modern Solutions and Creative Ideas
"Below we present over 40 (really) beautiful examples of web forms as well as modern solutions and creative ideas related to web form design. Some of the examples are Flash-based; however, in most cases you can easily create similar designs with pure CSS and (X)HTML."
Improve form usability with auto messages
"This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field."
Sign Up Forms Must Die
"You arrive eager to dive in and start engaging and what’s the first thing that greets you? A form. We can do better. In fact, I believe we can get people engaged with digital services in a way that tells them how such services work and why they should care enough to use them. I also believe we can do this without explicitly making them fill out a sign-up form as a first step."
Tutorials Round-Up: Ajax, CSS, PHP and More
"You don’t have to re-invent the wheel all the time - you can use existing solutions, modify and improve them and publish them as well - just the way other people did it for you. In this post we’ve covered over 200 Ajax, CSS, Flash, JavaScript, PHP, MySQL, RSS, XML as well as ASP, C++, Perl, Python and Java tutorials."
CSS-Based Forms: Modern Solutions
"In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, so web-forms are becoming more and more important for the success of any company. In the end, exactly those web-forms are responsible for the first contact with potential customers. Let’s take a look, which modern solutions a web-developer can use, designing his/her next css-based form."
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."
10 CSS Form Examples
"Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you'll be creating stunning CSS forms in no time at all."
List of Ajax form Validators
"Inputing correct data into any web application or website is very important. There is two different ways to validate forms by either Server-side or Client-side. The list below is Client-Side Ajax Form Validator."
Ajax Forms with jQuery
"There are so many different javascript frameworks out there, but I have recently started to use jQuery, and I love it. Not only is the library much smaller than others, but it is so simple to use. I wanted to show how easy it is to turn a regular form into a AJAX form."
Web app form design
"Ryan Singer delivers a presentation on creating web forms that delight your users"
Streamline your forms with widgets
"“Advanced forms” are rarely that. A more fitting name would be “Overwhelming and confusing forms”. But with Jason Long’s clever approach to streamlining a screen full of checkboxes, you might just be able to once again look fondly on your forms."
Legends of Style Revised
"When I wrote the original article on how to achieve cross-browser consistency when styling form legends, I noted that there was a bug in the way Firefox handled them. The bug appears to still have not been resolved, but there is a way to achieve the same effect across browsers."
10 CSS Form Examples
"Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you'll be creating stunning CSS forms in no time at all."
Making Compact Forms More Accessible
"Tightly designed forms can look great on paper, but they often ignore accessibility issues altogether."
Sensible Forms: A Form Usability Checklist
"...we can make our users’ lives easier by thinking about the way people interact with our websites, providing clear direction, and then putting the burden of sorting out the details in the hands of the computers—not the users."
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."
Web Form Design Best Practices
"This presentation outlines form organization, form elements, and form interactions with an overview of best practices and examples for each."
Showing Good Form
"James Edwards takes the good stuff down off the shelf and illustrates how forms can be built to be both highly stylable and remain accessible to all comers."
Revealing Relationships Can Be Good Form
"Ian Lloyd labels up and ships out a tip for improving the usability of form labels."